forked from brandon6ix/prework-study-guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (86 loc) · 5.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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="stylesheet" href="./assets/style.css">
<title>Prework Study Guide</title>
</head>
<body>
<header id="top">
<h1>Prework Study Guide</h1>
<img src="./assets/bowtie-cat.png" alt="Profile image of cat wearing a bow tie." />
<h2>✨ Open the Console to See What's Happening ✨</h2>
</header>
<main>
<section class="card" id="html-section">
<h2>HTML</h2>
<ul>
<li>The head element contains information about the webpage.</li>
<li>The body element represents the visible content shown to the user.</li>
<li> Hypertext Markup Language (HTML) is one of the three cornerstone languages used in web development</li>
<li>The HEAD element contains information, or metadata, that helps the browser to render the page correctly. Elements included within the HEAD are not visible when a user looks at a webpage.</li>
<li>The BODY element contains the content that is shown to the user. All the elements that we want the user to see and interact with must be placed inside this element.</li>
<li>lang="en", tells the browser the language for the webpage</li>
<li>HTML attribute defines additional information about an element</li>
<li>Metadata is data about our webpage that the browser uses to effectively serve our webpage to users</li>
<li>Metadata is typically not seen by users </li>
<li>The title element defines the title for a webpage</li>
<li>The style element defines the CSS styles associated with a website </li>
<li>The base element defines the base URL for a webpage</li>
<li>Thelink element connects an external resource to the HTML document </li>
<li>The meta element defines metadata such as the character set, description, keywords, author, and viewport</li>
<li>The script element embeds client-side scripts in the HTML document.</li>
<li>The charset element sets our character encoding</li>
<li>The http-equiv element sets an HTTP header for content.</li>
<li>The viewport element sets the default view for our webpage</li>
</ul>
</section>
<section class="card" id="css-section">
<h2>CSS</h2>
<ul>
<li>To add style to our webpage, we will use Cascading Style Sheets (CSS)</li>
<li>CSS defines the colors, aesthetics, visual layout, and organization</li>
<li>There are three ways to style a webpage using CSS: inline CSS, internal CSS style sheet, and external CSS style sheet</li>
<li>Inline CSS: Inline styles apply to a specific HTML tag</li>
<li>Internal style sheet contains CSS rules for the webpage in the head section of the HTML file</li>
<li>The most common way to style a webpage is by using an external CSS style sheet</li>
<li>External CSS allows developers to keep all their CSS rules in a separate file, which makes design changes easier</li>
<li>When using an external style sheet, we link the file using a (link) element placed in the HTML's (HEAD)</li>
<li>Declarations contain two important components: the CSS property we want to apply and the value of the property</li>
<li>Margin property indicates how much space we want around the outside of an element</li>
<li>The padding property adds space around the content inside an element</li>
</ul>
</section>
<section class="card" id="git-section">
<h2>Git</h2>
<ul>
<li>git status: checks what branch we are currently on</li>
<li>git checkout -b branch-name: creates a new branch and switches to it</li>
<li>We use the git add -A command to commit all files in the working branch</li>
<li>git commit -m flag to associate a message with our commit </li>
</ul>
</section>
<section class="card" id="javascript-section">
<h2>JavaScript</h2>
<ul>
<li>A variable is a named container that allows us to store data in our code.</li>
<li>Control flow is the order in which a computer executes code in a script.</li>
<li>The const keyword allows us to create variables that can't be reassigned a value. It essentially "locks down" what that variable will be, and once we declare it, we can never reassign it</li>
<li>We use the operator = to assign the specific data that we want stored in our variable</li>
<li>the console.log method is used to output a message to the web console by adding an argument</li>
<li> An if statement is a way of introducing decision-making into our code. Just like its name sounds, when using the if statement, code will only execute if the statement meets a condition, or is true.</li>
<li>A for loop uses the predictable pattern of indices to perform a task on all the items in an array by allowing a single code block to be executed over and over.</li>
<li>To create a function, we use the function keyword</li>
<li>the function syntax is similar to if statements and for loops. The code to be executed is written inside the curly brackets {}</li>
</ul>
</section>
</main>
<footer>
<p>Do Not Repeat Yourself (DRY) is a coding principle that encourages developers to reuse or share pieces of code in order to reduce the number of lines of code that need to be written or maintained.
DRY can greatly reduce the overall size and complexity of a codebase.</p>
</footer>
<script src="./assets/script.js"></script>
</body>
</html>