Begin Your Frontend Developer Journey!

Congratulations on choosing this career path. You are one step closer to becoming a frontend developer. This guide is specially to help you have a smooth learning, with easy access to the right resources and data.

You will find here vast resources on frontend development from who exactly is frontend developer, the frontend development roadmap, frontend career paths, frontend development skills, tools to use, projects to build, communities to help you grow and network, videos, articles, etc

Congrats once again.

What is Frontend Development?

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.

Frontend Development Roadmap

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 as to how to create/use your roadmap.

Networking

Tech Communities

Joining a Tech Community is the easiest way to network with and learn from other techies in the industry for free. You get to connect to other techies with different levels of expertise, network and socialize, attend tech events, ask questions and get answers from experts and professionals, share and learn from other people's experiences, etc. Below are a few of the most popular tech communities:

Bootcamps

Bootcamps are created to help one with little to no experience in coding gain programming skills by offering them technical training on the relevant skills. They focus on the most important aspects of coding while allowing one apply this new skills to solve real-life problems. They are like schools and some of them offer Certificates/Diplomas upon completion. Most of them are not free. Below are a few of the most popular bootcamps:

Internships and Mentoring

Internships are a period of work often taken to gain professional learning experience relating to a field of study or career interest. You also get to be mentored by seniors and experts in your field from different parts of the world, sometimes even working on real-life projects. It can be a paid or unpaid. You can find below, a list of organizations that offer coding internships and run bootcamps in the tech field.

Code Editors

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 (Beginner' Level)

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 determines the visual layout of webpages. 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.

Html and Css (Advanced Level)

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.

Version Control

Version Control also known as Source Control is a way of managing and tracking the changes made to your code over time. This allows you to easily compare changes made and revert to old versions if the need arises. You can find different tools below that help you do that.

If you are finding Git hard to understand, you can learn GitHub Desktop created by GitHub which makes using Git less complicated. Use it for a while and then come back to Git. After that, you can choose which ever version control service you prefer among GitHub, GitLab and BitBucket.

Deployment Services

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 hard work you have done. You can choose any of the services below.

Debugging Your Code

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.

Javascript

It' 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' perform any actions, now you can make them do something.

Javascript (Advanced)

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

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

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

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.

APIs

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' outputted in key/value pairs. Find out more below.

Javascript Frameworks

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.

AgnosticUI

Brand your UI components once with CSS Custom properties then use across several UI frameworks like React, Vue 3, or Svelte!

Design Resources

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

Other Useful Resource

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

Articles

Videos

What Next?

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 Backend 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' forget to give us a Star on our GitHub repo!

Happy Coding!