You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fix heading hierarchy and remove superfluous headers from dom-order e… (wesbos#4)
* Fix heading hierarchy and remove superfluous headers from dom-order exercise; make navigating by headings exercise reference solution version
* Add a secret offscreen h2
<imgclass="pull-right" src="./images/cat.jpg" alt="A cat staring menacingly off into space">
27
28
<divclass="info">
28
-
<header>
29
-
<h2class="headline">Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
30
-
</header>
29
+
<h3class="headline">Study shows 9 out of 10 cats quietly judging their owners as they sleep</h3>
31
30
<p>
32
31
GRAND RAPIDS, MI—Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
33
32
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <ahref="#">Read More</a>
34
33
</p>
35
34
</div>
36
35
</article>
37
36
<divclass="side-by-side">
38
-
<article>
39
-
<headerclass="tier-header">
37
+
<divclass="column">
38
+
<divclass="tier-header">
40
39
<h2>In the news</h2>
41
-
</header>
42
-
<header>
43
-
<h2class="headline">Bee wonders if maybe everyone else is a drone and he's the only one who has it "figured out." <ahref="#">Read More</a></h2>
44
-
</header>
45
-
<imgsrc="./images/bee.jpg" alt="A bee on top of a flower" />
46
-
</article>
47
-
<article>
48
-
<imgsrc="./images/telephone.jpg" alt="A red, London telephone booth" />
49
-
<divclass="info">
50
-
<header>
51
-
<h2class="headline">Telephone booths. How is this still a thing?</h2>
52
-
</header>
53
-
<p>
54
-
LONDON—Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
55
-
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <ahref="#">Read More</a>
56
-
</p>
57
40
</div>
58
-
</article>
41
+
<article>
42
+
<h3class="headline">Bee wonders if maybe everyone else is a drone and he's the only one who has it "figured out." <ahref="#">Read More</a></h3>
43
+
<imgsrc="./images/bee.jpg" alt="A bee on top of a flower" />
44
+
</article>
45
+
</div>
46
+
<divclass="column">
47
+
<article>
48
+
<imgsrc="./images/telephone.jpg" alt="A red, London telephone booth" />
49
+
<divclass="info">
50
+
<h3class="headline">Telephone booths. How is this still a thing?</h3>
51
+
<p>
52
+
LONDON—Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
53
+
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <ahref="#">Read More</a>
54
+
</p>
55
+
</div>
56
+
</article>
57
+
</div>
59
58
</div>
60
59
<divclass="three-col">
61
-
<headerclass="tier-header">
60
+
<divclass="tier-header">
62
61
<h2>Recommended</h2>
63
-
</header>
62
+
</div>
64
63
<divclass="columns">
65
64
<article>
66
65
<imgsrc="./images/dog.jpg" alt="A dog at a desk looks up at a laptop and mouse" />
67
66
<divclass="info">
68
-
<header>
69
-
<h2class="headline">Turn man's best friend into man's best personal assistant. <ahref="#">Read More</a></h2>
70
-
</header>
67
+
<h3class="headline">Turn man's best friend into man's best personal assistant. <ahref="#">Read More</a></h3>
71
68
</div>
72
69
</article>
73
70
<article>
74
71
<imgsrc="./images/coffee.jpg" alt="A cup of coffee on a table" />
75
72
<divclass="info">
76
-
<header>
77
-
<h2class="headline">San Franciscans are losing their minds over this third wave, artisanal, fair trade, handcrafted, locavore coffee. <ahref="#">Read More</a></h2>
78
-
</header>
73
+
<h3class="headline">San Franciscans are losing their minds over this third wave, artisanal, fair trade, handcrafted, locavore coffee. <ahref="#">Read More</a></h3>
79
74
</div>
80
75
</article>
81
76
<article>
82
77
<imgsrc="./images/football.jpg" alt="A football player hands the ball off to another player" />
83
78
<divclass="info">
84
-
<header>
85
-
<h2class="headline">Sportsball team scores a touchpoint to win the big race. <ahref="#">Read More</a></h2>
86
-
</header>
79
+
<h3class="headline">Sportsball team scores a touchpoint to win the big race. <ahref="#">Read More</a></h3>
<imgclass="pull-right" src="./images/cat.jpg" alt="A cat staring menacingly off into space">
34
35
<divclass="info">
35
-
<header>
36
-
<h2class="headline">Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
37
-
</header>
36
+
<h3class="headline">Study shows 9 out of 10 cats quietly judging their owners as they sleep</h3>
38
37
<p>
39
38
GRAND RAPIDS, MI—Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
40
39
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <ahref="#">Read More</a>
41
40
</p>
42
41
</div>
43
42
</article>
43
+
44
44
<divclass="side-by-side">
45
-
<article>
46
-
<headerclass="tier-header">
45
+
<divclass="column">
46
+
<divclass="tier-header">
47
47
<h2>In the news</h2>
48
-
</header>
49
-
<header>
50
-
<h2class="headline">Bee wonders if maybe everyone else is a drone and he's the only one who has it "figured out." <ahref="#">Read More</a></h2>
51
-
</header>
52
-
<imgsrc="./images/bee.jpg" alt="A bee on top of a flower" />
53
-
</article>
54
-
<article>
55
-
<imgsrc="./images/telephone.jpg" alt="A red, London telephone booth" />
56
-
<divclass="info">
57
-
<header>
58
-
<h2class="headline">Telephone booths. How is this still a thing?</h2>
59
-
</header>
60
-
<p>
61
-
LONDON—Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
62
-
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <ahref="#">Read More</a>
63
-
</p>
64
48
</div>
65
-
</article>
49
+
<article>
50
+
<h3class="headline">Bee wonders if maybe everyone else is a drone and he's the only one who has it "figured out." <ahref="#">Read More</a></h3>
51
+
<imgsrc="./images/bee.jpg" alt="A bee on top of a flower" />
52
+
</article>
53
+
</div>
54
+
<divclass="column">
55
+
<article>
56
+
<imgsrc="./images/telephone.jpg" alt="A red, London telephone booth" />
57
+
<divclass="info">
58
+
<h3class="headline">Telephone booths. How is this still a thing?</h3>
59
+
<p>
60
+
LONDON—Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
61
+
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <ahref="#">Read More</a>
62
+
</p>
63
+
</div>
64
+
</article>
65
+
</div>
66
66
</div>
67
67
<divclass="three-col">
68
-
<headerclass="tier-header">
68
+
<divclass="tier-header">
69
69
<h2>Recommended</h2>
70
-
</header>
70
+
</div>
71
71
<divclass="columns">
72
72
<article>
73
73
<imgsrc="./images/dog.jpg" alt="A dog at a desk looks up at a laptop and mouse" />
74
74
<divclass="info">
75
-
<header>
76
-
<h2class="headline">Turn man's best friend into man's best personal assistant. <ahref="#">Read More</a></h2>
77
-
</header>
75
+
<h3class="headline">Turn man's best friend into man's best personal assistant. <ahref="#">Read More</a></h2>
78
76
</div>
79
77
</article>
80
78
<article>
81
79
<imgsrc="./images/coffee.jpg" alt="A cup of coffee on a table" />
82
80
<divclass="info">
83
-
<header>
84
-
<h2class="headline">San Franciscans are losing their minds over this third wave, artisanal, fair trade, handcrafted, locavore coffee. <ahref="#">Read More</a></h2>
85
-
</header>
81
+
<h3class="headline">San Franciscans are losing their minds over this third wave, artisanal, fair trade, handcrafted, locavore coffee. <ahref="#">Read More</a></h2>
86
82
</div>
87
83
</article>
88
84
<article>
89
85
<imgsrc="./images/football.jpg" alt="A football player hands the ball off to another player" />
90
86
<divclass="info">
91
-
<header>
92
-
<h2class="headline">Sportsball team scores a touchpoint to win the big race. <ahref="#">Read More</a></h2>
93
-
</header>
87
+
<h3class="headline">Sportsball team scores a touchpoint to win the big race. <ahref="#">Read More</a></h2>
0 commit comments