Essential front-end development

CSS Project

Wow. That was a whole lot of styling! Who knew colors were this hard to get right? 😄

Let us now use our newfound knowledge to give our project some colors and space.

Goals

Responsive design
Easily recognizable headings

Discussion

The final solution can be found at the bottom of the page. It now looks much more modern. The navigation bar is easily identifiable and every recipe is clearly separated from other recipes.

Grid

The grid layout and various properties have been used to create a layout for the whole page. Notice how the layout changes depending on the device with the help of media queries.

Flex

The flex property has been used aggressively to position and size elements as we want throughout the whole page.

Header and navigation

We've chosen to add a grayish background to separate the navigation section from the rest of the page. Some padding has been added to create some space and make it feel less cluttered.

Recipes

Every recipe now lives in its own little shadowed box. The ingredients, instructions and pictures are flexible rows for larger devices and have been widened to take up a whole row each for smaller devices using media queries.

Code and Preview

<div class="grid">
  <nav>
    <h1>Recipes</h1>
    <ul>
      <li><a class="active" href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article class="recipe">
      <header>
        <h2>Pecorino and thyme crostini</h2>
      </header>
      <section class="ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li>150g grated Pecorino Romano cheese</li>
          <li>1 clove garlic, minced</li>
          <li>1 tablespoon chopped fresh thyme leaves</li>
          <li>1 (200g) tub cream cheese, softened</li>
          <li>1 baguette</li>
        </ul>
      </section>
      <section class="instructions">
        <h3>Instructions</h3>
        <ol>
          <li>
            Preheat the grill. Slice baguette into 1cm slices. Arrange the bread
            slices on a baking tray. Toast under the grill for 1 minute per
            side, or until both sides are slightly toasted.
          </li>
          <li>
            In a mixing bowl, combine the Pecorino, garlic, thyme and cream
            cheese. Spread the mixture over the tops of the baguette slices.
            Grill for a further 3 minutes, until cheese is melted.
          </li>
        </ol>
      </section>
      <img
        alt="Pecorino and thyme crostini"
        src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Pecorino_di_Filiano.jpg"
        width="250"
        height="250"
        class="recipe-photo"
      />
    </article>

    <article class="recipe">
      <header>
        <h2>Custard Shorties</h2>
      </header>
      <section class="ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li>6 ozs Self Raising Flour</li>
          <li>2 ozs Custard Powder</li>
          <li>2 teaspoons baking powder</li>
          <li>4 ozs Butter can use Flora Buttery</li>
          <li>4 ozs Caster sugar</li>
          <li>1 egg beaten with 2 tbsp Milk</li>
          <li>Your favourite jam</li>
        </ul>
      </section>
      <section class="instructions">
        <h3>Instructions</h3>
        <ol>
          <li>Oven heat Gas Mk 4 /180c/350f</li>
          <li>Sieve together Flour, baking powder and custard powder</li>
          <li>Rub in butter (as for pastry)</li>
          <li>Stir in sugar</li>
          <li>
            Bind together with beaten egg and milk adding more milk if too dry
          </li>
          <li>
            Roll out lightly on floured surface to a thickness of 1.5 cms or 3/4
            inch.
          </li>
          <li>
            Using 6cm - 2 1/2 inch pastry cutter cut into rounds flouring cutter
            between each one 12 - 18 rounds
          </li>
          <li>Place cake cases in patty pans</li>
          <li>Centre one round in each case</li>
          <li>Put half a teaspoonful of jam in the well</li>
          <li>
            Bake in the centre of preheated oven for 20 mins till golden brown
            showing an eye of jam in centre
          </li>
          <li>Cool and dust with sifted icing sugar if desired.</li>
        </ol>
      </section>
      <img
        alt="Custard Shorties"
        src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Dessertcustard.jpg"
        width="250"
        height="250"
        class="recipe-photo"
      />
    </article>
  </main>

  <footer>
    <a href="https://not-so-evil-corp-fictional-url.com">
      Copyright Now - Infinity
      <br />
      Evil Corp
    </a>
  </footer>
</div>

