HTML and CSS Installation Guide
A step-by-step guide to set up html and css on your local machine using vscode
Step 1: Create Project folder
New folder for every project (Project Name in small letters)
Step 2: Create images folder
Inside the project folder
Step 3: Open Visual Studio code
VS code as Run as Administrator
Step 4: File – open folder
Open folder (Select the Project folder)
Step 5: index.html
Create index.html
Step 6: style.css
Create style.css
Step 7: create Default HTML code
Go to index.html and create Default HTML code
(Type html5 and Enter)
Step 8: Change title name
Change title name (Project name)
Example: Google, Netflix.
Step 9: link favorite icon
link favorite icon (favicon) Local image or Network image
Step 10: link style.css
link style.css
Step 11: link Fontawesome or Bootstrap
(Optional) link Fontawesome or Bootstrap Etc…
Step 12: Go to body
create header, main and footer (Always for any Project)
Step 13: Go to style.css
- style.css add google fonts
- style.css create Default CSS code
- style.css create :root for colors, fonts and Sizes
Step 14: Create tags
In HTML Create tags (div, img…etc)
Step 15: class name
Always give class name for div’s
Step 16: style in css
We can style in css for Tag, class and ID
- For tag use directly the name (Example: header{})
- For class use dot(.) before the class name (Example: .navbar{})
- For ID use hash(#) before the class name (Example: #navbar{})