HTML project HTML Learning Topic
- Elements and Tags
"content"
--> element - HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My webpage</title>
</head>
<body>
<h1>Hello!<h1>
</body>
</html> - Working with text
<body></body>
<p></p> --> separate as paragraph
<h1></h1> --> <h6></h6>
<strong></strong> or <b></b> <!--Bold text-->
<em></em> or <i></i> <!--Italic text-->Nesting and Indentation
Lorem 4. Links (unordered list ex. dot and order list ex. 1,A,I)
<ul>
<li>1</li>
</ul>
<ol>
<li>1</li>
</ol>- Links and Images
- Relative Link - Link from website which contains the protocol and domain.
- Absolute Link - Link to other web page ex. about.html
<a href="http link, html link, #link, images link" alt="link">Link</a>
<img src="#">Example: src="../images/dog.jpg" href="./pages/about.html" ./ --> same file (odin-links-and-images) vs ../ --> go out from (pages) file Having 4 mains type of image (.jpg, .png, .gif, .svg)
CSS Learning Topic
- Add Style to HTML with CSS and CSS basic Syntax
- Class vs ID
- Add styles to specific elements using the correct selectors
- Understand the cascade
- Learn how to use Chrome dev Tools
- The Box Model
- margin
- padding
- borders
- box-sizing: border-box
- Block and Inline
- Block
- Inline
- Inline-block
<div>, <h1>, <p> /*is a block-level element as default. */
<span>, <link> /*is a inline-level element as default. */