Part 1: Beginning front end development
So you want to learn web development? This post attempts to go through the best way to learn web development as a complete beginner. It gives you guidelines on how to learn web development, what topics to learn in which order and why, and general principles on learning. It also includes suggested pathways and resources.
Fields of programming
Before we begin, note that there are different fields of programming. Some examples are:
- Web development
- Games development
- Data science
- Systems programming
- And many more
Exactly which you decide to go for will depend on your goals and interests. If you’re not specifically set on one, then web development is a good one to start with.
Why web development?
There are several reasons why web development is probably the best programming field to get started with:
- Web development is generally considered easier than other fields such as games development and data science.
- Web development teaches you programming just as well as any other kind of development does. It can be a great start to your career regardless of which field you end up in.
- Web development is trending right now. Application development is moving more and more towards web technologies. We have Progressive Web Apps (PWAs) which are becoming more prominent and replacing native apps for many businesses. Also it’s possible to make native apps with technologies such as Electron, React Native, etc. These are cross-platform and use web technologies. In short, web development is a very good field right now.
- Web development is a great career. You can potentially get your first job as a front end developer very quickly. Some jobs only require HTML and CSS which are quite fast to learn.
What is web development?
As it sounds, web development concerns with making websites. But as mentioned above, technologies used in web development can be used for much more than that. They can be used to make Progressive Web Applications, native applications, data visualisations, games and much more.
Components of web development
Web development (and programming in general) can be broadly classified into 3 main parts:
- Front end development
- Back end development
- Dev ops
Front end development
Front end development is basically what a website looks like and what interactivity it has.
HTML is the structure and content of a website.
CSS are the styles of the website, what the website looks like.
Back end development
Back end development happens on the server. The usual functions of the back end are things like:
- Processing forms and payments (e.g. when you make a purchase and submit payment details on a website).
- Returning search results (e.g. when you search for products on Amazon).
- Creating accounts (e.g. when you sign up to a new website).
- And also serving the web page to the web browser.
Dev ops are “peripherals” to web development and other things that increase efficiency of development. For example web hosting, source control, and other things.
Which should you start with?
In my opinion, unless you’ve got a strong preference for back end development, you should start with front end development.
Dev ops isn’t really development, it’s more like peripherals to development, so you don’t start with that so to speak.
Which leaves back end or front end. You can start with either of those, however there are several pros to starting with front end development.
- There are good third party solutions to back end development, such as Google Firebase. You can use these to make complete applications. You could even make a static website or application, which doesn’t even need a back end other than a basic server to send the page. However, other than templates or having someone else do it for you, you can’t really avoid front end development.
How to learn web development
To learn anything, the most important thing you need to do is to put the time in. In my experience, putting in the time seems much more important than having a good learning plan.
But of course, having a good learning plan can massively accelerate the process.
A bit further down, I list what in my experience is the best path to learning web development, along with the best resources.
But first, let’s talk about what is a bad way to learn web development.
A bad plan
If you search forums and such for the best way to learn web development, you’ll get many answers telling you to “just build stuff”. This is a good thing to do, but as a complete beginner it’s not enough to just build things and learn as you go.
For starters, as a beginner, you don’t know what you don’t know. Until you encounter something by accident, you won’t know it exists and there will be gaps in your knowledge.
So you also need to learn from thorough courses that will expose you to everything you need to know.
And also build stuff along with that.
Learn in iterations
You won’t learn everything the first time you encounter it
To be a good web developer there are many things you need to know. When starting out it’s not enough to know about something deeply, rather you have to know a little about a lot of things. You need to have a complete base of knowledge.
The most efficient way to learn is in iterations. Learn the basics of a technology. Practice with it for a while and build stuff. Then come back some time later (a few weeks or months), and learn some more. Next time you’ll learn about it a level deeper. And so on.
Don’t worry, this will feel like a natural process after a while. You’ll basically be learning more and more, but instead of learning a topic completely at once, you’ll just be learning more about it over time.
Web development learning plan
Introduction to web development
I suggest starting with the course: Front end masters — Complete Intro To Web Development
This is an 11 hour course (so not too long by programming course standards) that briefly goes over all the important topics of front end web development.
Will you be an expert web developer after doing this course? No. But the benefit of this course is that it will expose you to all the technologies you need to know, so when you do the next courses, things will “click” much more easily. You’ll already have encountered them, they’ll make sense, and you’ll be able to learn them deeper than otherwise.
This is the learn in iterations principle mentioned above.
Don’t try to learn this course 100%, it’s here as a quick introduction and exposure for you to learn some of the basics.
Learning HTML and CSS
HTML is basically just using the correct element for what you want to do. That’s about it. For example, if you’re writing a paragraph, use the paragraph tag. If you’re writing a heading / title, use the heading tag, and so on.
CSS is a bit more difficult, but not too bad. With CSS you basically declare the style of the HTML, how it appears visually. E.g. a declaration of “color: red;” makes the text color appear red. Overall it’s also fairly easy to learn the basics of it.
The three resources you need
Also, always remember to google anything you’re stuck on. Google is a programmer’s best friend.
Probably the best course for beginners at web development.
As a caveat, note that the detail in MDN is extreme and you shouldn’t try to learn everything all at once. The first time around I recommend just going through the tutorials and looking up anything you’re stuck with. For the most part ignore the references. Come back to those on your second iteration of learning HTML and CSS, or if you get stuck.
Here you’ll basically practice what you learn. It’s not all the practice you need, but it’s pretty good. The challenges are fairly good at reinforcing what you learned, and the projects are especially good.
How to go through the resources
I recommend doing these three together. Specifically, do the HTML section of The Web Developer Bootcamp, then go through the HTML tutorials in MDN, then finish off with the HTML section on Free Code Camp.
The reason I recommend it in this way is because the Web Developer Bootcamp course teaches with video so it’s nice and easy to learn from. Afterwards, the MDN tutorials are very thorough, so they’ll teach you HTML in great detail. Finally Free Code Camp is more about practice than learning, so it’s good to do also. With Free Code Camp, start the “Responsive Web Design Certification” and do the “Basic HTML and HTML5”.
After you finish the HTML section of each resource, repeat the process for the CSS section. For Free Code Camp, finish the “Responsive Web Design Certification”.
When you Google stuff, these resources will come up quite often:
CSS Tricks is a great resource on CSS. It’s worth looking at if you’re searching for something specifically about CSS.
Stack Overflow is a resource about development in general. It’s a website where people can ask questions and get them answered by other developers. If you have a question, it’s very likely that someone else has had it in the past and it has been answered there.
Andrew Mead is the best. I have taken some of his other courses and I can confidently say that they are the best courses I’ve ever done in my entire life on anything. I’ve left him glowing 5 star reviews. Also I can say with confidence that he is probably the biggest reason I got a great job as a beginner programmer and excelled there. I realise I must sound like a massive fanboy but it’s true.
Next steps, preparing for a job
After finishing the courses, you’ll have a very solid level of knowledge and you’ll also have had some great practice.
The next steps are to practice a bit more by making some more projects, and to create a portfolio.
The portfolio will be very helpful in helping you get your first job. The fact is that employers don’t know you or your skills personally. They only have your portfolio to judge that you’re able to do the work. So a portfolio is essential.
Build a website for your portfolio
You’ll need a website to host your portfolio on.
There are many ways to build a website:
- CMS with a custom theme (such as WordPress with a custom theme).
- CMS with a premium theme.
- CMS with a page builder and theme builder (such as WordPress with Elementor Pro).
- Using a site builder such as Wix or Squarespace.
There are more options out there, and most of them are pretty good.
My recommendation: WordPress website with a page builder and theme builder
My personal recommendation would be to build a WordPress website with Elementor Pro page builder and theme builder, along with the Astra theme. The reason for this is that it’s probably the easiest and fastest way to make a portfolio website for yourself.
Building a completely custom website is good, but it can take very long. Custom development just takes a lot of time. But with something like Elementor Pro you have ready-made templates and components to help you out. You can practically have a website in a few days.
Of course, if you’re up for the challenge, feel free to create a custom website. It will take longer, but the result will be custom made for you and it will be good practice.
Building a basic static website is free, and then you can host it on GitHub pages or Netlify (I recommend Netlify). For that you’ll definitely want to use a static site generator instead, such as Jekyll or Hugo. I recommend Jekyll. Building it without one of those is possible but much less efficient except for not having to learn how to use a static site generator.
You can also use a CMS such as WordPress and build your own custom theme.
In terms of hosting and domain names, I recommend hosting by Dreamhost or Siteground and domain names from Hover or Namecheap. I’ve had good personal experiences with all those services, and they’re priced well.
Portfolio and practice
Use YouTube for project walkthroughs
- Traversy Media is great and has tutorials on building web pages and components.
- Drew Ryan has tutorials on making complete web pages. They’re very good and worth following along. He doesn’t upload often but the content is relevant.
- These are not essential, but feel free to attempt some every once in a while to practice your CSS skills.
- Note that you’ll never make these kinds of things in a real website, but the practice is good nonetheless and trains CSS skills you will use on normal websites.
Come up with your own ideas and search the internet for inspiration.
Upload them on your website for employers to see.
At some point, you’ll also want to look at
- Read the tutorials on Attlassian.
- These are difficult, especially Webpack, so follow along some YouTube tutorials and learn the basics. There is no need to learn these to a high level at this stage, just the basics will do.
- Again, just learn the basics of this for now.
- The section on SASS on Free Code Camp’s “Front End Libraries” certification should be enough to start with.
- You’ll also need to learn how to compile SASS into CSS in your projects. Your webpack learning above should take care of that.
These are a lot of things to go through, but afterwards you should have a great foundations as a web developer. Remember to take your time and enjoy the process.
If you found this useful, please leave a comment and a like :). I can make part 2 if it’s requested.
Good luck and study well!