Salut(its hello in French😇)👋

To start a career you need to learn the skills of that career.
There are many ways and resources that can help you in picking up these skills but the path isn't always clear with so many options available for learning and for someone just starting out it can be really overwhelming.😑😭 Trust me i have been there.

My aim of writing this is to literally hold your hands🤝 and walk you through the process/path that would give you an edge over other newbies. Are you ready? OK Allons-y🕺(let's go)....

Who is a front-end developer

Have you ever looked at a website and wonder how/what made it worked? How the website layout looks different on different screen sizes or how a button acted when clicked? All these and more are done by a Frontend Developer.

Skills required

• The internet
• HTML
• CSS3
• CSS Framework
• Javascript
• Javascript Framework
• Version Control System

The Internet

Learning about how the internet works can be boring🙊(please don't tell anyone I said that😂). I just narrowed it down for you to 3 important/neccessary aspect🤗.

1. Learn about HTTP.
2. Learn about DNS.
3. Learn about domain names(how to get a domain name,etc) and web hosting(both free & paid).⁣

HTML(Hypertext Markup Language)

I see HTML as the foundation of web development. I want you to see it as that too.😇

To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form,etc cool right?😎

Here is my learning path for you🤗

1. Learn the fundamentals(very important)
2. Conventions and best practices
3. Semantic HTML
   • Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

     Elements such as header , footer and article are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

4. Forms and validation
5. SEO basics as well as accessibility.⁣

CSS

You can use css to add colours, change fonts, insert background color and to some elements, as well as to style forms.

Once you know a good amount of HTML you should start learning these:

1. Learn the fundamentals
2. Css Grid
3. Positioning
4. Display
5. Box Model
6. Flexbox
7. Responsive design and Media Queries

CSS is also used to make web pages responsive(ie making the structure of the page fit perfectly into various screen sizes like smartphones, tablets,etc).

CSS Frameworks

CSS frameworks are tools used by developers to make their job easier.A framework contains ready-made components and tools that enable the developer to write code faster.

Frameworks give developers the tools to quickly spin-up user interfaces that can be tweaked and iterated on throughout a project instead of trying to reinvent the wheels everytime.

Some css frameworks🤗:

• Bootstrap(my personal favorite)
• Tailwind css
• Bulma
• Materialize Css
• Foundation etc

I can't say which is the "best". I believe personal interest differs.
My suggestion is to check out all of them and know the one that resonates with you better.😜

JavaScript😈

I hope i didn't scare you with the emoji? Don't worry javascript is not hard(coughs😂)

What is JavaScript?

JavaScript is a programming language that adds interactivity to your website.

From my experience javascript is a very beautiful language. I am always intrigued by every new thing i learn.

However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. I hope you are still with me? Ok let's continue💯

Now that you know some CSS start learning some javascript. Learn the fundamentals before trying anything else.⁣

1. Learn the fundamentals
2. Syntax & constructs
3. DOM manipulation
4. Fetch API/AJAX
5. ES6 & Modular JS etc

Javascript Frameworks

JS frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks.

Same with css frameworks, js frameworks are used instead of trying to reinvent the wheels every time.

The Big 3 JavaScript Frameworks

The three JavaScript frameworks that currently dominate the market in terms of popularity and usage are:

• React

• Vue

• Angular

Again i can't tell you which to choose. Check all three out and stick to anyone that resonates with you better.

They each have large communities. When you want to start your new project on front-end technologies, these three are your best bets.

Version Control System

Now at this point, you could stop here and you'd have your first website, but when working with large teams on projects you want to know about version-control systems like git.

Git is a content tracker. So Git can be used to store content — it is mostly used to store code.

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. Version control helps in handling the codes in git.

You should learn these:

1. Learn basic git commands
2. Terminal
3. Repository hosting system

Git cheatsheet👇

Wrap Up

• I believe that with the detailed information above, nothing can stop you💪 from becoming a frontend developer except you

• Please don't make learning a framework a substitute for learning vanilla Css and/or Js. You really don't want to do that.

• Believe me when I say the path to becoming a developer isn't all red as roses. A period would come and you'd feel like giving up(i got those thoughts😪)

I believe you can do it. Feel free to share your struggles/progress with me on twitter.🐦

🙌I'm rooting for you❤&💡