DEV Community

Cover image for FrontEnd Development: Zero to Hero
Habdul Hazeez
Habdul Hazeez

Posted on • Edited on

FrontEnd Development: Zero to Hero

Cover photo by Ilya Pavlov on Unsplash

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.


INTRODUCTION
1. The internet
2. The web
3. Web Browsers
4. Tools you'll need

  1. HTML
    1. Introduction
    2. Some history lesson
    3. TECHNICAL PART
    4. Tools, Resources and Reference
  2. CSS

    1. Introduction
    2. Some history lesson
    3. TECHNICAL PART
    4. Media Queries
    5. CSS Typography
    6. CSS Animations and Transitions
    7. Naming Conventions
    8. Writing maintainable CSS
    9. Resources and Reference
  3. JavaScript

    1. Introduction
    2. Some history lesson
    3. TECHNICAL PART
    4. Resources and Reference
  4. WEB DESIGN

    1. Introduction
    2. Some History Lesson
    3. WEBSITE DESIGN TECHNIQUES
    4. User Interface (UI) Design
    5. User Experience (UX) Design
    6. Web Accessibility and Usability
    7. Color Theory
    8. Resources and Reference
  5. FINAL PROJECT

  6. WHAT'S NEXT?

    1. Building your career as a developer

Top comments (12)

Collapse
 
adimo9 profile image
adimo9

This structure is great and very similar to what I'm learning through Codecademy Pro. They have a Web Developer career path and it teaches you all these. It's been super helpful and easy to understand.

Collapse
 
marcobomfim profile image
Marco Aurélio Bomfim

The Odin Project also have a very nice workflow for learning, and it is free :)

Collapse
 
taf profile image
taff

I just created an account to thank you and the op!

Thread Thread
 
ziizium profile image
Habdul Hazeez

You are welcome.

Collapse
 
princealarming profile image
Prince-Alarming

Hi @Habdul Hazeez,

Thanks for the posting! I started my coding journey back in 1994. I made a simple webpage, it was for the chat client "Virtual Places." One site grew to six sites that I created and maintained. Along the way learned some JS(1-1.2). I also dabbled with CSS(1), Java(mostly applets)and the defunct Jscript. By 2001, I stopped(could kick myself hard and repeatedly for doing that). Enter 2019, I was reading articles online a discovered what I was doing(and self taught)was called coding.

I then tried to break into IT as a Jr. Front End Dev. Didn't happen(it's coming though). The company referred me to another site for free training. Along the way I picked up some useful sites. Decided, the site wasn't for me and been using the useful sites.

Collapse
 
sorindezzy profile image
Raita Dezideriu

Hmmm nice Bro but is just introduction only.
Where the lessons are ?

Collapse
 
ziizium profile image
Habdul Hazeez

This is a work in progress, the items in the table of contents will be linked to the post as they become available.

Collapse
 
sorindezzy profile image
Raita Dezideriu

Thanks Bro

Thread Thread
 
ziizium profile image
Habdul Hazeez

You are welcome.

Collapse
 
ifefas profile image
ife fasina

The Html is phasing out sort of,focus is now on web frameworks such as angular,react wordpress.

Collapse
 
ziizium profile image
Habdul Hazeez

To the best of my current knowledge, HTML is not phasing out, the web frameworks you mentioned Angular, React end up showing your page content in HTML, and it's up to you to add the CSS to make it more presentable.

And guess what?, the HTML Standard (or Specification) which is considered a Living Standard is updated almost daily (check the date in the image).

HTML Standard

Wordpress on the other hand is a Content Management System and like all Content Management Systems, your content (your blog posts and the likes) is shown in HTML and if i remember correctly, the editor in Wordpress permits the switch to raw HTML when writing an article.

When it comes to learning in web development, Dr Axel Rauschmayer has this to say:

The take away from the above image is to learn one core tech well, the last time i checked, HTML is one of the cornerstone technology of the World Wide Web alongside it's buddies CSS and JavaScript.

Collapse
 
rojblake1978 profile image
rojblake1978

This is a superb post, thanks for this helpful upload...