Get started with front-end web development

#webdev #beginners #html #css

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

Resources

Again, a great place to pick up fundamentals of JavaScript is MDN Docs’ JavaScript First Steps section.

Further Learning

Free Code Camp’s Responsive Web Design Certification is another great resource for starting a web developer journey.

Photo by Markus Spiske on Unsplash

Top comments (9)

Kevin Woblick • Aug 20 '20 • Edited

Please please please do not forget to mention Accessibility and correct semantics! It's one of the foundations of web development and often overlooked, or "forgotten". Your website doesn't have to be fully usable by 100% of the people, but it's little to no effort to use <button> for buttons instead of <a>, add alt="" tags to images, or provide proper labels for input elements.

Some starting points: Google Web Accessilibity, W3C Accessibility Introduction

perpetual . education • Aug 20 '20

We find that people aren't connecting the "why" for HTML. Starting out with a deep connection to content strategy can really help root people. Books like this: before learning HTML can really help: youtube.com/watch?v=bnbS1enub2Q

and understanding this: dev.to/perpetual_education/baby-ta...

maxiAid • Nov 6 '20

thanks dear

Agata • Aug 20 '20 • Edited

My experience gained in cooperation with mastersofdigital.com.au/website-de... shows that creating complex websites according to the concept of design thinking helps a lot. By this, I mean the participation of specialists dealing with different aspects of the company (marketing, IT, sales, etc.) in the design process. This produces the best results in terms of creating an innovative and functional website.