How do you teach frontend development to a new-comer or yourself

Before writing this article, I tried teaching few backend developers, I am sharing few tips based on my experience

Tell them to not to memorize anything

That's the beauty of web development, Unlike the backend programming language where you need to remember many classes, utilities, paradigms and flow diagram, Frontend development gives you an option to explore your creativity and create the templates, which suits you the most.

So basic tip is to not to memorize any thing, instead learner should visualize, what he will be making like a clone to facebook or amazon etc. Once this goal is fixed, he might be lured into and can easily apply his own ideas. You can even set a timeline for the goal like 15 days. After that you help him to start building each block of the website and teach him to merge them together.

Learning HTML

After the goal is fixed, he might need to learn a few HTML tags, You can teach the tags as vocabulary and compared them to MS Word, if candidate is familiar with it. Like adding paragraphs, pagebreaks, divisions, hyperlinks etc.

Tags for day 1

html, head, body, title, p, h1-h6, div, img

Tags for day 2

span, a, pre, u, i, b, strong, mark, table, tr, td, th, label, ul, ol, li

Tags for day 3

form, input, radio, textarea, checkbox, buttons, fieldsets

Attributes for Day 4

Fourth day should be dedicated to tags attributes like style, height, value, title, alt. Luckily we don't have many attributes in HTML, so it might be a easy part, Just a hands-on will be enough

Advance Tags

Section, Header, Footer, Aside, Object, Video, Audio, FigCaption, Article, Canvas(Optional), SVG(Optional)

So you can complete the basics of html in 4 days besides advance tags, I will suggest to complete the basics and move the next section of CSS, Once you start creating more web pages, you instincts will help you to learn about more advance tags, when you need them.

Learning CSS

Here is the fun part, now you can start decorating your html to give a better look and feel, you can visit https://thebestdesigns.com for inspiration for creating good looking website. Once you feel motivated, You can start with this section.

Day 1

Using class and id identifiers, color the font, change font-style, font-size, add background color,

Day 2

Layouts: Margin, Padding, Box Model,

Positioning (Static, Absolute, Fixed), Adding Border, Border-radius

Text Decoration:

Hover effect

Day 3

Background Image, Box Shadow, Gradient Background, CSS Transform, CSS Transition

Day 4-5

Flexbox Model

Advance Topics

Keyframe Animations, Brazier Curve, Pseudo Classes, Scroll Effects

So You can use 6-7 days on CSS excluding Advance Topics, Once you get a confidence on basic CSS, You can start moving to advance topics, But for now, You should move to JavaScript

Learning JavaScript

Javascript is an actual programming language like C#, Java etc. It's very flexible and fun to learn, You can download node console to practice or you can run it inside browser to view output of your program. A good reference might be https://javascript.info

Day 1

Keywords, DataTypes, Operations like Add, Sub,

Day 2

Event Handling like click, keypress, keydown.

Query HTML elements by Id, TagName

Using innerHTML and innerText

Day 3-4

For Loop, while loop, String and Array Operations

Day 5-8

OOJS, Inheritence, Polymorphism, IIFE, Closures

Day 9-14

Ajax, Form Validation, JSON parsing,

So after spending 4 days on HTML, 1 week on CSS and 2-3 weeks on Javascript will be enough to give you jump start, assuming you are total noob in programming. Just 1/2 hour to -1 hour/day practice will be enough to reach to this goal. If you are a fast learner or coded before, You can complete this course in 1/4th time also.

After that you can start with Frameworks like React, Vue, Angular etc.