I began learning front-end development in 2019, but I didn't continue it for some reason. It wasn't until December 2020 that I started taking front-end seriously. Now, I can create professional-looking front-end websites. If you're thinking about learning front-end development, you first need to understand what front-end is. The front-end is what you see when you open a website or a web page. As the name suggests, it's the front of the website. When you open a website, you see a beautiful web page built using three main technologies: HTML, CSS, and JavaScript.
To start, like everyone else, I followed roadmaps. Here are the three main components of front-end development:
Don't be overwhelmed by having to learn three languages. Yes, you need to learn them, but there's an efficient way to do so, which will also make the journey enjoyable.
HTML stands for Hypertext Markup Language. It's like the body of a car – just a structure, the building block of a website. HTML is the easiest language I've learned so far. You don't need to learn every HTML tag. I’ve been coding in HTML for over two years, and I don’t know every tag. Focus on understanding the concepts and how tags are used. The more you code, the more you learn. Aim to learn about 70% of HTML, which is more than enough.
Pro Tip: Googling is one of the most important skills while learning programming. You can't learn every piece of every language, so understanding the concept allows you to find solutions online.
CSS stands for Cascading Style Sheets. If HTML is the skeleton of a website, CSS is the design. Any design you see on a webpage is mostly done with CSS. I heard CSS was hard when I started, but I found it enjoyable. To get better at CSS, or any language, you need to code more. Start by learning about 60% of CSS and increase your knowledge over time.
If JavaScript is your first programming language, it might be a bit challenging initially. I recommend learning about 50% of it at first. You can create beautiful websites without JavaScript, but JavaScript adds functionality like buttons and animations using libraries. Remember, practice is crucial. If you feel frustrated, take a break, create a project, or copy an existing one to understand it better. This will boost your motivation.
Once you have learned enough HTML and CSS, start creating projects. Initially, I didn’t know how to create a navbar or other elements. I watched project videos and coded along with them. This practice helped me understand and modify different elements with HTML and CSS. Understanding the concept is the key to learning web development.
If you need any help or advice along your journey, feel free to contact me.