Full Stack Developer Road-map 2021 || FREE RESOURCES 🔥🔥( Front-end) Part I
Tags: webdev, html, css, javascript
Published: 2021-11-12 16:44:34

First thing first, 
Do you have questions? Here's an answer
 
###What is a full-stack developer??
A Full-Stack Developer is someone who works with the Back End — or server-side — of the application as well as the Front End or client-side.

###Why Become a Full-Stack Developer??
A Full-Stack Developer, or someone who can work on both the back-end and front-end of an application, is a rare and valuable person to have on a team. It's why they can earn upwards of $120,000 a year and why companies fight to snag one for their team.

In this blog, I will cover the front-end part. Let's jump into it.

As easy as eating a burger!

![full-stack burgur](https://www.linkpicture.com/q/hamburger-full-stack.jpg)

If you can digest this burger, then you are good to go 🤣🤣,

Now serious, let's look at this front-end web dev languages and technologies 🙌,

##1.HTML
  
**HyperText Markup Language (HTML)** is the set of markup symbols or codes inserted into a file intended for display on the Internet. The markup tells web browsers how to display a web page's words and images
<ul style="list-style:none">
<li>HTML describes the structure of a Web page</li>
<li>HTML consists of a series of elements</li>
<li>HTML elements tell the browser how to display the content</li>
<li>HTML elements label pieces of content such as "this is a 
heading", "this is a paragraph", "this is a link", etc.</li></ul>

<h3>Resources</h3>
<ul style="list-style:none">
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.w3schools.com/html/"
          target="_blank"
          >W3Schools</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.codecademy.com/learn/learn-html"
          target="_blank"
          >Learn HTML</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.udemy.com/topic/html/free/"
          target="_blank"
          >Free UDEMY Course for HTML/CSS from scratch</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.freecodecamp.org/news/html-css-11-hour-course/"
          target="_blank"
          >HTML and CSS From scratch - FreeCodeCamp</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://youtu.be/pQN-pnXPaVg"
          target="_blank"
          >HTML in 2hr - FreeCodeCamp</a
        >
      </li>
    </ul>


***
##2.CSS

**Cascading Style Sheets (CSS)** is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML).

<ul style="list-style: none;">
      <li>CSS describes how HTML elements are to be displayed on screen, 
          paper, or in other media</li>
<li>HTML consists of a series of elements</li>
<li>External stylesheets are stored in CSS files</li>
<li>CSS saves a lot of work. It can control the layout of multiple 
  web pages all at once
</li>
    </ul>

<h3>Resources</h3>
<ul>
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.w3schools.com/w3css/defaulT.asp"
          target="_blank"
          >W3Schools CSS</a
        >
      </li>
      
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.freecodecamp.org/news/tag/css/"
          target="_blank"
          >FreeCodeCamp - CSS Course</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://youtu.be/3_9znKVNe5g"
          target="_blank"
          >Intro CSS - This series will teach you CSS in one hour</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://openbase.com/search?q=css"
          target="_blank"
          >ulma - Tutorials provided by OpenBase</a
        >
      </li>
    </ul>

***
##3.JAVASCRIPT
JavaScript is a **dynamic computer programming language**. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side scripts to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

<ul style="list-style: none;">
      <li>JavaScript can update and change both HTML and CSS.</li>
<li>JavaScript can calculate, manipulate and validate data.</li>
<li>JavaScript is the Programming Language for the Web.</li>

    </ul>

<h3>Resources</h3>
<ul>
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.w3schools.com/whatis/whatis_js.asp"
          target="_blank"
          >W3Schools JS</a
        >
      </li>
      
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.freecodecamp.org/news/learn-javascript-full-course/"
          target="_blank"
          >FreeCodeCamp - JS Course</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://youtu.be/W6NZfCO5SIk
          target="_blank"
          >JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour</a
        >
      </li>
      <li>
        <a
          style="text-decoration: none;"
          href="https://www.javascript.com"
          target="_blank"
          >Javascript</a
        >
      </li>
    </ul>


***
##||Frameworks||

The front-end of a website or application is the stuff visible to the user on the website. ... In addition, it includes building user-friendly interfaces and efficiently presenting the data from the back end to a user. Thus, **a Front-end Framework is a platform/tool to build the front end of your website**.

There are many debet on which frameworks are better, and why, but as per global user this are top five,

<ul style="list-style: none;">
      <li><a href="https://reactjs.org/">React</a></li>
      <li><a href="https://angular.io/">Angular</a></li>
      <li><a href="https://vuejs.org/">VueJs</a></li>
      <li><a href="https://jquery.com/">JQuery</a></li>
      <li><a href="https://emberjs.com/">EmberJs</a></li>
    </ul>

Best way to learn and understand each concept in deep, I recommend you to refer to the documentation of a particular framework.

Although there are more technologies for all HTML, CSS, and JAVASCRIPT that will help you to enhance your productivity and make it easy to write code if you ask me first to understand and learn the core language, then go for the framework and their technologies.

Congratulations!!! You’re now a front-end developer. 😎

All the best  `<p style="life:flex;">Happy Code</p>`

Part II will be uploaded soon. Thanks for reading. 💖💖