+
+
+
+
+ All modern websites and web applications are built using three
+ fundamental
+ technologies: HTML, CSS and JavaScript. These are the languages of the
+ web.
+
+
+
+ In this post, let's focus on HTML. We will learn what HTML is all
+ about, and why you too should learn it.
+
+
+ What is HTML?
+
+ HTML stands for H yperT ext
+ M arkup L anguage. It's a markup
+ language that web developers use to structure and describe the content
+ of a webpage (not a programming language).
+
+
+ HTML consists of elements that describe different types of content:
+ paragraphs, links, headings, images, video, etc. Web browsers
+ understand HTML and render HTML code as websites.
+
+ In HTML, each element is made up of 3 parts:
+
+
+ The opening tag
+ The closing tag
+ The actual element
+
+
+
+ You can learn more at
+ MDN Web Docs .
+
+
+ Why should you learn HTML?
+
+
+ There are countless reasons for learning the fundamental language of
+ the web. Here are 5 of them:
+
+
+
+
+ To be able to use the fundamental web dev language
+
+
+ To hand-craft beautiful websites instead of relying on tools like
+ Worpress or Wix
+
+ To build web applications
+ To impress friends
+ To have fun 😃
+
+
+ Hopefully you learned something new here. See you next time!
+
+
+
+
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css
index b2d860942..152e60118 100644
--- a/starter/04-CSS-Layouts/style.css
+++ b/starter/04-CSS-Layouts/style.css
@@ -350,3 +350,18 @@ footer {
gap: 20px;
margin-bottom: 30px;
}
+
+.row {
+ align-items: flex-start;
+ display: flex;
+ gap: 75px;
+}
+
+article {
+ flex: 1;
+ margin-bottom: 0;
+}
+
+aside {
+ flex: 0 0 300px;
+}
From 20709210e9a3bacd3767336518eb146ad48ffb52 Mon Sep 17 00:00:00 2001
From: owen-webb
Date: Tue, 30 Aug 2022 19:08:06 -0600
Subject: [PATCH 08/11] section-4: Converted challenge to flexbox.
---
starter/04-CSS-Layouts/challenge/index.html | 76 +++++++++++----------
starter/04-CSS-Layouts/challenge/style.css | 44 ++++++------
2 files changed, 58 insertions(+), 62 deletions(-)
diff --git a/starter/04-CSS-Layouts/challenge/index.html b/starter/04-CSS-Layouts/challenge/index.html
index 74b6d8134..ba8d5b645 100644
--- a/starter/04-CSS-Layouts/challenge/index.html
+++ b/starter/04-CSS-Layouts/challenge/index.html
@@ -9,43 +9,45 @@
Converse Chuck Taylor All Star Low Top
-
-
-
-
$65.00
-
Free shipping
-
Sale
-
-
- Ready to dress up or down, these classic canvas Chucks are an everyday
- wardrobe staple.
-
-
More information →
-
-
-
-
-
-
Product details
-
- Lightweight, durable canvas sneaker
- Lightly padded footbed for added comfort
- Iconic Chuck Taylor ankle patch.
-
-
+
+
+
+
+
Sale
+
+
+ Ready to dress up or down, these classic canvas Chucks are an everyday
+ wardrobe staple.
+
+
More information →
+
+
+
+
+
+
Product details
+
+ Lightweight, durable canvas sneaker
+ Lightly padded footbed for added comfort
+ Iconic Chuck Taylor ankle patch.
+
+
Add to cart
diff --git a/starter/04-CSS-Layouts/challenge/style.css b/starter/04-CSS-Layouts/challenge/style.css
index 1bd47df6f..68bf1cf7e 100644
--- a/starter/04-CSS-Layouts/challenge/style.css
+++ b/starter/04-CSS-Layouts/challenge/style.css
@@ -9,20 +9,13 @@ body {
line-height: 1.4;
}
-.clearfix::after {
- content: '';
- display: block;
- clear: both;
-}
-
.container {
-/* background-color: red; */
+ align-items: center;
+ display: flex;
+ gap: 40px;
}
-.product-img {
- float: left;
- margin-right: 40px;
-}
+.product-img { }
/* PRODUCT */
.product {
@@ -43,15 +36,17 @@ body {
/* PRODUCT INFORMATION */
.product-info {
/* (825 - 8 - 250 - 80) / 2 */
- width: 243px;
- float: left;
- margin-right: 40px;
- margin-top: 20px;
+ flex: 1;
+}
+
+.product-info-header {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
}
.price {
font-size: 24px;
- float: left;
}
.shipping {
@@ -59,9 +54,6 @@ body {
text-transform: uppercase;
font-weight: bold;
color: #777;
- margin-bottom: 20px;
- float: right;
- margin-top: 8px;
}
.sale {
@@ -82,7 +74,6 @@ body {
}
.product-description {
- clear: both;
margin-bottom: 10px;
}
@@ -96,12 +87,17 @@ body {
text-decoration: none;
}
+.colors {
+ align-items: center;
+ display: flex;
+ gap: 10px;
+ justify-content: flex-start;
+}
+
.color {
background-color: #000;
height: 22px;
width: 22px;
- display: inline-block;
- margin-right: 10px;
}
.color-blue {
@@ -122,9 +118,7 @@ body {
/* PRODUCT DETAILS */
.product-details {
- width: 243px;
- float: left;
- margin-top: 20px;
+ flex: 1;
}
.details-title {
From 2a41f023b10913cc6dc18515977c67c3db13732b Mon Sep 17 00:00:00 2001
From: owen-webb
Date: Wed, 31 Aug 2022 08:45:51 -0600
Subject: [PATCH 09/11] section-4: CCS grid experimentations.
---
starter/04-CSS-Layouts/css-grid.html | 41 +++++++++++++++++++++++++---
1 file changed, 37 insertions(+), 4 deletions(-)
diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html
index e2daa6d42..d06713fff 100644
--- a/starter/04-CSS-Layouts/css-grid.html
+++ b/starter/04-CSS-Layouts/css-grid.html
@@ -11,10 +11,14 @@
}
.el--2 {
background-color: orangered;
+ /* grid-column: 1 / 2; */
+ /* grid-column: 1 / -1; */
+ grid-column: 1 / span 1;
+ grid-row: 2 / 3;
}
.el--3 {
background-color: green;
- height: 150px;
+ /* height: 150px; */
}
.el--4 {
background-color: goldenrod;
@@ -24,22 +28,35 @@
}
.el--6 {
background-color: steelblue;
+ grid-column: 4 / span 1;
+ grid-row: 1 / span 2;
}
.el--7 {
background-color: yellow;
}
.el--8 {
background-color: crimson;
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
}
.container--1 {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
- font-size: 40px;
+ font-size: 32px;
margin: 40px;
+ height: 500px;
/* CSS GRID */
+ display: grid;
+ /* gap: 30px; */
+ column-gap: 10px;
+ row-gap: 40px;
+ /* grid-template-columns: 2fr 1fr 1fr auto; */
+ grid-template-columns: repeat(4, 1fr);
+ /* grid-template-rows: 300px 200px; */
+ grid-template-rows: 1fr 1fr;
}
.container--2 {
@@ -47,12 +64,28 @@
font-family: sans-serif;
background-color: black;
font-size: 40px;
- margin: 100px;
+ margin: 40px;
- width: 1000px;
+ width: 700px;
height: 600px;
/* CSS GRID */
+ display: grid;
+ grid-template-columns: 125px 200px 125px;
+ grid-template-rows: 250px 100px;
+ gap: 10px;
+
+ /* Align tracks in container. Distribute empty space. */
+ justify-content: center;
+ align-content: center;
+
+ /* Align items inside cells. */
+ align-items: center;
+ justify-items: center;
+ }
+
+ .el--3 {
+ align-self: end;
}
From 5778a5c735b2ecfbcebc54807d0a510b8672f34e Mon Sep 17 00:00:00 2001
From: owen-webb
Date: Wed, 31 Aug 2022 09:13:51 -0600
Subject: [PATCH 10/11] section-4: Style blog with CSS grid.
---
starter/04-CSS-Layouts/index.html | 266 +++++++++++++++---------------
starter/04-CSS-Layouts/style.css | 34 +++-
2 files changed, 163 insertions(+), 137 deletions(-)
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html
index 4f6ec9054..1d2db6471 100644
--- a/starter/04-CSS-Layouts/index.html
+++ b/starter/04-CSS-Layouts/index.html
@@ -32,142 +32,142 @@ 📘 The Code Magazine
-
-
-
-
-
- All modern websites and web applications are built using three
- fundamental
- technologies: HTML, CSS and JavaScript. These are the languages of the
- web.
-
-
-
- In this post, let's focus on HTML. We will learn what HTML is all
- about, and why you too should learn it.
-
-
- What is HTML?
-
- HTML stands for H yperT ext
- M arkup L anguage. It's a markup
- language that web developers use to structure and describe the content
- of a webpage (not a programming language).
-
-
- HTML consists of elements that describe different types of content:
- paragraphs, links, headings, images, video, etc. Web browsers
- understand HTML and render HTML code as websites.
-
- In HTML, each element is made up of 3 parts:
-
-
- The opening tag
- The closing tag
- The actual element
-
-
-
- You can learn more at
- MDN Web Docs .
-
-
- Why should you learn HTML?
-
-
- There are countless reasons for learning the fundamental language of
- the web. Here are 5 of them:
-
-
-
-
- To be able to use the fundamental web dev language
-
-
- To hand-craft beautiful websites instead of relying on tools like
- Worpress or Wix
-
- To build web applications
- To impress friends
- To have fun 😃
-
-
- Hopefully you learned something new here. See you next time!
-
-
-
-
+
+
+
+
+
+
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css
index 152e60118..368fa7f14 100644
--- a/starter/04-CSS-Layouts/style.css
+++ b/starter/04-CSS-Layouts/style.css
@@ -27,7 +27,7 @@ body {
padding-left: 40px;
padding-right: 40px; */
padding: 20px 40px;
- margin-bottom: 60px;
+ /* margin-bottom: 60px; */
/* height: 80px; */
}
@@ -36,9 +36,9 @@ nav {
/* text-align: center; */
}
-article {
+/* article {
margin-bottom: 60px;
-}
+} */
.post-header {
margin-bottom: 40px;
@@ -351,7 +351,8 @@ footer {
margin-bottom: 30px;
}
-.row {
+/* FLEXBOX LAYOUT */
+/* .row {
align-items: flex-start;
display: flex;
gap: 75px;
@@ -364,4 +365,29 @@ article {
aside {
flex: 0 0 300px;
+} */
+
+/* CSS GRID */
+.container {
+ column-gap: 75px;
+ row-gap: 60px;
+ display: grid;
+ grid-template-columns: 1fr 300px;
+ align-items: start;
+}
+
+.main-header {
+ grid-column: 1 / span 2;
+}
+
+article {
+
+}
+
+aside {
+
+}
+
+footer {
+ grid-column: 1 / -1;
}
From 19d8c84f335c73fed00eaf15f860b9ab04f076df Mon Sep 17 00:00:00 2001
From: owen-webb
Date: Wed, 31 Aug 2022 22:16:41 -0600
Subject: [PATCH 11/11] section-4: CSS grid challenge.
---
starter/04-CSS-Layouts/challenge/index.html | 72 ++++++++++-----------
starter/04-CSS-Layouts/challenge/style.css | 19 +++++-
2 files changed, 52 insertions(+), 39 deletions(-)
diff --git a/starter/04-CSS-Layouts/challenge/index.html b/starter/04-CSS-Layouts/challenge/index.html
index ba8d5b645..b334195bc 100644
--- a/starter/04-CSS-Layouts/challenge/index.html
+++ b/starter/04-CSS-Layouts/challenge/index.html
@@ -9,46 +9,44 @@
Converse Chuck Taylor All Star Low Top
-
-
-
-
-
Sale
-
-
- Ready to dress up or down, these classic canvas Chucks are an everyday
- wardrobe staple.
-
-
More information →
-
-
+
+
+
-
-
-
Product details
-
- Lightweight, durable canvas sneaker
- Lightly padded footbed for added comfort
- Iconic Chuck Taylor ankle patch.
-
+
Sale
+
+
+ Ready to dress up or down, these classic canvas Chucks are an everyday
+ wardrobe staple.
+
+
More information →
+
+
+
+
+
Product details
+
+ Lightweight, durable canvas sneaker
+ Lightly padded footbed for added comfort
+ Iconic Chuck Taylor ankle patch.
+
+
Add to cart
diff --git a/starter/04-CSS-Layouts/challenge/style.css b/starter/04-CSS-Layouts/challenge/style.css
index 68bf1cf7e..8eba0631a 100644
--- a/starter/04-CSS-Layouts/challenge/style.css
+++ b/starter/04-CSS-Layouts/challenge/style.css
@@ -9,11 +9,11 @@ body {
line-height: 1.4;
}
-.container {
+/* .container {
align-items: center;
display: flex;
gap: 40px;
-}
+} */
.product-img { }
@@ -153,3 +153,18 @@ body {
color: #000;
background-color: #fff;
}
+
+.product {
+ display: grid;
+ grid-template-columns: 250px 1fr 1fr;
+ column-gap: 40px;
+ align-items: center;
+}
+
+.product-title {
+ grid-column: 1 / -1;
+}
+
+.add-cart {
+ grid-column: 1 / -1;
+}
-
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css
index c879e79d2..bba322d79 100644
--- a/starter/04-CSS-Layouts/style.css
+++ b/starter/04-CSS-Layouts/style.css
@@ -14,7 +14,7 @@ body {
}
.container {
- width: 800px;
+ width: 1200px;
/* margin-left: auto;
margin-right: auto; */
margin: 0 auto;
@@ -265,3 +265,46 @@ footer p {
nav p {
font-size: 18px;
} */
+
+.author {
+ float: left;
+ margin-left: 20px;
+ margin-top: 10px;
+}
+
+.author-image {
+ float: left;
+ margin-bottom: 20px;
+}
+
+h1 {
+ float: left;
+}
+
+nav {
+ float: right;
+}
+
+.clear {
+ clear: both;
+}
+
+.clearfix::after {
+ clear: both;
+ content: '';
+ display: block;
+}
+
+article {
+ float: left;
+ width: 825px;
+}
+
+aside {
+ float: right;
+ width: 300px;
+}
+
+footer {
+ clear: both;
+}
From 697a5592ea105132166346c3b64e9a7b9e47c3bb Mon Sep 17 00:00:00 2001
From: owen-webb 
+ 
- How to Learn Web Development
-
+
- 
- The Unknown Powers of CSS
-
+
- 
- Why JavaScript is Awesome
-
+