Learn What Matters

Introduction

Hey Everyone, I starting with web development where we are going to deep dive into frontend development part one. The second part will focus on the backend area in the next article. We are focusing on concepts that actually matter.

Full stack development is the best path you can follow to get a job in tech because of the availability of content and ease to learn. JavaScript is everywhere from the front end to the back end you can't ignore JS. We are going to start with the basic foundations of web development.

HTML

Hyper-Text Markup Language (HTML) is not limited to the structuring web page. HTML5 is more powerful right now in terms of SEO. There are a lot of things introduced in HTML5 for better results.

• Semantic HTML5 (SEO Focus Tags)

  1. Navbar

  2. Article

  3. Strong (Bold)

  4. em (Italic)

  5. Mark

  6. Header

  7. Article

• Open Graph Protocol

• Web Components

• Preloading & Prefetching

• Forms & Data Validations

The above topics may be completely new for you all or maybe not but it's better to know what exists out there. Open Graph protocol is highly important for anyone who wants to learn web development in depth.

CSS

The latest CSS3 is a complete game changer. You can do everything with it Animations, Responsiveness & everything without any third-party library. Also, one thing you have to keep in mind CSS is a long journey you can't master it without practice so don't fall into a loop of learning everything.

• Box Model

• Layouts(FlexBox, Grid Layout, Float)

• Units (%, px, em, rem, vh, wh)

• Calc functions & CSS variables

• Responsive Web Development (Media Queries)

• Animations (Keyframe, Transform)

• CSS preprocessor(SAAS, LESS, PostCSS)

CSS3 is incredible and the only thing you have to do is project building. Learn Advance HTML & CSS for free.

JavaScript

JavaScript is the key. Web development is really easy if you have a good command of JS. React, Next, TypeScript, Node, and all other advance frameworks and libraries build top on JavaScript. There is no perfect roadmap to master JS but required topic you can learn as follows :

• Basic Fundamentals

• ES6+ Syntax

• Template Literals

• Functions (Regular + Arrow)

• Array Methods (map, sort, filter, forEach )

• Shorthand object Property

• Destructuring

• Fetch API

• Async/Await Syntax

• Import and Export

• Debugging

• Webpack and Babel

• Closures, Callbacks & Prototypes

React

React is a JavaScript library that provides a fast & Scalable approach for better results in web development. Components reusability, Hooks, and components are core features of react.

• File & Folder Structure

• Components

• JSX (JavaScript XML)

• Props & Hooks

• State & Events

• Conditional rendering

• React Ecosystem

These are the required concepts you should know as a front-end developer.

As a Developer Never Stop Learning...!!

Git & GitHub

Version control systems are highly recommended to learn as a developer. Git (CLI System) & GitHub(Web Platform) are popular ones but both are different. The version control system helps you track your code and every change you made in your code.

There are multiple options are available such as Bitbucket & CMVC and many more. Learn Complete Version Control System for free.

• Git Basics

• Git Branching

• Git on the Server

• Distributed Git

• GitHub

• Git Tools

Testing Applications

Testing is required because as a developer you should be able to test & improve the performance of your applications. Jest is an open-source javascript testing framework. There are different platforms that help you to test your web apps but Jest is better to learn.

How to Start Testing Your React Apps Using the React Testing Library and Jest

What Next?

This is the complete guide on frontend development and the next article will be a guide on Backend Development. Everyone has their own path to learn web development but here I shared the common suitable way for everyone.

Stay tuned for the next article. 🎉

Learn with well-structured roadmaps.

Conclusion

Hey Everyone, I'm Ganesh Computer Science student from India. I shared everything about tech. Creating content to document my journey with articles, videos (Youtube), and short content. Connect with me on Twitter.

I create video content on youtube support here 👇