Open in app

Sign in

Write

Sign in

TECH ROADMAP

Styles theandriod
13 min readMay 5, 2022

Follow who know road!!! v1.0 🤸‍♀️

gotten from unsplash

You are welcome droids on the internet…… I welcome you to a profound partway to tech… THE LAST GUILD AVAILABLE ON THE INTERNET .

🎯 Things you will learn

(a) what is frontend development.

(b) Frontend development Roadmap.

(c) Frontend career paths.

(d) Frontend development skills.

(e) Tools to use.

(d) Projects to Build.

(e) Communities to help you grow and network.

(e) Videos and Articles.

Grab a glass of beer sip 🍺… anyways lets begin..

What is frontend development ??

frontend development in my own understanding… it’s anything you see on a website so that you my friend can interact with it, using the underlying technologies below 👇

HTML CSS & JAVASCRIPT

Frontend development Roadmap 🚴‍♀️

See my friend a roadmap ehhh is a systematic plan that an individual like you and I will follow in other to achieve a certain Goal..

Networking to meet new friends learning..

Tech Communities

Joining a Tech Community is the fastest way to learn and network from other tech gurus in the space for free of charge. You get to connect to other tech gurus with different levels of specialization, 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 that i am familiar with :

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

Desktop Apps

Online Editors (Playgrounds)

Mobile Apps

Html and Css (Beginner’s 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.

Videos

Curated Playlist

Free Courses

Articles

Practice Projects

Others

Tips and tricks, tools, cool examples etc.

Html and Css (Advanced Level)

Now that you have learned the basics of HTML and CSS, it’s 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.

Videos

Curated Playlist

Articles

Practice Projects

Others

Tips and tricks, tools, cool examples etc.

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.

Git

GitHub

GitLab

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.

Netlify

Vercel

GitHub Pages

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’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.

Videos

Curated Playlist

Free Courses

Articles

Practice Projects

Others

Tips and tricks, tools, cool examples etc.

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.

Videos

Curated Playlist

Articles

Practice Projects

Others

Tips and tricks, tools, cool examples etc.

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

Bootstrap Css and Js

Styled ComponentsCss only

TailwindCss only

Chakra UICss only

BulmaCss only

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’t fret, it’s easier than it sounds. Check them out below.

Sass

Less

PostCSS

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.

Videos

Articles

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

Videos

Curated Playlist

Articles

Practice Projects

Others

Tips and tricks, tools, cool examples etc.

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.

ReactJs

Vue

Angular

Svelte

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.

Fonts

Icons

Photos

Illustrations and Patterns

Simplify Css

Gradients and Color schemes.

Others

Cheatsheets

Cheatsheets are short lists of information that you can use to help you do or remember something. Below are cheatsheets on what you have been learning so far. Do enjoy!

Help the writer 🙏🏽

any amount you can so that i can fix my laptop and return back to coding + learning.. Access Bank 1430755960 Onyekachi Emmanuel Ajah

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.

Happy Coding!

Technology
Roadmaps
HTML
Software Development
Programming

--

--

Styles theandriod

Written by Styles theandriod

41 Followers

Styles Theandriod is a Nigeria-based Programmer and writer. He has Coded some open source projects so far. and now working to his first project Giggle.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams