Purposed of this course is level up your frontend skills.

For practice web dev used VSCode, watch my coding videos name - CODEVIBE

Skill required: Basic Knowledge of html.css.js

RoadMap – Frontend in 10 Days

In this notes you learn and grow up your skill in fun way.

Try it: Create your own small text editor using html,css,js

To make editor you select an element id of text and create a button when user click button then text color will be changed.

1^st Day

Try it: Learn HTML,CSS.

In this day create a 4 responsive box using Flexbox

What is FlexBox

Flexbox is element of CSS its used for create responsive design.

Try it: Select id of container div in css and types display:flex; flex-wrap;

If you able to create flexbox and then design your cards select the id of wich child element and type padding:10px 10px 10px; background:#191919;

2^nd Day

Create A Photo Gallery

Try it: If you Master flexbox then add img in container div and set height and width

Create 6 boxes and add Hover effect

What is Hover effect

Hover effect is used for when you hover a cursor in any object then color or position will be change, Syntax – div1:hover {color:red}

Try it: Add when you hover cursor then object height will change.

[if !supportLists]1. [endif]Select a element and add hover of height large than default.

[if !supportLists]2. [endif]Then you see when you hover a object than object size will be changed.

3^rd Day

Learn How to get Id in JS and Learn what is arrow function

How to Get ID in JS

Firstly create a element than type document.GetElementByID(‘First’)

Document is like your html element and then getelementbyid is show get id.

4^th Day

Create A Responsive Navigation Bar Using Toggle ClassList

Class List Toggle is Used for Toggle between Class when run a function

Try it: Add onclick function in menu bar and select id of navbar and used classlist for change class name and change display when class was changed

[if !supportLists]1. [endif]Nav will display none

[if !supportLists]2. [endif]When class was change display will be block

Note – Block in center of your web when navbar is block then other home element will be none

5^th Day

Create you own MS Word

Try it: Explore Create a Text Area and 4 color box and give them function when they click text present in text area will be change and then try in font family and height:

[if !supportLists]1. [endif]Add Height Button

[if !supportLists]2. [endif]Add Font family overflow