You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
2.5 KiB
46 lines
2.5 KiB
12 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="styles/week-one-challenge.css">
|
||
|
|
<title>Week One Challenge</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>HTML & CSS Basics Summary</h1>
|
||
|
|
<img src="images/html-css.png" alt="HTML Logo"/>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<h2>HTML Summary</h2>
|
||
|
|
<p>HTML (HyperText Markup Language) is used to define our page content, structure and meaning. You don't use it for styling purposes. Use CSS for that instead!
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li class="highlight">HTML uses "elements" to describe (annotate) content</li>
|
||
|
|
<li>HTML elements typically have an opening tag, content and then a closing tag</li>
|
||
|
|
<li class="highlight">You can also have void (empty) elements like images</li>
|
||
|
|
<li class="highlight">You can also configure elements with attributes</li>
|
||
|
|
<li>There's a long list of available elements but you'll gain experience over time, no worries</li>
|
||
|
|
</ul>
|
||
|
|
<p>Learn more about all available HTML elements on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">the MDN HTML element reference</a></p>
|
||
|
|
<h2>CSS Summary</h2>
|
||
|
|
<p>CSS (Cascading Style Sheets) is used for styling your page content.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Styles are assigned via property-value pairs</li>
|
||
|
|
<li>You can assign styles via the "style" attribute</li>
|
||
|
|
<li class="highlight">To avoid code duplication, you typically use global styles (e.g. via the "style" element) instead</li>
|
||
|
|
<li>Alternatively, you can work with external stylesheet files which you "link" to</li>
|
||
|
|
<li class="highlight">When working with CSS, concepts like "inheritance", "specificity", and the "box model" should be understood</li>
|
||
|
|
</ul>
|
||
|
|
<p>Learn more about all available CSS properties and values on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">the MDN CSS property reference</a></p>
|
||
|
|
</main>
|
||
|
|
<footer>
|
||
|
|
<a href="docs/html-css-basics-summary.pdf" target="_blank">Download PDF Summary</a>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|