Day 53: Learning CSS Grids By Building a Magazine

Another day, another opportunity to learn. Welcome to my learning CSS Grids by building a Magazine. Yesterday, I started by working on the html page. Here are the 10 steps I took today:

  1. Below the .heading element, I created a new section element with the class set to text. Within that, I created a p element with the class set to first-paragraph and a text.

Day 53 no1a.png

Day 53 no1b.png

  1. Created another p element below the .first-paragraph element, and gave it some text.

Day 53 no2a.png

Day 53 no2b.png

  1. Added a third p element at the end of your .text element, and gave it some text. Day 53 no3b.png
  2. After the three p elements within the .text element, created a blockquote element.

  3. Within that, added an hr element, a p element with the class set to quote with text in it, and a second hr element.

Day 53 no4a.png

Day 43 no4b.png

  1. Below the blockquote element, added another p element with the some text.

Day 53 no5a.png

Day 53 no5b.png

  1. Created a fifth p element at the end of the .text element, and gave it some text.

Day 53 no6a.png

Day 53 no7b.png

  1. Created one final p element at the end of the .text element and gave it the some text.

Day 53 no7a.png

Day 53 no7b.png

  1. Below the .text element, create a new section element and gave it a class of text text-with-images. Within that, created an article element and an aside element.

Day 53 no8a.png

  1. Within the article element, created an h3 element with the class set to list-title and the text of A Brief History. Below that, create a p element.

Day 53 no9a.png

Day 53 no9b.png

  1. Within the ul element, created six li elements. Add an h4 element with a class set to list-subtitle and a p element to each of your li elements, appropriate texts where added to them.

Day 53 no10a.png

Day 53 no10b.png That's all for today. Thank you for reading.