Hello People. Welcome to a new week and a new learning experience for me. Last week, I completed learning CSS Variables by building a City Skyline. Today, I would be starting a new journey on learning CSS Grids by Building a Magazine. Let’s quickly dive into it.

1. Began with the standard HTML boilerplate. Added a DOCTYPE declaration, an html element specifying this page is in English, a head element, and a body element. Added a tag with the appropriate charset and a tag for mobile responsiveness within the head element.

1. Added a title element with the text Magazine, a link element for the fonts.googleapis.com/css?family=Anton%7CBas.. font stylesheet, a link for the use.fontawesome.com/releases/v5.8.2/css/all.. FontAwesome stylesheet, and a link for your ./styles.css stylesheet. The font stylesheet has three separate fonts: Anton, Baskervville, and Raleway.

1. Within the body, I created a main element. Then in that element, created a section with a class set to heading.

1. Within the .heading element, created a header element with the class set to hero. In that element, created an img element with the src set to cdn.freecodecamp.org/platform/universal/fcc.., the alt set to freecodecamp logo, and the class set to hero-img. The loading attribute on an img element was set to lazy to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load.

1. After the img element, I added an h1 element with the class set to hero-title and the text set to “OUR NEW CURRICULUM”, followed by a p element with the class set to hero-subtitle and the text set to “Our efforts to restructure our curriculum with a more project-based focus”.

1. The image currently takes up a lot of space. To better see what I am working on, I added a width attribute to the img element, with a value of 400. P.S: This will be removed later on when I have worked on the CSS.

1. After the header element, created a div with the class set to author. Within that div, created a p element with the class set to author-name and gave it the text By “freeCodeCamp”. Wrap the freeCodeCamp portion in a element with the href set to “freecodecamp.org”, and the target set to _blank. Below that, added a second p element with the class publish-date and the text March 7, 2019.

1. Gave the a element a rel attribute set to noreferrer. This omits this information from the HTTP request. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example

1. Below the .author element, created a new div element with the class social-icons. Added five a elements within that new div, and gave them different href attributes.

1. Within each of the new a elements, added an i element and gave them the following classes: the first i element has the class fab fa-facebook-f, the second i element has the class fab fa-twitter, the third i element has the class fab fa-instagram, the fourth i element has the class fab fa-linkedin-in, the fifth i element has the class fab fa-youtube.

Thanks for reading. Will Continue tomorrow.