<div class="grid">
  <nav>
    <h1>Recipes</h1>
    <ul>
      <li><a class="active" href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article class="recipe">
      <header>
        <h2>Pecorino and thyme crostini</h2>
      </header>
      <section class="ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li>150g grated Pecorino Romano cheese</li>
          <li>1 clove garlic, minced</li>
          <li>1 tablespoon chopped fresh thyme leaves</li>
          <li>1 (200g) tub cream cheese, softened</li>
          <li>1 baguette</li>
        </ul>
      </section>
      <section class="instructions">
        <h3>Instructions</h3>
        <ol>
          <li>
            Preheat the grill. Slice baguette into 1cm slices. Arrange the bread
            slices on a baking tray. Toast under the grill for 1 minute per
            side, or until both sides are slightly toasted.
          </li>
          <li>
            In a mixing bowl, combine the Pecorino, garlic, thyme and cream
            cheese. Spread the mixture over the tops of the baguette slices.
            Grill for a further 3 minutes, until cheese is melted.
          </li>
        </ol>
      </section>
      <img
        alt="Pecorino and thyme crostini"
        src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Pecorino_di_Filiano.jpg"
        width="250"
        height="250"
        class="recipe-photo"
      />
    </article>

    <article class="recipe">
      <header>
        <h2>Custard Shorties</h2>
      </header>
      <section class="ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li>6 ozs Self Raising Flour</li>
          <li>2 ozs Custard Powder</li>
          <li>2 teaspoons baking powder</li>
          <li>4 ozs Butter can use Flora Buttery</li>
          <li>4 ozs Caster sugar</li>
          <li>1 egg beaten with 2 tbsp Milk</li>
          <li>Your favourite jam</li>
        </ul>
      </section>
      <section class="instructions">
        <h3>Instructions</h3>
        <ol>
          <li>Oven heat Gas Mk 4 /180c/350f</li>
          <li>Sieve together Flour, baking powder and custard powder</li>
          <li>Rub in butter (as for pastry)</li>
          <li>Stir in sugar</li>
          <li>
            Bind together with beaten egg and milk adding more milk if too dry
          </li>
          <li>
            Roll out lightly on floured surface to a thickness of 1.5 cms or 3/4
            inch.
          </li>
          <li>
            Using 6cm - 2 1/2 inch pastry cutter cut into rounds flouring cutter
            between each one 12 - 18 rounds
          </li>
          <li>Place cake cases in patty pans</li>
          <li>Centre one round in each case</li>
          <li>Put half a teaspoonful of jam in the well</li>
          <li>
            Bake in the centre of preheated oven for 20 mins till golden brown
            showing an eye of jam in centre
          </li>
          <li>Cool and dust with sifted icing sugar if desired.</li>
        </ol>
      </section>
      <img
        alt="Custard Shorties"
        src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Dessertcustard.jpg"
        width="250"
        height="250"
        class="recipe-photo"
      />
    </article>
  </main>

  <footer>
    <a href="https://not-so-evil-corp-fictional-url.com">
      Copyright Now - Infinity
      <br />
      Evil Corp
    </a>
  </footer>
</div>

/* grid layout styling */
.grid {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

/* heading styling */
h1,
h2,
h3 {
  margin: 0.25rem;
  letter-spacing: -0.025rem;
  font-weight: 500;
}

h1 {
  font-size: 1.875rem;
}

h2 {
  font-size: 1.65rem;
}

h3 {
  font-size: 1.25rem;
}

/* navigation styling */
nav {
  grid-area: header;
  background-color: #e0e0e0;
  color: #616161;
  display: flex;
  padding: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

nav h1 {
  text-transform: uppercase;
  color: #212121;
  letter-spacing: 0.2rem;
  font-weight: bold;
  margin: 1rem 0;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0 -1rem;
}

nav a {
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

nav a.active,
nav a.active:hover {
  color: white;
  background-color: teal;
}

nav a:hover {
  color: white;
  background-color: teal;
}

/* main styling */
main {
  grid-area: content;
  padding: 1rem;
}

.recipe {
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  margin: 1rem 0;
  padding: 1rem 0.5rem;
}

.recipe header {
  flex: 1 0 100%;
}

.recipe section {
  flex: 1 0 100%;
  padding: 0;
}

.recipe section li {
  padding: 0.25rem;
}

/* footer styling */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding: 2rem;
  background-color: #e0e0e0;
  color: #616161;
  text-align: center;
}

footer a {
  grid-area: footer;
  color: black;
  text-decoration: none;
}

/* larger devices */
@media only screen and (min-width: 640px) {
  .recipe section {
    flex: 1 0 200px;
    padding: 1rem;
  }

  .grid {
    grid-template-rows: 7.5rem 1fr 7.5rem;
  }
}

/* grid layout styling */
.grid {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

/* heading styling */
h1,
h2,
h3 {
  margin: 0.25rem;
  letter-spacing: -0.025rem;
  font-weight: 500;
}

h1 {
  font-size: 1.875rem;
}

h2 {
  font-size: 1.65rem;
}

h3 {
  font-size: 1.25rem;
}

/* navigation styling */
nav {
  grid-area: header;
  background-color: #e0e0e0;
  color: #616161;
  display: flex;
  padding: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

nav h1 {
  text-transform: uppercase;
  color: #212121;
  letter-spacing: 0.2rem;
  font-weight: bold;
  margin: 1rem 0;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0 -1rem;
}

nav a {
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

nav a.active,
nav a.active:hover {
  color: white;
  background-color: teal;
}

nav a:hover {
  color: white;
  background-color: teal;
}

/* main styling */
main {
  grid-area: content;
  padding: 1rem;
}

.recipe {
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  margin: 1rem 0;
  padding: 1rem 0.5rem;
}

.recipe header {
  flex: 1 0 100%;
}

.recipe section {
  flex: 1 0 100%;
  padding: 0;
}

.recipe section li {
  padding: 0.25rem;
}

/* footer styling */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding: 2rem;
  background-color: #e0e0e0;
  color: #616161;
  text-align: center;
}

footer a {
  grid-area: footer;
  color: black;
  text-decoration: none;
}

/* larger devices */
@media only screen and (min-width: 640px) {
  .recipe section {
    flex: 1 0 200px;
    padding: 1rem;
  }

  .grid {
    grid-template-rows: 7.5rem 1fr 7.5rem;
  }
}

Editor

Preview

Reset code