ecki/learn_enough_html_css_and_layout_code_listings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync up code listings

Browse Source
This commit is contained in:
Michael Hartl
2022-06-07 16:09:58 -07:00
parent 8a99eeb387
commit f42ec67a55
36 changed files with 117 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Listing_1.3.text → Listing_1.3.txt
View File
Listing_15.11.html
+1 -1
View File
@@ -88,7 +88,7 @@
<div>
<h2>Level the playing field</h2>
Take five, punch the tree, and come back in here with a clear head. We need
to follow protocol obviously, rock Star/Ninja encourage & support business
to follow protocol obviously, rock Star/Ninja encourage &amp; support business
growth yet curate.
</div>
<div>
Listing_15.21.html
+1 -1
View File
@@ -47,7 +47,7 @@
<div>
<h2>Level the playing field</h2>
Take five, punch the tree, and come back in here with a clear head. We
need to follow protocol obviously, rock Star/Ninja encourage & support
need to follow protocol obviously, rock Star/Ninja encourage &amp; support
business growth yet curate.
</div>
<div>
Listing_15.22.html
-172
View File
@@ -1,172 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
margin: 0;
padding: 0;
}
h1, h2, h3 {
margin-top: 0;
text-align: center;
}
.subtitle {
text-align: center;
}
.menulist {
margin: 0;
list-style: none;
padding: 0;
}
.landing_cta {
margin-top: 1.5em;
text-align: center;
}
.header {
background-color: #000;
color: #fff;
padding: 1em;
text-align: center;
}
.hero {
background-color: #a8d6f7;
min-height: 50vh;
text-align: center;
}
.options {
background-color: #4a7696;
color: #fff;
padding: 4em 0;
}
.options_item-img {
width: 100%;
}
.info {
padding: 8em 0;
}
.feature {
min-height: 70vh;
}
.footer {
background-color: #ddd;
padding: 4em 1em;
}
</style>
</head>
<body>
<header class="header">
<div class="header_content">
I am a Header
</div>
</header>
<section class="hero">
<h1 class="hero_title">
I am an Important Message
</h1>
<div class="hero_content">
And I am a less important, but still a very important
thing to consider.
</div>
</section>
<section class="options">
<h2 class="options_title">
Here are Some Choices
</h2>
<div class="options_content">
<div>
Stuff
</div>
<div>
Different Stuff
</div>
<div>
All the Stuff
</div>
</div>
</section>
<section class="info">
<h2 class="info_title">
I am Some More info
</h2>
<div class="subtitle">
Say you are in the country.
</div>
<div class="info_content">
<p>
In some high land of lakes. Take almost any path you
please, and ten to one it carries you down in a dale,
and leaves you there by a pool in the stream. There
is magic in it. But here is an artist. He desires to
paint you the dreamiest, shadiest, quietest, most
enchanting bit of romantic landscape in all the
valley of the Saco.
</p>
</div>
</section>
<section class="feature">
<div class="feature_img"></div>
<div class="feature_content feature_content-1">
Let the most absent-minded of men be plunged in his
deepest reveries—stand that man on his legs, set his
feet a-going, and he will infallibly lead you to water,
if water there be in all that region.
</div>
<div class="feature_content feature_content-2">
Take almost any path you please, and ten to one it
carries you down in a dale, and leaves you there by a
pool in the stream. There is magic in it.
</div>
</section>
<footer class="footer">
<h3 class="footer_title">
I am a Footer
</h3>
<ul class="menulist footer_menu-first">
<li>
Products
</li>
<li>
<a href="">Footer link</a>
</li>
<li>
<a href="">Footer link</a>
</li>
</ul>
<ul class="menulist">
<li>
About
</li>
<li>
<a href="">Footer link</a>
</li>
<li>
<a href="">Footer link</a>
</li>
</ul>
<ul class="menulist">
<li>
Links
</li>
<li>
<a href="">Footer link</a>
</li>
<li>
<a href="">Footer link</a>
</li>
</ul>
<ul class="menulist">
<li>
Account
</li>
<li>
<a href="">Footer link</a>
</li>
<li>
<a href="">Footer link</a>
</li>
</ul>
</footer>
</body>
</html>
Listing_15.23.css
-11
View File
@@ -1,11 +0,0 @@
.landing_cta {
margin-top: 1.5em;
text-align: center;
}
.grid {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(2em,1fr) repeat(6,minmax(auto,10em))
minmax(2em,1fr);
}
Listing_15.26.html
-19
View File
@@ -1,19 +0,0 @@
<header class="header">
<div class="header_content grid_2-8">
I am a Header
</div>
<nav class="grid_3-7">
<ul class="header_menu menulist">
<li>
<a href="" class="header_menu-link">
Header link
</a>
</li>
<li>
<a href="" class="header_menu-link">
Header link
</a>
</li>
</ul>
</nav>
</header>
Listing_15.27.css
-6
View File
@@ -1,6 +0,0 @@
.grid_3-7 {
grid-column: 3 / 7;
}
.grid_4-6 {
grid-column: 4 / 6;
}
Listing_15.29.html
-14
View File
@@ -1,14 +0,0 @@
<section class="hero grid">
<h1 class="hero_title grid_2-8">
I am an Important Message
</h1>
<div class="hero_content grid_4-6">
And I am a less important, but still a very important
thing to consider.
<div class="landing_cta">
<a href="">
Click me!
</a>
</div>
</div>
</section>
Listing_15.31.css
-12
View File
@@ -1,12 +0,0 @@
.feature {
min-height: 70vh;
}
.feature_img {
background-image: url('/images/shark.jpg');
background-size: cover;
}
.feature_content {
background-color: #183a53;
color: #fff;
padding: 2em 2em;
}
Listing_15.37.html
-34
View File
@@ -1,34 +0,0 @@
<section class="options grid grid_2-8">
<h2 class="options_title grid_2-8">
Here are Some Choices
</h2>
<div class="options_content grid grid_2-8 grid_cols-3max">
<div>
<img src="/images/small/slide1.jpg" class="options_item-img">
<div class="options_item-title">Stuff</div>
<p>
In some high land of lakes. Take almost any path
you please, and ten to one it carries you down in a dale.
</p>
</div>
<div>
<img src="/images/small/slide1.jpg" class="options_item-img">
<div class="options_item-title">Different Stuff</div>
<p>
Leaves you there by a pool in the stream. There is
magic in it.
</p>
</div>
<div>
<img src="/images/small/slide1.jpg" class="options_item-img">
<div class="options_item-title">All the Stuff</div>
<p>
Set his feet a-going, and he will infallibly lead
you to water, if water there be in all that region.
</p>
</div>
</div>
</section>
.
.
.
Listing_15.6.css
-6
View File
@@ -1,6 +0,0 @@
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 275px);
grid-auto-rows: auto;
grid-gap: 1em;
}
Listing_15.6.html
+1 -1
View File
@@ -17,7 +17,7 @@
<div>
<h2>Level the playing field</h2>
Take five, punch the tree, and come back in here with a clear head. We need
to follow protocol obviously, rock Star/Ninja encourage & support business
to follow protocol obviously, rock Star/Ninja encourage &amp; support business
growth yet curate.
</div>
<div>
Listing_15.7.html
-37
View File
@@ -1,37 +0,0 @@
<div class="grid">
<div>
<h2>Big news today</h2>
Quick sync win-win-win or workflow ecosystem.
</div>
<div>
<h2>We are really excited to announce that we will soon have an exciting
announcement!</h2>
We're ahead of the curve on that one we just need to put these last issues
to bed where do we stand on the latest client ask.
</div>
<div>
<h2>Currying favor performance review bench mark</h2>
No need to talk to users, just base it on the space calculator lift and
shift.
</div>
<div>
<h2>Level the playing field</h2>
Take five, punch the tree, and come back in here with a clear head. We need
to follow protocol obviously, rock Star/Ninja encourage & support business
growth yet curate.
</div>
<div>
<h2>Usability closing these latest prospects </h2>
Customer centric where do we stand on the latest client ask back of the net
4-blocker fast track make it look like digital, like putting socks on an
octopus.
</div>
<div>
1
</div>
<div>
2
</div>
.
.
.
Listing_16.1.txt
+2
View File
@@ -0,0 +1,2 @@
ns1.hover.com
ns2.hover.com
Listing_17.1.html
+8
View File
@@ -0,0 +1,8 @@
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-1', 'auto');
ga('send', 'pageview');
</script>
Listing_17.2.html
+27
View File
@@ -0,0 +1,27 @@
<head>
{% if page.title %}
<title>{{ page.title }} | Test Page</title>
{% else %}
<title>Test Page: Don't Panic</title>
{% endif %}
{% if page.description %}
<meta name="description" content="{{ page.description }}">
{% else %}
<meta name="description" content="This is a dangerous site.">
{% endif %}
<link href="/favicon.png" rel="icon">
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/main.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-1', 'auto');
ga('send', 'pageview');
</script>
</head>
Listing_2.14.html
-3
View File
@@ -13,6 +13,3 @@
<a href="https://twitter.com/learnenough"
target="_blank" rel="noopener">here</a>.
</p>
.
.
.
Listing_2.5.html
-3
View File
@@ -6,6 +6,3 @@
sophistication taught by the Learn Enough tutorials can benefit
at least a billion people, and probably more.
</p>
.
.
.
Listing_2.8.html
-3
View File
@@ -27,6 +27,3 @@
at heart. He's just as happy shredding well-spec'd lines of code from a
tour bus as he is from his kitchen table.
</p>
.
.
.
Listing_3.10.html
-3
View File
@@ -13,6 +13,3 @@
</div>
<h1>Important HTML tags</h1>
.
.
.
Listing_3.2.html
-3
View File
@@ -12,6 +12,3 @@
<th>Purpose</th>
</tr>
</table>
.
.
.
Listing_3.8.html
-3
View File
@@ -1,6 +1,3 @@
.
.
.
<h4>My top 3 favorite things about Moby Dick</h4>
<ol>
Listing_3.9.html
-3
View File
@@ -13,6 +13,3 @@
</div>
<h1>The Learn Enough Story</h1>
.
.
.
Listing_4.14.html
-3
View File
@@ -8,6 +8,3 @@
</style>
</head>
.
.
.
Listing_4.22.html
+1 -1
View File
@@ -1 +1 @@
<h2 id="founders">Founders</h2>
<h2 id="founders">Founders</h2>
Listing_4.9.html
-3
View File
@@ -2,6 +2,3 @@
background-color: #fafafa;">
<h3>Moby-Dick: A classic tale of the sea</h3>
.
.
.
Listing_5.10.html
+45 -4
View File
@@ -1,4 +1,45 @@
<style>
a {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<meta charset="utf-8">
<style>
a {
color: red;
}
div {
border: 1px solid black;
}
div a {
color: green;
}
</style>
</head>
<body>
<h1>I'm an h1</h1>
<ul>
<li>
<a href="https://example.com/">Link</a>
</li>
<li>
<a href="https://example.com/">Link</a>
</li>
<li>
<a href="https://example.com/">Link</a>
</li>
</ul>
<h2>I'm an h2</h2>
<div>
<a href="https://example.com/">I'm a link</a>
</div>
<div>
<a href="https://example.com/">I'm a link</a>
</div>
<div>
<a href="https://example.com/">I'm a link</a>
</div>
<div>
<a href="https://example.com/">I'm a link</a>
</div>
</body>
</html>
Listing_5.11.html
+4 -34
View File
@@ -1,44 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<meta charset="utf-8">
<style>
a {
color: red;
}
div {
border: 1px solid black;
}
div a {
color: green;
}
</style>
</head>
<body>
<h1>I'm an h1</h1>
<ul>
<li>
<a href="https://example.com/">Link</a>
</li>
<li>
<a href="https://example.com/">Link</a>
</li>
<li>
<a href="https://example.com/">Link</a>
</li>
</ul>
<h2>I'm an h2</h2>
<div>
<div id="exec-bio" class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
<div>
<div class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
<div>
<div class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
<div>
<div class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
</body>
Listing_5.13.html → Listing_5.12.css
View File
Listing_5.12.html
-15
View File
@@ -1,15 +0,0 @@
<h2>I'm an h2</h2>
<div id="exec-bio" class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
<div class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
<div class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
<div class="bio-box">
<a href="https://example.com/">I'm a link</a>
</div>
</body>
</html>
Listing_5.4.html
+3
View File
@@ -3,6 +3,9 @@
<head>
<title>Test Page: Don't Panic</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<h1>I'm an h1</h1>
Listing_5.6.html
-3
View File
@@ -1,6 +1,3 @@
.
.
.
<div style="border: 1px solid black;">
<div style="border: 1px solid black;">
<div style="border: 1px solid black;">
Listing_5.7.html
+5 -12
View File
@@ -1,12 +1,5 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<meta charset="utf-8">
<style>
</style>
</head>
.
.
.
<style>
div {
border: 1px solid black;
}
</style>
Listing_5.8.html
+15 -5
View File
@@ -1,5 +1,15 @@
<style>
div {
border: 1px solid black;
}
</style>
<h2>I'm an h2</h2>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
</body>
</html>
Listing_5.9.html
+4 -15
View File
@@ -1,15 +1,4 @@
<h2>I'm an h2</h2>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
<div>
<a href="https://example.com/" style="color: green;">I'm a link</a>
</div>
</body>
</html>
<style>
a {
color: red;
}
Listing_8.13.html
-3
View File
@@ -1,5 +1,2 @@
<p style="clear: left;">
Learn Enough to Be Dangerous is a leader in the movement to teach the
.
.
.