From 94ac0981e5f489fa276a56fbde79eca18f6284a9 Mon Sep 17 00:00:00 2001 From: Kevin io <> Date: Thu, 17 Nov 2022 18:53:32 +0100 Subject: [PATCH 1/4] set up --- 01-review/excercise/ex-1.css | 41 ++++++++++++++++++++++++++++++++++ 01-review/excercise/start.html | 12 ++++++++++ 2 files changed, 53 insertions(+) create mode 100644 01-review/excercise/ex-1.css create mode 100644 01-review/excercise/start.html diff --git a/01-review/excercise/ex-1.css b/01-review/excercise/ex-1.css new file mode 100644 index 0000000..bde7678 --- /dev/null +++ b/01-review/excercise/ex-1.css @@ -0,0 +1,41 @@ +/* scroll for starting CSS and hints; instructions in JS window -> */ + +/* HINT: Three types of Grid syntax might include: +- line-based placement, like grid-column: 1 / 3; +- use the "span" keyword, like grid-column: span 2; +- use grid area notation + + + + + +/* presentational CSS, no answers here -- ignore below this line */ +div > div { + font-size: 5rem; + text-align: center; + color: white; +} +.a { + background-color: #fcb10f; +} +.b { + background-color: #801340; +} +.c { + background-color: #4d2975; +} +.d { + background-color: #244479; +} +.e { + background-color: #55b4af; +} +.f { + background-color: rgba(128, 19, 64, 0.7); +} +.g { + background-color: rgba(77, 41, 117, 0.5); +} +.h { + background-color: rgba(252, 177, 15, 0.7); +} diff --git a/01-review/excercise/start.html b/01-review/excercise/start.html new file mode 100644 index 0000000..2422d82 --- /dev/null +++ b/01-review/excercise/start.html @@ -0,0 +1,12 @@ +
+
A
+
B
+
C
+
D
+
E
+
F
+
G
+
H
+
+ + From 9e550a1faa8d8ea5160106633a8d7418bbe5d66a Mon Sep 17 00:00:00 2001 From: Kevin io <> Date: Thu, 17 Nov 2022 19:26:36 +0100 Subject: [PATCH 2/4] Solution --- 01-review/excercise/{ex-1.css => base.css} | 11 ------- 01-review/excercise/ex-1-flex.css | 27 ++++++++++++++++ 01-review/excercise/ex-1-grid.css | 14 +++++++++ 01-review/excercise/start.html | 36 ++++++++++++++-------- 4 files changed, 65 insertions(+), 23 deletions(-) rename 01-review/excercise/{ex-1.css => base.css} (65%) create mode 100644 01-review/excercise/ex-1-flex.css create mode 100644 01-review/excercise/ex-1-grid.css diff --git a/01-review/excercise/ex-1.css b/01-review/excercise/base.css similarity index 65% rename from 01-review/excercise/ex-1.css rename to 01-review/excercise/base.css index bde7678..f9b3c28 100644 --- a/01-review/excercise/ex-1.css +++ b/01-review/excercise/base.css @@ -1,14 +1,3 @@ -/* scroll for starting CSS and hints; instructions in JS window -> */ - -/* HINT: Three types of Grid syntax might include: -- line-based placement, like grid-column: 1 / 3; -- use the "span" keyword, like grid-column: span 2; -- use grid area notation - - - - - /* presentational CSS, no answers here -- ignore below this line */ div > div { font-size: 5rem; diff --git a/01-review/excercise/ex-1-flex.css b/01-review/excercise/ex-1-flex.css new file mode 100644 index 0000000..1d2c948 --- /dev/null +++ b/01-review/excercise/ex-1-flex.css @@ -0,0 +1,27 @@ +.wrapper { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: stretch; +} + +.wrapper > * { + margin-bottom: 1rem; +} + +.a, +.h { + flex-basis: 66%; +} + +.b, +.d, +.e, +.f, +.g { + flex-basis: 32%; +} + +.c { + flex: 100%; +} diff --git a/01-review/excercise/ex-1-grid.css b/01-review/excercise/ex-1-grid.css new file mode 100644 index 0000000..d1baa7a --- /dev/null +++ b/01-review/excercise/ex-1-grid.css @@ -0,0 +1,14 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 1rem; +} + +.a, +.h { + grid-column: span 2; +} + +.c { + grid-column: span 3; +} diff --git a/01-review/excercise/start.html b/01-review/excercise/start.html index 2422d82..f10b3ef 100644 --- a/01-review/excercise/start.html +++ b/01-review/excercise/start.html @@ -1,12 +1,24 @@ -
-
A
-
B
-
C
-
D
-
E
-
F
-
G
-
H
-
- - + + + + + + + Document + + + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
G
+
H
+
+ + From 8c3344429ca6e3eb28cc31f9a4587c5acf3383f6 Mon Sep 17 00:00:00 2001 From: kevin-io-digital <100784946+kevin-io-digital@users.noreply.github.com> Date: Fri, 18 Nov 2022 14:18:06 +0100 Subject: [PATCH 3/4] Update index.html Update --- 02-hamburger/begin/index.html | 498 ++++++++++++++++++++++------------ 1 file changed, 318 insertions(+), 180 deletions(-) diff --git a/02-hamburger/begin/index.html b/02-hamburger/begin/index.html index f05ad97..174d74b 100644 --- a/02-hamburger/begin/index.html +++ b/02-hamburger/begin/index.html @@ -1,190 +1,328 @@ - - - - - + + + + - - - + + + + + + Layout Times: CSS layouts with calc and custom properties - + - +
- - + + + + + +
-
-

Jen’s Awesome Resources

-
-

Learn with Jen Kramer online at Harvard Extension

-

Join some of the many informative courses Jen teaches through the Harvard Extension School. Courses count towards bachelors and masters degree programs, certificates, or take a class for your own enrichment.

- -
-
- Before You Code book cover. -

Plan your product’s success

-

By taking the time to do upfront validation, planning and iterating before you build, you can avoid - ideas that flop and create a product that exceeds expectations. Heather O'Neill and Jen Kramer's - latest book, Before You Code, will guide you through the process.

-

Visit the Before You Code website -

-
-
-

More Responsive Design 2.0

-

Get a head start on the latest responsive web design (RWD) techniques with this great list of - resources.

-

Visit RWD 2.0 Reading List -

-
-
- CSS Workout -

Have you done your CSS workout for the day?

-

Nowhere is practice more important than with CSS layouts. For 15 years, we’ve listened to students - complain about CSS layouts, how hard they are to understand, and how things “don’t work” in the - expected way. Now you can train daily to master them.

 -

Visit CSS Workouts to start your - routine!

-
-
-
-

Main News

- -
- Frontend Masters Bootcamp. -

Coming 2019 the Frontend Masters Bootcamp

-

Featuring instruction from Jen Kramer and Brian Holt, this incredible and free resource is everything - you need to get started on being a web developer. Available late 2019.

-

Visit the Bootcamp website

-
-
-

CSS-Tricks: why we love it!

-

Still one of the best resources on the web to bend CSS to your will, CSS-Tricks is jam packed with - techniques, information and best practices.

-

Check out CSS-Tricks

-
-
- Codepen. -

Learn best by doing? Try Codepen!

-

Get immediate feedback on the code you type right in the browser!

-

Try Codepen now

-
-
-
-

Developers to Follow:

- -
-
-

Design Resources (credit: Sarah Drasner)

- -
- +
+

Jen’s Awesome Resources

+
+

Learn with Jen Kramer online at Harvard Extension

+

+ Join some of the many informative courses Jen teaches through the + Harvard Extension School. Courses count towards bachelors and + masters degree programs, certificates, or take a class for your own + enrichment. +

+ +
+
+ Before You Code book cover. +

Plan your product’s success

+

+ By taking the time to do upfront validation, planning and iterating + before you build, you can avoid ideas that flop and create a product + that exceeds expectations. Heather O'Neill and Jen Kramer's latest + book, Before You Code, will guide you through the + process. +

+

+ Visit the Before You Code website + +

+
+
+

More Responsive Design 2.0

+

+ Get a head start on the latest responsive web design (RWD) + techniques with this great list of resources. +

+

+ Visit RWD 2.0 Reading List +

+
+
+ CSS Workout +

Have you done your CSS workout for the day?

+

+ Nowhere is practice more important than with CSS layouts. For 15 + years, we’ve listened to students complain about CSS layouts, how + hard they are to understand, and how things “don’t work” in the + expected way. Now you can train daily to master them. +

+  +

+ Visit CSS Workouts to start your routine! + +

+
+
+
+

Main News

+ +
+ Frontend Masters Bootcamp. +

Coming 2019 the Frontend Masters Bootcamp

+

+ Featuring instruction from Jen Kramer and Brian Holt, this + incredible and free resource is everything you need to get started + on being a web developer. Available late 2019. +

+

+ Visit the Bootcamp website +

+
+
+

CSS-Tricks: why we love it!

+

+ Still one of the best resources on the web to bend CSS to your will, + CSS-Tricks is jam packed with techniques, information and best + practices. +

+

+ Check out CSS-Tricks + +

+
+
+ Codepen. +

Learn best by doing? Try Codepen!

+

+ Get immediate feedback on the code you type right in the browser! +

+

+ Try Codepen now +

+
+
+
+

Developers to Follow:

+ +
+
+

Design Resources (credit: Sarah Drasner)

+ +
- - - \ No newline at end of file + + From e3f73a6428a7d9bb01f9597a4f7f859ddf693e0b Mon Sep 17 00:00:00 2001 From: kevin-io-digital <100784946+kevin-io-digital@users.noreply.github.com> Date: Fri, 18 Nov 2022 15:07:04 +0100 Subject: [PATCH 4/4] Extra styling for the menus --- 02-hamburger/begin/css/nav.css | 207 ++++++++++++++++++++++++++------- 02-hamburger/begin/index.html | 25 ++-- 2 files changed, 177 insertions(+), 55 deletions(-) diff --git a/02-hamburger/begin/css/nav.css b/02-hamburger/begin/css/nav.css index a630f71..9f911f2 100644 --- a/02-hamburger/begin/css/nav.css +++ b/02-hamburger/begin/css/nav.css @@ -5,61 +5,180 @@ Below is a starting navigation bar formatted for mobile and desktop. MQ is set t */ +header .row { + display: flex; + flex-flow: row nowrap; +} + +.menu-toggle { + color: #333; + margin-right: 1rem; +} + +.menu-toggle:hover, +.menu-toggle:focus { + color: #c85028; +} + +.main-menu { + position: fixed; + display: none; + left: -200px; + top: 0; + height: 100%; + overflow-x: visible; + overflow-y: auto; + transition: left 0.3s ease; + z-index: 999; +} + +.main-menu ul { + list-style: none; + margin: 0; + padding-top: 2.5em; + min-height: 100%; + width: 200px; + background-color: #1a1a1a; +} + +.main-menu a { + display: block; + padding: 0.75em; + color: #fff; + text-decoration: none; + border-bottom: 1px solid #383838; +} + +.main-menu li:first-child a { + border-top: 1px solid #383838; +} + +.main-menu a:hover, +.main-menu a:focus { + background-color: #333; + text-decoration: underline; +} + +.main-menu .menu-close { + position: absolute; + right: 0; + top: 0; + border-bottom: none; +} + +.main-menu:target { + display: block; + left: 0; + outline: none; +} + +.main-menu:target .menu-close { + z-index: 1001; +} + +.main-menu:target ul { + position: relative; + z-index: 1000; +} + +.main-menu:target + .backdrop { + position: fixed; + display: block; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 998; + background-color: rgba(0, 0, 0, 0.5); + cursor: default; +} header { - border-bottom: 4px solid #9EA9C1; + border-bottom: 4px solid #9ea9c1; } main { border-top: 2px solid #dddddd; margin-top: 0.5rem; - } nav ul { - list-style: none; - margin: 0; + list-style: none; + margin: 0; } - + nav a { + display: block; + padding: 0.75rem; + text-decoration: none; +} +@media (min-width: 800px) { + /* header and nav borders rearranged for desktop */ + header, + main { + border: none; + margin: 0; + } + nav { + border-top: 4px solid #9ea9c1; + border-bottom: 1px solid #dddddd; + padding: 0.3rem 0; + } + + .menu-toggle, + .main-menu .menu-close { + display: none; + } + + .main-menu { + position: static; display: block; - padding: .75rem; + } + + .main-menu ul { + padding: 0; + height: auto; + width: auto; + background: none; + overflow: hidden; + text-align: center; + } + + .main-menu li { + display: inline-block; + } + + .main-menu li:first-child a { + border-top: none; + } + + .main-menu a { + color: #c85028; + border-bottom: none; + display: inline; + } + + .main-menu a:hover, + .main-menu a:focus { + background: none; + color: #7e64be; text-decoration: none; -} + } - @media (min-width: 800px) { - /* header and nav borders rearranged for desktop */ - header, main { - border: none; - margin: 0; - } - nav { - border-top: 4px solid #9EA9C1; - border-bottom: 1px solid #dddddd; - padding: 0.3rem 0; - } - nav ul { - text-align: center; - } - /* display the li's horizontally */ - nav li { - display: inline-block; - } - /* add cute divider after each li, but not the last one */ - nav li:not(:last-child)::after { - content: " || "; - } -/* above style the same as - nav li::after { - content: " || "; + /* add cute divider after each li, but not the last one */ + nav li:not(:last-child)::after { + content: " || "; + } + /* above style the same as + nav li::after { + content: " || "; + } + nav li:last-child::after { + content: ""; } - nav li:last-child::after { - content: ""; - } -*/ - /* desktop assumes a pointer display */ - nav a { - color: #C85028; - border-bottom: none; - display: inline; - } - - } \ No newline at end of file + */ + /* desktop assumes a pointer display */ + nav a { + color: #c85028; + border-bottom: none; + display: inline; + } +} diff --git a/02-hamburger/begin/index.html b/02-hamburger/begin/index.html index 174d74b..c4ec77b 100644 --- a/02-hamburger/begin/index.html +++ b/02-hamburger/begin/index.html @@ -25,17 +25,20 @@
- - - -