TECH ROADMAP
Follow who know road!!! v1.0 🤸‍♀️
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:
- Google Developers Group (GDG)
- Google Developer Student Club (DSC)
- She Code Africa (SCA)
- Open Source Community Africa (OSCA)
- Developer Career
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 :
- Decagon Not free
- Enyata Free
- AltSchool Africa Not free
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.
- Outreachy Paid
- The Collab Lab Paid
- Internshala Paid
- HNG Internship Unpaid
- SideHustle.ng Unpaid
- Zuri Team Unpaid
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
- VsCode
- Download link Link
- Documentation Link
- VsCode setup for Html, Css and Javascript ~ Norbert BM Web Development Video
- 15 VsCode extensions for frontend developers ~ Traversy Media Video
- Create your own custom code snippets ~ Timonwa Article
- Sublime
- Download link Link
- The best Sublime settings and packages ~ Tech With Tim Video
- Atom
- Website Link
- Atom editor HTML and CSS setup ~ Daniel Soriano Video
- Top 10 Atom extensions ~ CodeWithWebDev Video
- 10 Atom essential packages ~ Traversy Media Video
Online Editors (Playgrounds)
- Codepen
- Website Link
- How to Use CodePen — A beginner’s guide ~ Jessica Wilkins Article
- How to use Codepen with Chis Coyier. ~ FreeCodeCamp Video
- A beginner’s guide to Codepen — The basics. ~ Manuel Zavala Video
- CodeSandbox
- Website Link
- Documentation Link
- CodeSandbox — Online react playground — Interview with Ives van Hoorne. ~ SurviveJs Article
- VsCode Online
- Website Link
- Documentation Link
- VsCode for the web. ~ VsCode Video
- Vscode running in the browser ~ Coder Foundry
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
- Html tutorial for beginners — Crash course. ~ Programming with Mosh
- Html crash course for absolute beginners. ~ Traversy Media
- Css crash course for absolute beginners. ~ Traversy Media
- Learn Html and Css for beginners — Crash course. ~ Dev Ed
- Html and Css full course from scratch. ~ FreeCodeCamp
Curated Playlist
Free Courses
Articles
Practice Projects
- 50+ Html and Css projects. ~ Mahdi
- Frontend Challenges — Improve your front-end coding skills by building real projects Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
- DevChallenges — Web Development Resources and Community that help you to become a Web Developer by working with Real-life projects and practices.
- Codewell — Improve your HTML and CSS skills by practising on real design templates.
Others
Tips and tricks, tools, cool examples etc.
- Creative Css and Javascript projects. ~ Online Tutorials. Youtube Channel
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
- Css Flexbox crash course. ~ Traversy Media
- Css Flexbox crash course. ~ FreeCodeCamp
- Css Grid crash course. ~ Dev Ed
- Grid crash course. ~ FreeCodeCamp
- Learn Css animation Tutorial. ~ Scrimba
Curated Playlist
- Css animations tutorial. ~ The Net Ninja
- Css animations series. ~ DevTips
- Css3 Full Tutorial. ~ Dev Dreamer
Articles
Practice Projects
- 100 Complete Responsive Website Designs ~ Mr. Web Designer
- 6 handy Css animation projects. ~ Envato Tuts+
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
- Website Link
- Download Link Link
- Documentation Link
- Git complete course tutorial. ~ Leela Web Dev Video
GitHub
- Website Link
- Download Link Link
- Documentation Link
- Git and GitHub for beginners. ~ FreeCodeCamp Video
- Using GitHub Desktop for beginners. ~ Kevin Powell Video
GitLab
- Website Link
- Documentation Link
- Git and GitLab tutorial. ~ GitSchoolDude Video
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
- Website Link
- Documentation. Link
- Host websites on Netlify for free. ~ Packetcode Video
- Deploy websites in seconds with Netlify ~ Traversy Media Video
Vercel
- Website Link
- Documentation Link
- Deploy a website to vercel. — WebDemystified Video
- Deploying an application with vercel. — Caleb Barger Video
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
- Learn JavaScript. Full course for beginners. ~ FreeCodeCamp
- Javascript for web designers. ~ Envato Tuts
- JavaScript DOM crash course. ~ Code and Create
- Learn JavaScript DOM manipulation in 18 minutes. ~ WebDevSimplified
Curated Playlist
- JavaScript Tutorials for beginners. ~ The Net Ninja
- JavaScript Tutorials for beginners. ~ Telusko
- JavaScript DOM tutorial ~ The Net Ninja
- JavaScript DOM tutorial. ~ Dcode
- Everything Vanilla JavaScript tutorials plus projects to build. ~ Traversy Media
Free Courses
Articles
Practice Projects
- 10 JavaScript projects in 10 hours. Coding Challenge. ~ Florin Pop
- 15 vanilla JavaScript projects. ~ Coding Addict
- 40 JavaScript projects for beginners — Easy ideas to get started coding JS. ~ FreeCodeCamp
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
- ES6 JavaScript tutorials for beginners. ~ Dev Ed
- JavaScript ES6, ES7, ES8 tutorial. ~ FreeCodeCamp
- JavaScript ES6 modules. ~ Web Dev Simplified
Curated Playlist
- Advanced JavaScript Concepts. ~ Dave Grey
- Advanced JavaScript Concepts, the complete series. ~ Tech CBT
- Regular expressions tutorial. ~ The Net Ninja
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
- Website Link
- Bootstrap 5 beginner crash course. ~ Traversy Media Video
- Bootstrap full course. ~ FreeCodeCamp Video
- Bootstrap 5 tutorial. ~ The Net Ninja Playlist
- Build a complete Bootstrap website. ~ Drew Ryan Video
- Html, Css and Bootstrap projects. ~ Ansar Ali Playlist
Styled ComponentsCss only
- Website Link
- Documentation Link
- Styled Components crash course. ~ Traversy Media Video
- React Styled Components. ~ Codevolution Playlist
TailwindCss only
- Website Link
- Tailwind Css crash course. ~ Traversy Media Video
- Tailwind Css tutorials for beginners. ~ Scrimba Video
- Tailwind CSS tutorial. ~ The Net Ninja Playlist
- Build and deploy a personal Portfolio using Tailwind CSS. ~ Design Course Video
- Build Facebook UI clone using Tailwind Css. ~ Ithinktechnologies Video
Chakra UICss only
- Website Link
- Documentation Link
- Chakra UI ~ Jesus take the Compiler Playlist
- Build a React Responsive Portfolio App Using Chakra UI ~ Codepur Video
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
- Website. Link
- Documentation. Link
- Sass crash course. ~ Traversy Media Video
- Complete Sass tutorial. ~ The Net Ninja Video
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
- Asynchronous JavaScript full course. ~ FreeCodeCamp
- Fetch API introduction. ~ Traversy Media
- Up and running JSON server. Part 1 ~ The Net Ninja
- Up and running JSON server. Part 2 ~ The Net Ninja
Curated Playlist
Articles
Practice Projects
- Build a food recipe app with fetch API and vanilla JavaScript. ~ GeetProbin.
- Quiz app using Fetch API. ~ Code with Erum
- Build and deploy 5 JavaScript and React API projects in 10 hours. ~ JavaScript Mastery
Others
Tips and tricks, tools, cool examples etc.
- 6 APIs Frontend Developers Should Know ~ A Smith Article
- JsonPlaceholder — Free fake API for testing and prototyping. Tool
- Postman — Postman is an API platform for building and using APIs. Tool
- Create your own fake rest API with JSON server. ~ Traversy Media Video
- Make your own mock API. ~ Code with Abba Kubow Video
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
- Website Link
- ReactJs crash course. ~ Traversy Media Video
- ReactJs full course for beginners. ~ FreeCodeCamp Video
- Full modern ReactJs tutorial. ~ The Net Ninja Playlist
- React Router crash course. ~ FreeCodeCamp Video
- React Router 6. What changed and upgrading guide. ~ Academind Video
- React hooks course. All React hooks explained. ~ PedroTech Video
- React hooks tutorial. ~ Codevolution Playlist
- 15 ReactJs projects . ~ FreeCodeCamp Video
Vue
- Website Link
- VueJs crash course. ~ Traversy Media Video
- VueJs full course for beginners. ~ FreeCodeCamp Video
- VueJs 3 tutorial. ~ The Net Ninja Playlist
- Learn Vuex ~ The Net Ninja Playlist
- Vuex tutorial Full course ~ Scrimba Video
- Vue Authentication full course ~ Scalable Scripts. Video
- Build a restaurant management project with VueJs. ~ Code step by step Playlist
- Build an invoice app with Vue3, vuex and firebase. ~ John Kormanicki Video
Angular
- Website Link
- Angular crash course. ~ Traversy Media Video
- Angular full course for beginners. ~ FreeCodeCamp Video
- Angular Js tutorial. ~ The Net Ninja Playlist
- Create admin dashboard using Angular. ~ Simplilearn Video
Svelte
- Website Link
- Documentation Link
- Svelte crash course. ~ Traversy Media Video
- Learn the Svelte Javascript framework full course. ~ FreeCodeCamp Video
- Svelte tutorial for beginners. ~ The Net Ninja Playlist
- SvelteKit for beginners. Movie app tutorial ~ Dev Ed Video
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
- Google Fonts Free
- Add custom fonts to your website using Google Fonts. ~ Dcode
- Font share — Fontshare is a free fonts service from ITF, making quality fonts accessible to all. Free
Icons
- Google Material Icons Free
- How to use Google Material Icons. ~ Leanne R
- Font Awesome Icons Free
- How to add Fontawesone to your html. ~ KodeBase
- IconStore — Free Icons by First-Class Designers. Free
- FlatIcons — Access +6.7M vector icons & stickers. Free
- Loaf — Animated SVG icons. Free
- Seeklogo — Seeklogo is the world’s best brand logo and vector logo template source. Free
Photos
- Unsplash — Beautiful free images and photos. Free
- Pexels — Free stock photos, images & videos shared by creators. Free
- Flickr — Beautiful free images and photos. Free
Illustrations and Patterns
- Undraw — Open-source illustrations for any idea you can imagine and create. Free
- 404 Illustrations — Royalty free illustrations for 404 pages. Free
- Doodad Pattern Generator. Free
Simplify Css
- Neumorphism maker — Generate Soft-UI CSS code. Free
- Animista — CSS animations on demand. Free
- CSS Layout — Popular layouts and patterns made with CSS. Free
- Clippy — CSS clip-path maker. Free
Gradients and Color schemes.
- Pigments — Color scheme creator. Free App
- Colour Palette — Extract/Create gradients and colors. Free App
- Coolors — Generate or browse beautiful color combinations for your designs. Free
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!