HTML AND CSS COURSE
1. SET UP TOOLS
2. HTML
3. CSS BASICS
4. CSS POSSITIONS AND FLOAT LAYOUT
5. CREATE WEBSITE USING FLOAT
6. RESPONSIVE WEB DESIGN
7. FLEXBOX
8. CREATE WEBSITE USING FLEXBOX
9. CSS ANIMATIONS
10. CSS GRID
11. CREATE WEBSITE USING GRID
12. SASS
13. CREATE WEBSITE USING SASS
14. WEBSITE DEPLOYMENT
15. USE FIGMA TO CREATE UI DESIGNS
I. WHAT IS HTML & CSS
HYPERTEXT MARKUP LANGUAGE
IT IS USE TO CREATE WEBPAGES
II. TEXT EDITORS
NOTEPAD
NOTEPAD++
BRACKET
SUBLIME
ATOM
VSCODE
DOWNLOAD VSCODE 64 BIT
INSTALL VSCODE
NEXT => NEXT => NEXT =>FINISH
1. CREATE FOLDER / OPEN FOLDER
2. CREATE NEW FILE
3. CREATE CODING FILE WITH THAT EXTENSION
PREFERENCEE => THEME =>LIGHT/DARK.
HTML
HTML STRUCTURE
HTML TITLE , METATAGS
HTML HEADINGS , PARAGRAPHS
LINKS
IMAGES
TABLES
HTML FORMS
ID AND CLASSES
STYLE TAG
DIV AND SPAN
HTML SEMANTIC ELEMENTS
HTML ENTITIES
LOTS OF EXERCISES
HTML SUMMARY
HTML STRUCTURE
IN HTML WE USE TAGS
HEADING
SIMPLE TEXT (PARAGRAPH)
IMAGE
-----LINE
WEBSITE LINKS
TABLE
LOG IN /SIGN UP FORMS
<OPEN TAG> CONTENT </CLOSE TAG>
<HTML>
MAIN HTML CODING()
</HTML>
MAIN STRUCTURE OF HTML WEB PAGE
<! DOCTYPE HTML>
<HTML>
<HEAD> </HEAD>
<BODY></BODY>
</HTML>
[Link]
<DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> MY WEBSITE</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
HEADING
<H1></H1> (< !--H1 IS THE LARGEST HEADING-->)
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>
<P> THIS IS PARAGRAPH TAG</P>
<P></P>
<LOREM100> ======FOR DUMMY DATA
EXTENSION
LIVE SERVER = FOR NO NEED TO REFRESH
BRACKET COLORIZER == FOR PROVIDNG DIFFERENT FOR EACH AND EVERY PAIR
PRETTIER == CODE FORMAT
<H1>MY BLOG</H1>
<H2> MYBLOG POST – 1 </H2>
LOREM160
<H2> MYBLOG POST – 2 </H2>
LOREM160
ANCHOR TAG LINKS
<a href =[Link] to google </a>
Target_blank == for new page
<br>
<a href=”./[Link]”>
FOR SAME FOLDER USE ( . /)
FOR ONE FOLDER BACK (../)
<p> click here to open <a href=”[Link] target=”_blank” title=”google is one of
the most popular search engine “>google</a></p>
IMAGES
<img src = “ ./[Link]” alt=”cute little playing.”>
The alt is used for show the text when the image is not available
Unsplash website random website
LISTS
<ol type= ‘1’ / ‘A’ / ‘a’ / ‘I’ > <! – Oredered List -->
<li> item 1</li>
<li>item 2</li>
<li> item 3</li>
<li>item 4</li>
</ol>
<ul style= ‘list-style-type:none/circle/square;’>
<li> item 1</li>
<li>item 2</li>
<li> item 3</li>
<li>item 4</li>
</ul>
<dl>
<dt>guitar</dt>
<dd>------------------------------------</dd>
<dt> -------</dt>
<dd>-------------------------------------</dd>
</dl>
Semantic tags
<h1></h1>--------<h6></h6>
<i></i> / <em> </em>
<b></b> / <strong></strong>
<sup></sup>
<sub></sub>
<delete></delete> / <s> </s>
TABLE
<table border = ‘1’>
<thead>
<tr>
<th> first name</th>
<th> last name</th>
</tr>
</thead>
<tbody>
<tr>
<td> harshit</td>
<td> Arvind</td>
</tr>
<tr>
<td> harshit</td>
<td> Arvind</td>
</tr>
</tbody>
</table>
FORMS
<h1>Html forms </h1>
<form>
<label for = “username” Username : </label>
<input type = “text” id=”username”> <br> <br>
<label for = “password” Password: </label>
<input type = “password” id=”password”> <br> <br>
<label for = “email” Email : </label>
<input type = “email” id=”email”> <br> <br>
<input type= “submit” value =”sign-in”>
</form>
Methods , Action , Name Attribute
(HTTP VERB = GET POST PUT FOR COMMUNICATION IN BROWSER)
<h1>Html forms </h1>
<form action= “thank you .html” method=’get’ >
<label for = “username” Username : </label>
<input type = “text” id=”username” name= ‘username’> <br> <br>
<label for = “password” Password: </label>
<input type = “password” id=”password” name=’password’> <br> <br>
<label for = “email” Email : </label>
<input type = “email” id=”email” name= ‘email’> <br> <br>
<input type= “submit” value =”sign-in”>
</form>
<h1>Html forms </h1>
<form action= “thank you .html” method=’get’ >
<label for = “username” Username : </label>
<input type = “text” id=”username” placeholder= ‘username’ required> <br> <br>
<label for = “password” Password: </label>
<input type = “password” id=”password” placeholder=’password’ required> <br> <br>
<label for = “email” Email : </label>
<input type = “email” id=”email” placeholder= ‘email’ required> <br> <br>
<input type= “submit” value =”sign-in”>
</form>
<h1>Html forms </h1>
<form action= “hello .html” method=’get’ >
<label for = “username” Username : </label>
<input type = “text” id=”username” > <br> <br>
<label for = “password” Password: </label>
<input type = “password” id=”password” > <br> <br>
<p> Select your gender</p>
<label for =”male”></label>
<label type=”radio” name =”” id =”male” value=”male”> <br>
<label for =”female”></label>
<label type=”radio” name =”” id =”female” value=”female”><br>
<label for =”other”></label>
<label type=”radio” name =”” id =”other” value=”other”><br>
<label for = “age-group”> select your age group</label>
<select name=”” id=”age-group”>
<option value=”5-10”> 5-10</option>
<option value=”11-20”> 11-20</option>
<option value=”21-30”> 21-30</option>
<option value=”31-40”> 31-40</option>
<option value=”41=50”> 41=50</option>
<option value=”50+”>50+</option>
</select>
<label for = “email” Email : </label>
<input type = “email” id=”email” > <br> <br>
<input type= “submit” value =”sign-in”>
</form>
MORE HTML ELEMENTS
<form >
<p> comment below</p>
<textarea name=”” id =”” cols=”30” rows=”10” placeholder=”type here”>
</textarea>
<br>
Pick color : <input type=”color” name=”” id=””>
Date : <input type=”date” name=”” id=””>
<input type=”file” name=”” id=””>
</form>