Begin Your Frontend Developer Journey!

Frontend development also called client-side development, is the process of creating the visible part of a website using HTML, CSS, and JavaScript, so that users can view and interact with that website.

Learn more about what frontend development is by clicking the links below.

A roadmap is a visualization of a strategic plan. You will need one if you want to actualize becoming a frontend developer. The resources below will guide you on how to create/use your roadmap.

For you to start coding, you will need a place to write and run your code. This is where code editors come in. A code editor is a text editor specifically designed for writing and editing source codes. You can find the editors used by most front-end developers below, with the most popular being VsCode.

But before diving in, check this video out;Best 3 editors for coding and why. ~ Tutmo

HTML and CSS are the 2 most important languages when it comes to building a website. HTML which stands for Hypertext Markup Language provides the structure of the page and CSS which stands for Cascading Style Sheets determine the visual layout of web pages. These are the first set of languages you will learn as a frontend developer.

You will find enough resources below to help you learn, along with projects you can build to practice and showcase your newly acquired skills.

Now that you have learned the basics of HTML and CSS, it' time to level up. Learn more on making your webpages more responsive and compatible on all devices using CSS Flexbox and Grid.

You can also make your pages more fun with CSS transitions and animations. Some cool projects on CSS animations will be listed down below too to inspire you.

Now that you have successfully hosted your codes on GitHub, GitLab or BitBucket, you would want a server to host your frontend applications either temporarily or permanently and also have testable links which you can share with friends and potential clients so they can admire and see the good work you have done. You can choose any of the services below.

Debugging is a very important part of the development process. It is a process of finding and fixing errors (also known as “bugs”) in your code. These bugs can cause your code to behave unexpectedly or crash.

As a developer, you need to be able to find and fix errors in your code. The following resources will help you to learn how to debug your code.

It's time to learn JavaScript, your first programing language.

JavaScript along with HTML and CSS make up the Holy Trinity of the web when it comes to frontend.

It is a programming language used to make web pages dynamic and interactive. Those forms and buttons you have been creating that don't perform any actions, now you can make them do something.

You have learned the basics of JavaScript, time to learn modern and newer concepts to help you write easier and better codes like Arrow functions, Modules and the other goodies that came with JavaScript ES6.

CSS frameworks and libraries are reusable codes written by someone else that you can use instead of writing your CSS code from scratch.

They aid you in having a more standards-compliant and responsive web design using the CSS language. And some even come with extra features that have JavaScript integrated into them. Check out some of the most popular ones below.

Note: You do not need to learn all of them, you just have to know at least one CSS-only and one CSS-Js framework/library.

Before picking your first framework/library, check these videos out;What are frameworks and libraries. ~ CodeacademyTop CSS frameworks to check out in 2021. ~ Adrian Twarog

CSS Processors allow you to write css-like codes which you can then compile into normal CSS code. You get to write CSS as if you were writing a programming language which in turn offers you a wide variety of logical syntax. Don' fret, it' easier than it sounds. Check them out below.

JSON which stands for JavaScript Object Notation is a text-based data exchange format. Commonly used for transmitting data in web applications like sending data to and fro between the server and client, so it can be displayed on a web page, or vice versa.

An API is an intermediary between two applications software allowing them easily communicate and share data. It stands for Application Programming Interface. This is easy to understand by both computers and humans as it's outputted in key/value pairs. Find out more below.

A JavaScript framework is an application framework written in JavaScript where programmers can manipulate the functions and use them for their convenience. They make working with JavaScript easier and smoother. So you have to have reasonable knowledge of JavaScript before using it.

Below are tools you can use to aid the creative process from, free photos to icons, fonts and other goodies. Explore them.

This is a collection of other useful resources that couldn't fit into the sections above. Explore!

Pat yourself on the back for making it this far. Do continue to practice your skills, build more projects, and apply for jobs. If you plan on becoming a FullStack Developer, then check out our Frontend Development Roadmap.

Feel free to tweet a thank you to us at @techroadmap__ on twitter and if you have any questions or comments, feel free to send us a dm too or email us at techcareerroadmap@gmail.com. Don't forget to give us a Star on our GitHub repo!

Happy Coding!