Get started with front-end web development
Tags: webdev, beginners, html, css
Published: 2020-08-20 00:40:39

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.     

<h3>How does the web work?</h3>

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

<h4>Resources</h4>

* This <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">MDN Web Docs</a> is a great resource for learning it.
* Here is another article on <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does a Internet work?</a> especially this <a href="https://www.youtube.com/watch?v=x3c1ih2NJEg">10 minute youtube video</a> definitely worth its time. 

---

<h3>HTML Basics</h3>

HTML stands for **H**yper **T**ext **M**arkup **L**anguage. HTML defines the content and structure of a web page. 

<h4>What to learn?</h4>
* 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 <a href="https://caniuse.com/">Can I Use</a>.

<h4>Resources</h4>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">MDN HTML Basics</a> documentation is a great place to start. 

---

<h3>CSS Basics</h3>

CSS stands for **C**ascading **S**tyle **S**heet. If HTML defines the content of a web page, CSS helps in making it a great looking,  professional website. 

<h4>What to learn?</h4>
* 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. 

<h4>Resources</h4>
* First choice for learning fundamental CSS would be <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS">MDN Docs</a>
* Another great resource is a <a href="https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/">CSS Udemy course</a> which covers lot of foundational CSS concepts to several advanced features. 

---

<h3>JavaScript Basics</h3>
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.

<h4>What to learn?</h4>
* Understanding fundamentals of the language
* Getting comfortable with debugging in JavaScript through Browser's developer console.
* Getting familiar with ES6 features

<h4>Resources</h4>
Again, a great place to pick up fundamentals of JavaScript is MDN Docs’ <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript First Steps</a> section.

---

<h3>Further Learning</h3>
Free Code Camp’s <a href="https://www.freecodecamp.org/learn"> Responsive Web Design Certification</a> is another great resource for starting a web developer journey. 

Photo by Markus Spiske on <a href="https://unsplash.com/@markusspiske">Unsplash</a>