diff --git a/01-review/excercise/base.css b/01-review/excercise/base.css new file mode 100644 index 0000000..f9b3c28 --- /dev/null +++ b/01-review/excercise/base.css @@ -0,0 +1,30 @@ +/* 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/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 new file mode 100644 index 0000000..f10b3ef --- /dev/null +++ b/01-review/excercise/start.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
G
+
H
+
+ + 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 f05ad97..c4ec77b 100644 --- a/02-hamburger/begin/index.html +++ b/02-hamburger/begin/index.html @@ -1,190 +1,331 @@ - - - - - + + + + - - - + + + + + + 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 + +