This exercise will take you, in detail, through the building of a mockup for an index page for an imaginary magazine: DTN.
We will use CSS Grid Layout, CSS Positioning, SVG Graphics, Google fonts, translucent background colors and the typical box model properties one uses in all projects.
First, please download the files for the exercise.
When that archive is unzipped, it will be a folder entitled dtn-mag-from-scratch-2018.
Inside that folder is an index.html file, a folder of images, a folder of screenshots, and a file called logos.ai.
If you open the Screenshots folder, select all the images, and then double-click, they will open in the Preview (at least on the Mac). They are as follows:
- FullWidth-RegularMarks
- FullWidth-BonusMarks
- Mobile-RegularMarks
- Mobile-BonusMarks
- MenuMouseOverBonusMark
- Logos-With-Tool-Tip.png
The difference between the BONUS and the REGULAR mark screenshots will be discussed later. We will start, however, with the regular marks tasks, and do the bonus design additions later in the process.
Open the project up in your editor (such as Visual Studio Code), then open up the index.html file.
You will see that there is some bare-bones HTML, plus a bunch of text. Here’s what we need to do.
- Mark up the content with logical and semantic HTML and insert the required images into the document
- Output the logo images from the Illustrator file and insert them into the document
- Make the broad structural layout with CSS
- Fine tune the individual elements
- Turn our attention to the bonus tasks
There are many sections to this exercise. Here is a table of contents. Start with the semantic marking up the document.