Sophia Lesson 1

by Will Stott

HTML

<h1>Falmouth Bookseller</h1>

<ul>
  <li class="fivestars book fantasy">Book Dust <span class="genre">fantasy</span>
  <li class="twostars book">Paper Heart
  <li class="fourstars book">Hollow
</ul>

CSS

body {
  font-family: 'sans-serif';
  color: hotpink;
}

li.book {
  list-style-type: '📖';
}
span.genre {
  background-color: grey;
  color: black;
}

.fivestars {
  color: blue;
  font-style: italic;
}
.fivestars::after {
  content: '⭐⭐⭐⭐⭐';
}
.twostars {
  color: olivedrab;
}
.twostars::after {
  content: '⭐⭐';
}
.fourstars {
  color: tomato;
}
.fourstars::after {
  content: '⭐⭐⭐⭐';
}

JavaScript

// Layout
// Richer elements (a/img) interactive css (::hover)
// Repo / code mgmt
// CLI tooling