Frontend Web Development 🔮

Curated By

Avatar of akhilmhdh

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.

Install and setup stuffs 🚧

For learning Web Development you need to first set up the following things

Things you need and need not.

  1. A 🖥️ with any OS ✔️
  2. A good light weight IDE: VSCode, Atom ✔️
  3. One of the most used web browsers: Firefox, Edge ✔️
  4. Using super light Notepad Text Editor ❌
  5. High designing skills ❌
  6. Basic programming knowledge ✔️

Will be really helpful in JavaScript Part

Fundamentals First 💪

Fundamental building blocks of web development is

  • HTML - HyperText Markup Language
  • CSS - Cascade Style Sheet
  • JS - JavaScript
  1. Have a really good grasp of HTML and CSS first.
  2. Build some layouts using Flexbox, Grid, etc.
  3. Then learn basic JavaScript and its use cases.
  4. Learn web development basics from MDN
  5. If you want to learn like challenge-based, use FreeCodeCamp
  6. Check out JS in 14-min by @jgthms
  7. Built some small projects like tick-tac-toe, drum kit simulator.

CSS-Frameworks, SASS & API Handling 🌟

CSS frameworks are used to build layouts in a short period. An important thing to consider is unless you have a good grasp on CSS and JS don’t use them.

  1. Some CSS Framework: Bootstrap,TailwindCSS , Bulma
  2. You don’t need to learn every framework out there. Just be good at one framework.
  3. Now learn SASS
  • It’s a preprocessor that converts written SASS code to CSS.
  • It provides additional features like nesting etc.
  1. Learn JS API handling

Project 💡

  1. Build a weather app using any of your frameworks using free weather API

At this point, you have completed everything as a frontend web developer beginner.

Advance/Speciality Section 🔥

Frontend Frameworks ✨

In the long run and when building scalable web applications, building it just using these fundamental blocks can be hectic and tough to maintain. This is where frontend frameworks come into the picture. Learn one framework well and then you can learn other ones with ease.

ES6 Javascript

ECMAScript is a standard for javascript that enables additional capabilities and much better functionality. It gives JS superpowers. Learn ES6.

  1. ES6 Syntax

Package Managers

Package managers are used to managing libraries in a project. It helps us to organize them and also shares between teams.

Bundlers

Bundlers are used to transpile your JS code into a native JS code. It helps us to use ES standard JS in projects. . You don’t need to have a really deep knowledge of bundlers. But knowing some of their basic commands and their working will be useful.

  1. Webpack
  2. Rollup
  3. Parcel

Some Frontend Frameworks & To Get Started

Most Popular Frontend Frameworks:

React

  1. Made by Facebook
  2. Super flexible
  3. Has a good amount of learning curve
  4. Ecosystem is really powerful
  5. JSX Typing - JavaScript as HTML

React is a library rather than a front-end framework, and it does one thing well, rendering of DOM. It has a strong community and a lot of documentation. Its flexibility comes at the cost of app maintainability.

  1. React Official Tutorial
  2. Free Code Camp
  3. Udemy Stephen Grider

When you learn React, Two common terms are class components and functional components using hooks. Learn the Class component first. It gives you an idea about abstractions in hooks.

Angular

  1. Made by Google
  2. For very large scale app
  3. High learning curve
  4. Tightly enforced coding / very less flexibility
  5. Complete frontend framework with routing etc.
  6. Complete Typescript

Angular is for large scale app and has a bigger size compared to react and others.

  1. CodeCraft Angular - The best angular tutorial for free.

Vue

  1. Complete frontend framework
  2. Good documentation and Eco-system
  3. Small learning curve
  4. Performance a bit down compared to others
  5. Template-based syntax

Vue started as a solution to issues that React and Angular couldn’t solve during that time. Simple, yet powerful community-driven framework.

  1. Vue Starting Point

Svelte

  1. Compiler
  2. Still in beta
  3. Minimal learning
  4. Superfast
  5. Docs are neat and well made

Svelte is a compiler rather than a framework. It’s much faster and lighter compared to the rest of the frameworks. Svelte is still under beta but soon will be a major one.

  1. Svelte Tutorial

There are a lot more frameworks out there like EmberJS, Preact, and also frameworks build on top of the above ones like NextJS from React, Sapper from Svelte, etc.

Linting And Formators

Linting and formatting are applied to make your code typed by the various developer to a uniform one. It enforces code style for the team so that maintenance can be a lot easier.

Some of the linting tools are:

  1. ESLINT
  2. Prettier

Handling errors & finding solutions 🕵️‍♀️

Testing

Testing ensures your code is working correctly or not. It runs a set of codes and checks your given condition is satisfied or not. Some of the testing libraries are

  1. Cypress
  2. Enzyme
  3. Jest

Error Handling

  1. Browser developer tools are your best friend
  2. Use Browser Dev Tools like Inspector, Console, Debugger to check for errors in UI and webpage code
  3. Stackoverflow will be the most visited site for you 😊
  4. It’s a broad field and master one, then you can easily conquer the rest of them.

Steps for doing projects 👩‍💻

Some good starting projects:

  1. To-Do List
  2. Calculator
  3. Graph Builder
  4. Sorting Analyzer

😍 All the best 😊