Get Started With Front-end Development In 2021🚀

Featured on daily.dev

I started my web development journey exactly one year ago i,e. January 2020 and it's been a year since I'm in learning phase😄

In this article I'll be covering

  • All you need to learn about front-end development
  • Tools and technologies
  • Skills you need to learn
  • Resources
  • And many more....

First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc

I recommend you to start with VS code. Why?

=> Many built-in features
=> It's fast
=> Large community
=> IntelliSense code completion and debugging

If you don't want to download an editor due to memory issue or something else?
Don't worry we have lots of online editors also 👇

Codepen
Codeasandbox

Now you're all set to write code and create beautiful websites. A typical website can be divide into three phases.

Structure - HTML
Styling - CSS
Behavior - JavaScript

1. HTML

  • It is used to build the skeleton for your website
  • It's a markup language that totally operates on tags
  • You can master it within 10 days
    W3 Schools HTML

2. CSS

  • It is used to give the styling for your website
  • Cascading Style Sheets, that totally operates on different properties
  • You can learn it within 20-25 days but it will take time to master it
    W3 Schools CSS

Although there are more than 500 properties in CSS but trust me your hardly use all of them in your entire development life. There are some frequently used CSS properties

  • Box model
  • Position
  • Background
  • Animation
  • Media query
  • Flex box
  • CSS grid

These are some tricky concepts in CSS but don't worry I'm here to make these tricky concept easy for you😍

Learn CSS by playing games

Learn Flexbox
Learn Grid
Learn Transformation

CSS Frameworks

In simple words CSS frameworks are the CSS code written by some other developers. All you need to do is just import in your HTML file and now you can add styling in your website with even writing CSS code by yourself. There are plethora of CSS frameworks available. All are equally good you can pick anyone of them by your choice 👇

  1. Tailwind CSS
  2. Bootstrap
  3. Bulma
  4. Materialize CSS
  5. Foundation

3. JavaScript

  • JS is used to add functionality and behavior in your website
  • JavaScript is a popular programming and widely used language for Web Development
  • You can't master JS in few days or months, It will take time but you will be able to create websites in few days.

Start with the basic topics:

  1. Data types
  2. Loops
  3. Conditional statements
  4. Objects
  5. Arrays
  6. Functions

    Document
    Free resource including books, article, videos and much more

Document Object Model (DOM)

  • With the HTML DOM, you can access, modify and changes the HTML elements
  • When a web page is loaded, the browser creates a Document Object Model of the page

With the help of DOM, JavaScript can change the

  • elements in the page
  • attributes
  • CSS styling
  • add new HTML elements and attributes
  • remove existing HTML elements and attributes

I mean now you have a super power to make changes in you webpage using JS😎

Git and GitHub

I think now it's the right time to learn Git and GitHub (version control)

This article is for absolute beginners. I hope get the some overview of web development. Time to tap your fingers on the keyboard😁
HAPPY CODING❤

Venkatesh Konar's photo

Short and simple keep it up!

Oluwaseyifunmi Taiwo's photo

This is really helpful, thanks

Ritvik Dubey's photo

Great read brother 🙌😍

Best Afokwalam's photo

Good ... Simple and highly educative, wish I could do same a newbie FE.

Paula Maranhão's photo

Great value content, my friend!