DEV Community

Cover image for Get started with front-end web development
dev0928
dev0928

Posted on

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


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)

Collapse
 
kovah profile image
Kevin Woblick • 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

Collapse
 
perpetual_education profile image
perpetual . education

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...

Collapse
 
maxiaid profile image
maxiAid

thanks dear

Collapse
 
agata97455080 profile image
Agata • 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.

Collapse
 
ashishk1331 profile image
Ashish Khare😎 • Edited

People raise your hand 🙋, if you think MDN is better than w3. 😊🤔
@dev0928 kinda helpful article.

Collapse
 
perpetual_education profile image
perpetual . education

Are you talking about the w3c specs? or w3schools.com/ ?

We like MDN.

Thought this was an interesting thread
twitter.com/wycats/status/12935977...

Collapse
 
andrewbaisden profile image
Andrew Baisden

It probably still is however w3schools is not as bad as it once was w3fools.com/

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

There's no "better one", both are great and stand for different purposes even on most they coincide.

Collapse
 
iamhugod profile image
Hugo ⚡️

I recommend the following site: freecodecamp.org

Some comments may only be visible to logged-in visitors. Sign in to view all comments.