Get started with front-end web development

Learning front-end web development has become one of the essential skills for developers. Typical web application comprises several technologies and frameworks. Starting with a front-end framework or library without learning foundational web development skills could lead to frustration.

This article attempts to explain a list of fundamental web development skills along with resources to learn them.

How does the web work?

As a web developer, it is very important to understand what happens when a request is made to access a web page.

Resources

This MDN Web Docs is a great resource for learning it.
Here is another article on How does a Internet work? especially this 10 minute youtube video definitely worth its time.

HTML Basics

HTML stands for Hyper Text Markup Language. HTML defines the content and structure of a web page.

What to learn?

Overall structure of a web page including high-level tags like <html>, <head>, <body> and their importance.
Tags introduced in HTML5.
Browser support for newer HTML tags. This can be checked at Can I Use.

Resources

MDN HTML Basics documentation is a great place to start.

CSS Basics

CSS stands for Cascading Style Sheet. If HTML defines the content of a web page, CSS helps in making it a great looking, professional website.

What to learn?

Different ways of defining styles and best practices around them.
How are different types of selectors defined in CSS?
What is specificity?
What are some of the commonly used CSS properties?
Cross browser support for modern CSS features
Knowing how to inspect the style used by a given element on a web page.

Resources

First choice for learning fundamental CSS would be MDN Docs
Another great resource is a CSS Udemy course which covers lot of foundational CSS concepts to several advanced features.

JavaScript Basics

JavaScript is necessary if websites need some sort of dynamic functionality. Consider a simple example of websites that need to display personalized greetings depending on the users’ time of the day. JavaScript is necessary for accomplishing these types of dynamic functionalities.

What to learn?

Understanding fundamentals of the language
Getting comfortable with debugging in JavaScript through Browser's developer console.
Getting familiar with ES6 features