Feineigle.com - Responsive Web Design with HTML5 and CSS

Home · Book Reports · 2021 · Responsive Web Design With HTML5 and CSS

Published: August 28, 2021
Tags:  Css · Html · Programming



designates my notes. / designates important.


Thoughts

Very useful for understanding responsive design. The layout and flow of the book was very intuitive in leading from one topic to the next. Unlike many of the other programming books I read, this one I read for a practical purpose. Directly after reading it I built How to Eat an Elephant.xyz. About a year later I adapted what I already had there for this site.

Not much else to say, but the book allowed me to create what I wanted.


Table of Contents


page 24:

· Chapter 01: Essentials of Responsive Web Design

page 45:
page 48:

· Chapter 02: Writing HTML Markup

page 55:
page 58:
<h1>Ben's site</h1>
<section>
  <h1>Ben's blog</h1>
  <p>All about what I do</p>
</section>
<article>
  <header>
    <h1>A post about something</h1>
    <p>Trust me this is a great read</p>
    <p>No, not really</p>
    <p>See. Told you.</p>
  </header>
</article>
page 59:
page 68:
page 72:
<video src="myVideo.mp4" width="640" height="480"
  controls
  autoplay
  preload="auto"
  loop
  poster="myVideoPoster.png">
  If you're reading
  this either the video didn't load or your browser is waaaayyyyyy old!
</video>
page 73:
page 74:
video {
  max-width: 100%;
  height: auto;
}
<iframe width="960" height="720" src="https://www.youtube.com/
embed/B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>
page 75:
<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="embed-container">
  <iframe
    src="http://www.youtube.com/embed/B1_N28DA3gY"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
page 78:

· Chapter 03: Media Queries - Supporting Different Viewports

page 82:
page 85:
<link rel="stylesheet" media="screen and (orientation: portrait)"
href="portrait-screen.css" />
@media screen and (orientation: portrait) {
    /* styles here */
}
<link rel="stylesheet" media="not screen and (orientation:
portrait)" href="portrait-screen.css" />
page 87:
page 88:
@import url("tiny.css") screen and (min-width:200px) and (max-
width:360px);
page 90:
rwd-Nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    margin: 10px 0 0 0;
}

@media (min-width: 1000px) {
    .rwd-Nav {
        margin: 0;
        padding: 0;
    }
}
page 96:
@media (pointer: coarse) {
    /* styles for when coarse pointer is present */
}
@media (pointer: fine) {
    /* styles for when fine pointer is present */
}
page 97:
@media (hover: none) {
    /* styles for when the user cannot hover */
}
@media (hover) {
    /* styles for when user can hover */
}
@media (any-hover: hover) {
    /* styles if any input device is capable of hover*/
}
@media (any-pointer: coarse) {
    /* styles to be applied if any attached pointer is coarse */
}
page 98:
body {
    background-color: #e4e4e4;
    color: #545454;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #ddd;
    }
}
page 100:

· Chapter 04: Fluid Layout, Flexbox, and Responsive Images

page 100:
page 109:
page 117:
page 144:

· Chapter 05: Layout with CSS Grid

page 178:

· Chapter 06: CSS Selectors, Typography, Color Modes, and More

page 182:
<img src="https://placeimg.com/640/480/any" alt="an inquisitive cat">

And this CSS:

img[alt] {
  border: 3px dashed #e15f5f;
}
[data-sausage] {
  /* styles */
}
page 183:
img[alt="Sausages cooking"] {
  /* Styles */
}
<img src="img/sausages.png" alt="Sausages cooking" />
<li data-type="todo-chore">Empty the bins</li>
<li data-type="todo-exercise">Play football</li>
page 184:
[data-type^="todo"] {
  /* Styles */
}
[attribute*="value"] {
  /* Styles */
}
page 161:
[data-type^="todo"] {
/* Styles */
}

[attribute$="value"] {
  /* Styles */
}
page 184:
page 186:
[data-activity-name="swimming"][data-location="indoor"] {
  /* Styles */
}
page 187:
div:first-child {
  /* Styles */
}
div:last-child {
  /* Styles */
}
page 188:
.nav-Link:nth-child(odd) {
  /* Styles */
}
.nav-Link:nth-child(even) {
  /* Styles */
}
page 195:
.parent > .descendant {
  /* Styles */
}
.one + .item {
  border: 3px dashed #f90;
}
page 196:
.item:nth-child(3) ~ .item {
  border: 3px dashed #f90;
}
.a-div:not(.not-me) {
    background-color: orange;
    border-radius: 50%;
}
page 197:
<div class="thing"></div>
.thing {
  padding: 1rem;
  background-color: violet;
}
.thing:empty {
  display: none;
}
page 198:
page 199:
.Hero-text {
  font-size: 25vw;
}
.thing {
    width: calc(50% - 10px);
}
page 200:
:root {
  --MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.Title {
  font-family: var(--MainFont);
}
page 203:
.my-Item {
     background-color: var(--backgroundColor, #555);
}
page 205:
@supports (display: grid) {
  .Item {
    display: inline-grid;
  }
}
@supports not (display: grid) {
  .Item {
    display: inline-flex;
  }
}
.Item {
  display: inline-flex;
}
@supports (display: grid) {
  .Item {
    display: inline-grid;
  }
}
page 206:
@supports ((display: flex) and (pointer: coarse)) {
  .Item {
    display: inline-flex;
  }
}
page 224:

· Chapter 07: Stunning Aesthetic with CSS

page 262:

· Chapter 08: Using SVGs for Resolution Independence

page 300:

· Chapter 09: Transitions, Transformations, and Animations

page 304:
.style {
  /*...(more styles)...*/
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
transition: all 1s ease 0s;
page 305:
transition: background-color 2s;
.style {
  /* ...(more styles)... */
  transition-property: border, color, text-shadow;
  transition-duration: 2s, 3s, 8s;
}
.style {
  transition: border 2s, color 3s, text-shadow 8s;
}
page 307:
page 309:
page 311:
page 334:

· Chapter 10: Conquer Forms with HTML5 and CSS

page 366:

· Chapter 11: Bonus Techniques and Parting Advice