Simple Beginner Guide to getting started in web development and writing code (2019)
With so many resources out there, as a beginner, it's quite easy to get overwhelmed; wasting a lot of time and not actually getting anywhere. Progress is slow. This guide is written to tackle that. It's written for beginners to get you started writing code as quickly as possible. This guide covers the fundamentals to get you started.
Step 1: Download Atom
There's plenty of text editors you can use, including Sublime Text, Notepad++, Brackets among others. In this guide, I'm going to recommend Atom. It's an excellent editor for web development and it's free. You can download it on both Windows and macOS.Just visit the website here and you'll be able to download it.
Step 2: Install atom-html-preview package
Once you've downloaded Atom, go to settings and search for the 'atom-html-preview' package. This is useful for seeing a live preview of your code as you type, i.e. how it looks on the webpage. This is not necessary however, you could just split the screen and open the file with a browser like Google Chrome so you can also make use of the developer tools in there.I will be writing a separate post on navigating Atom if you need it with some useful extras.
Step 3: Understanding HTML, CSS and JavaScript
HTML stands for Hypertext Markup Language. It's for actually building webpages.CSS stands for Cascading Style Sheets. It's for styling your webpages and making them look nice.
JavaScript is a programming language which is used to program how the webpage actually behaves.
Step 4: Write some HTML
Save the file as example.html or as whatever filename you wish to save it as. However, the important part here is that it ends in .html as this tells the computer that it's a HTML file. You can create a folder and call it something like my_website if you wish to and save all your files in this folder. You could put this folder on your desktop so it's easier to access. Now that you've done that you can start writing some HTML. Try typing HTML and hitting enter or the tab key. You should see something like this:
Anyway you'll understand what everything means soon anyway so let's get started with actually writing something.
Inside the body tags, i.e. <body> and </body> try writing <h1>Hello World</h1> and then saving it. Then right click and click preview HTML to see how it looks on the webpage. The <h1> tag is just a heading tag for the most important heading on the webpage. We can make it look nicer using CSS but it's important to first understand HTML which is how we actually build our webpages. Once we can do that well we can then move on to learning how we can style the webpage using CSS.
Your code should look something like this and notice I've added the title as Hello. That's just whatever is going to be displayed in the tab window and is the title.
Step 5: More on HTML basics
For more on HTML basics check out the MDN web docs at the following link: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basicsThe MDN web docs also contains detailed content on getting started.
Next steps
Once you're really comfortable with HTML, you're ready to learn CSS. Check it out here: https://developer.mozilla.org/en-US/docs/Learn/CSSOnce you're comfortable with both HTML and CSS, try building your own website about something you care about. Use your new learnt skills to build something and if you get stuck with anything look it up. That's the best way to learn and consolidate everything you've learnt so far. Once you're good with that you're ready to start learning JavaScript to make your websites even better. More on that in a future post.
I hope this post has been helpful. Feel free to post any questions or suggestions in the comments section below. :)
Comments
Post a Comment