How to get started with Front-end Web Development?

Hey there, if you have been going through various articles and videos on how to start building your own cool websites, well you are at the right place. Don’t get too overwhelmed by the tons of languages and frameworks you have to learn. Because it’s all simple and interconnected. You learn one, you easily get the hang of the rest. So, if you are here to learn how to get started with front-end development, CONGRATULATIONS, you have made a great choice.
STEP 1: Get a code editor
A code editor is used to write and develop codes. It makes it much simpler to read and debug your code. There are many to choose from – I personally use visual studio code as I am quite comfortable with it. But some other amazing options include – Atom, Sublime, Brackets etc.
Step 2: Start learning HTML and CSS
Well here is the real deal, if you are someone who grasps better from video tutorials, then I would suggest to go, sign up for an online course on Coursera, Udemy, Gymnasium etc. or just use YouTube and subscribe to some awesome tutors out there. But if you are someone who likes to code and learn the syntax first, before getting into the practical application, then go for w3schools, Freecodecamp, WatchandCode, Code Academy etc. Work through the tasks until you’ve finished and give yourself a pat when you finally receive your certificate. When you get started with HTML and make your very first website using only HTML, you may get a bit disappointed as it’s going to end up quite ugly. Let me warn you, it will look pretty dull and plain. But that’s only until you get your hands dirty and add some CSS to it and get those colours and hover effects on This will take about 2-3 weeks and you would be able to make your own beautiful static websites. Yes, you heard me right, it will only take 2-3 weeks to make your own.
Step 3: Create a GitHub account
This is where you get a link to your website and you can send it around to people and get them awestruck. I have attached a link below which will guide you to your very first GitHub project repository. https://youtu.be/Hev2UcoLtfw So, go ahead and it’s time to show off what you have learnt so far.
Step 4: Learn JavaScript
Now that you are quite familiar with HTML and CSS, you ought to know that whatever you have learnt until now isn’t really programming. JavaScript is where you get to add interactivity and those cool animations and get it to be more responsive. I would suggest to go on to the web and search for some animations and transitions to add to your website. There are plenty of communities out there willing to share their code snippets with you. One of them is codepen.io. They have a variety of developers who share their creative ideas. The very first step in mastering JavaScript is learning from other’s code. Every time you use someone else’s code, read through it and understand what they have done. Also, check out WatchandCode for real-world applications of JavaScript in websites.
STEP 5: Learn advanced styling with Responsive Websites
CSS frameworks are one of the best ways out there to make your website as accessible and responsive as possible. This will make you build websites that are mobile-friendly and improve the way it looks on devices with both large and small screens. Just think about the last time you had to horizontally scroll on your phone to read an article. Did it get quite annoying? Responsive designs hence increase the amount and time people spend on your website. The most popular and widely used CSS framework is Bootstrap, it uses a grid-based system which makes it simpler to code and create responsive websites. Other frameworks include Materialize CSS, Foundation etc. Furthermore, there are some great front-end frameworks like Ember or Modernizr.
STEP 6: Join developer communities
Being a part of a developer’s community is the most important step especially when you are still learning. You will face a lot of troubles and find it hard to debug your code. There is always a group to fall back to who can help you out. Stack overflow, by far, the largest community used by developers around the world to help and get help from other programmers. Discord communities are yet another effective group. Don’t shy away from signing up at meetups. This is best to find groups near your place and interact with developers around you and learn from them. Remember the quality of code = quality of the developer.