FrontEnd Development: Zero to Hero
Tags: beginners, html, css, javascript
Published: 2019-10-17 16:01:35

---
title: FrontEnd Development: Zero to Hero
published: true
description: The main goal of the series is to give beginners a strong foundation in web development.
tags: beginners,html,css,javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5gyy0p798ap8dyfmffnw.jpg 
series: FrontEnd Development Zero to Hero
---

> __Cover photo by [Ilya Pavlov](https://unsplash.com/@ilyapavlov) on [Unsplash](https://unsplash.com/)__

Welcome, this is a series of posts that aim to teach front end development from scratch to a level that the reader(you) will gain confidence in building usable and accessible website(s).

The __intended audience__ of this series are __beginners__ or anyone who __consider themselves as beginners__ and in a __constant state of learning__.

I will not be covering the ins and out of front end development but I'll cover topics that will give you a strong foundation to build upon.

Some topics that I consider to be 'advanced' are not covered as they can be intimidating to a beginner but I'll gladly mention them and point you to resources that will be of help when you decide to learn them.

I am __not a pro nor an expert__, I am just trying to teach you what I know.

Below is the table of contents that links to the article(s) in the series.

<hr>

__INTRODUCTION__
	1. [The internet](https://dev.to/ziizium/what-is-the-internet-3g02)
        2. [The web](https://dev.to/ziizium/what-is-the-web-47dj)
	3. [Web Browsers](https://dev.to/ziizium/web-browsers-27lf)
	4. [Tools you'll need](https://dev.to/ziizium/tools-for-web-development-112e)
1. __HTML__
	1. [Introduction](https://dev.to/ziizium/introduction-to-html-3ik4)
	2. [Some history lesson](https://dev.to/ziizium/history-of-html-m8h)
	3. __TECHNICAL PART__
		* [The HTML Specification](https://dev.to/ziizium/the-html-specification-4epa)
		* [Elements and tags](https://dev.to/ziizium/html-elements-and-tags-4gdi)
		* [Replaced Element and Void Elements](https://dev.to/ziizium/replaced-element-and-void-element-56ba)
		* [Writing Accessible HTML](https://dev.to/ziizium/writing-accessible-html-n74)
		* [Validating HTML documents](https://dev.to/ziizium/validating-html-documents-2c2a)
	4. [Tools, Resources and Reference](https://dev.to/ziizium/html-resources-and-reference-fo0)
2. __CSS__
	1. [Introduction](https://dev.to/ziizium/introduction-to-css-1fm)
	2. [Some history lesson](https://dev.to/ziizium/history-of-css-3m0)
	3. __TECHNICAL PART__
		* [The Specification](https://dev.to/ziizium/the-css-specification-2k3c)
        * [CSS Properties](https://dev.to/ziizium/css-properties-2h1j)
		* [CSS Selectors](https://dev.to/ziizium/css-selectors-1ch3)
		* [CSS Units](https://dev.to/ziizium/css-units-2bh1)
        * [CSS Specificity](https://dev.to/ziizium/css-specificity-ilk)
		* [The Cascade](https://dev.to/ziizium/the-css-cascade-47kb)
		* [CSS Inheritance](https://dev.to/ziizium/css-inheritance-3pi1)
        * [The Box model](https://dev.to/ziizium/the-css-box-model-14k)
        * [Margin Collapse](https://dev.to/ziizium/css-margin-collapse-4dgi)
		* [CSS Positioning](https://dev.to/ziizium/css-positioning-34d8)
        * [CSS z-index](https://dev.to/ziizium/css-z-index-j86)
		* [CSS Colors](https://dev.to/ziizium/css-colors-7ai)
        * [CSS Backgrounds](https://dev.to/ziizium/css-backgrounds-30nn)
		* [CSS Variables](https://dev.to/ziizium/css-variables-1n72)
		* [CSS Floats](https://dev.to/ziizium/css-floats-309c)
        * [CSS Block Formatting Context](https://dev.to/ziizium/css-block-formatting-context-13ol)
		* __CSS LAYOUT ALGORITHMS__
			* [CSS Flexbox part 1](https://dev.to/ziizium/css-flexbox-part-1-48f9)
           * [CSS Flexbox part 2](https://dev.to/ziizium/css-flexbox-part-2-18f2)
			* [CSS Grid part 1](https://dev.to/ziizium/css-grid-part-1-3f57)
           * [CSS Grid part 2](https://dev.to/ziizium/css-grid-part-2-3bna)
   4. [Media Queries](https://dev.to/ziizium/css-media-queries-14fa)
	5. [CSS Typography](https://dev.to/ziizium/css-typography-1jnd)
	6. [CSS Animations and Transitions](https://dev.to/ziizium/css-animations-and-transitions-51j8)
   7. [Naming Conventions](https://dev.to/ziizium/css-naming-conventions-5gd6)
	8. [Writing maintainable CSS](https://dev.to/ziizium/writing-maintainable-css-5ge9)
	9. [Resources and Reference](https://dev.to/ziizium/css-references-and-resource-268k)

3. __JavaScript__
	1. [Introduction](https://dev.to/ziizium/introduction-to-javascript-ajh)
	2. [Some history lesson](https://dev.to/ziizium/history-of-javascript-5dlh)
	3. __TECHNICAL PART__
		* [The Specification](https://dev.to/ziizium/the-ecmascript-specification-fek)
		* [A quick introduction to programming](https://dev.to/ziizium/introduction-to-programming-41jm)
		* [Variables](https://dev.to/ziizium/javascript-variables-3do)
		* [Arrays](https://dev.to/ziizium/javascript-arrays-50c5)
		* [Objects](https://dev.to/ziizium/javascript-objects-2m3m)
		* [Numbers](https://dev.to/ziizium/javascript-numbers-2g7o)
		* [Conditional statements](https://dev.to/ziizium/javascript-conditionals-cjd)
        * [Loops](https://dev.to/ziizium/javascript-loops-3nc)
        * [Functions](https://dev.to/ziizium/javascript-functions-1ilb)
		* [The Document Object Model (DOM)](https://dev.to/ziizium/the-document-object-model-3n8o)
		* [Asynchronous JavaScript and XML (Ajax)](https://dev.to/ziizium/introduction-to-ajax-1ffg)
	4. [Resources and Reference](https://dev.to/ziizium/javascript-references-and-resource-6fh)

4. __WEB DESIGN__
	1. [Introduction](https://dev.to/ziizium/introduction-to-web-design-2k40)
	2. [Some History Lesson](https://dev.to/ziizium/history-of-web-design-490g)
	3. __WEBSITE DESIGN TECHNIQUES__
        * [Site Layouts in CSS](https://dev.to/ziizium/site-layouts-in-css-2n6o)
		* [Responsive Design](https://dev.to/ziizium/introduction-to-responsive-web-design-45g6)
		* [Progressive Enhancement](https://dev.to/ziizium/introduction-to-progressive-enhancement-254l)
	4. [User Interface (UI) Design](https://dev.to/ziizium/introduction-to-user-interface-design-4aho)
	5. [User Experience (UX) Design](https://dev.to/ziizium/introduction-to-user-experience-design-n1h)
	6. [Web Accessibility and Usability](https://dev.to/ziizium/introduction-to-web-accessibility-and-usability-22bd)
	7. [Color Theory](https://dev.to/ziizium/introduction-to-color-theory-55ae)
  8. [Resources and Reference](https://dev.to/ziizium/web-design-references-and-resource-288c)

5. __[FINAL PROJECT](https://dev.to/ziizium/series-final-project-55m0)__

6. __WHAT'S NEXT?__
	1. [Building your career as a developer](https://dev.to/ziizium/building-your-career-as-a-developer-e27)