-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (81 loc) · 4.17 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
<!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/css/style.css">
<title>Prework Study Guide</title>
</head>
<body>
<header id="top">
<h1>Prework Study Guide</h1>
<img src="./assets/images/bowtie-cat.png" alt="Profile picture of a cat in a bowtie." />
<h2>✨ Open the Console to See What's Happening ✨</h2>
</header>
<main>
<section class="card" id="html-section">
<h2>HTML</h2>
<ul>
<li>Hypertext Markup Language (HTML) creates structure for a webpage.</li>
<li>The head element contains information about the webpage.</li>
<li>The body element represents the visible content shown to the user.</li>
<li>It is best practice to use semantic HTML elements in the body of the webpage to make the code easy to read
and the webpage accessible to all.</li>
<li>A tag refers to what appears inside the angle brackets, while an element refers to what appears from opening
to closing tag.</li>
</ul>
</section>
<section class="card" id="css-section">
<h2>CSS</h2>
<ul>
<li>Cascading Style Sheets (CSS) is a programming language that defines the colors, aesthetics, visual layout,
and organization of the webpage.</li>
<li>There are three ways to style a website using CSS, but the preferred way is to create an external CSS style
sheet in a separate file to allow for separation of concerns based on the use of the code.</li>
<li>CSS rules have a selector then a declaration block made up of various properties and their defined values
(ex. color: blue).</li>
<li>The CSS box model includes the content and then spacing around the content or element including the padding,
the border, and the margin.</li>
<li>Do not repeat yourself (DRY) code is used to simplify code by combining selectors that follow the same
rules.</li>
</ul>
</section>
<section class="card" id="git-section">
<h2>Git</h2>
<ul>
<li>Git is a system that lets you manage and keep track of each version of your project.</li>
<li>GitHub is a cloud-based hosting service that lets you keep track of your projects and collaborate easily.
</li>
<li>Branches are features of the GitHub repository that allow you make changes in a contained area within the
repository or project folder.</li>
<li>'Git status' checks what branch we are currently on, while 'git checkout -b branch-name' creates a new
branch and switches to it.</li>
<li>The Git Flow is the process of pulling all changes made locally and pushing them remotely so that they can
be merged into the main branch remotely which is then updated locally.</li>
</ul>
</section>
<section class="card" id="javascript section">
<h2>JavaScript</h2>
<ul>
<li>JavaScript (JS) is a dynamic programming language that allows users to interact with websites by clicking
buttons, retrieving data, or filling out a form.</li>
<li>Variables are containers that store values or data. Those values can be text, numbers, or true/false values.
An array is a single variable used to hold a group of related data.</li>
<li>Operators are mathematical symbols that produce results based on two variables.</li>
<li>Conditionals are code structures used to test if an expression is true and how the application responds.
</li>
<li>Functions are a way to reuse code by defining a body of code that executes when you call the function name.
</li>
<li>Events are code structures that run code in response to user activity in the browser.</li>
<li>Control flow is the order in which the computer executes code in a script. In JS code runs from the first to
last statement of the page.</li>
</ul>
</section>
</main>
<footer>
<p>I can code!</p>
</footer>
<script src="./assets/js/script.js"></script>
</body>
</html>