loading...
Cover image for Get started with front-end web development

Get started with front-end web development

dev0928 profile image dev0928 ・3 min read

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

Posted on by:

dev0928 profile

dev0928

@dev0928

Full stack developer

Discussion

pic
Editor guide
 

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

 

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.

 

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

 

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

 

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

We like MDN.

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

 

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

 

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

 

I recommend the following site: freecodecamp.org