-
Notifications
You must be signed in to change notification settings - Fork 2
/
step5.html
54 lines (41 loc) · 1.86 KB
/
step5.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
<!-- Step 5: Don't judge a website by it's title! -->
<!-- In this step, we'll add more ~content~ to our web page! -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="step5.css">
</head>
<body>
<h1 id="the_title">So you wanna set up a Stanford Daily email newsletter?</h1>
<!-- Step 5.1
GET READY FOR DIV! DIV! DIV! Wait--what is a div?
Try the following readings to find out! #DIVvyUpTheKnowledge
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
https://www.w3schools.com/tags/tag_div.ASP
https://www.w3schools.com/html/html_blocks.asp
If you're still confused, try Googling "html div"!
-->
<div id="featured_fields3">
<!-- Step 5.2
I'll leave it up to you to find out more about spans
-->
<span>Featured content headline</span>
</div>
</body>
</html>
<!-- Step 5.3
Divs are one of the most common HTML elements. Though our current styling is nice,
if you be annoying if every div on every website had the same, fun styling.
Thankfully, divs don't naturally look like what they do here. So how does our div
get it's style? Find out! Then see if you can remove that styling.
Now, put the syling back. You might also notice there's a ton of space in our div
that isn't being used. Can you get rid of that space?
Check out https://www.w3schools.com/css/css_dimension.asp
Now things look awkward. They might look less awkward if we center our div on the page.
Try that!
A good source for help is https://www.w3schools.com/css/css_align.asp
You might find that with CSS there's always many ways to achieve a single goal.
This can make CSS either easy or hard. If you ever get stuck between two different ways
of doing something, I recommend just picking one way and moving on! You can always
move over to the other way later on, if you need to :)
-->