This repo contains your assignment starter files, including all images.
-
Fork this repo (make sure you are logged into GitHub).
-
Clone your new repo so you have it on your hard drive. Remember to save it into the folder where you are keeping all your projects for this course. Make sure you clone the repo from the GitHub page with YOUR NAME (not macloo) in the URL. Check the browser address bar and make sure you see YOUR NAME in the URL.
-
WATCH where you are putting the cloned repo as you save from GitHub!
-
Use your GitHub app to create a local branch named gh-pages. Switch to that branch and do all your work in that branch. Note that the hyphen and all lowercase letters are essential in the branch name gh-pages. Stay in that branch, and do all your work in that branch.
Refer to this illustrated guide ("How to create a branch in the app") if you need a review of how to create the gh-pages branch.
Font families: Build two very good, very correct font stacks, one for everything and the other only for headings. One stack will be serif, and the other will be sans-serif. You can choose whether headings are serif and everything else is sans-serif, or the opposite. You must include one Google font in EACH stack. The total number of different Google font families used will be two (one Google font will be serif; the other Google font will be sans-serif).
This video shows how to build font stacks correctly.
Choosing Google fonts: Another video.
Grid layout using grid areas: Use CSS grid properties to layout the wide version of index.html to match this first example. There are instructions about this below.
Responsive web design: After you have solved the wide layout, write one media query in the same CSS file to style the small-screen version to match this second example. There are instructions about this below.
You will change only two files for this assignment.
You will need to add exactly one element inside the <head>. This element is required for using Google fonts. See the Choosing Google fonts video for guidance. The exact location of the added element is important.
Other than adding that one element to the <head>, DO NOT CHANGE ANYTHING in this file!
Familiarize yourself with the file. You should understand all the CSS rules here and what they do. If not, ask!
You will add many things to this CSS file. Do not change or delete any line that has a /* keep */ comment at the end.
You will add one media query at the bottom of the CSS file. That will be necessary to make the page responsive.
Remember to work only inside your gh-pages branch. You will edit the existing files index.html and main.css. Only those. Nothing else.
Please follow the steps IN ORDER, and do one part at a time.
Before you begin, be sure to read Robbins chapter 12 and watch the video about choosing Google fonts.
You need to understand all the requirements of a font stack to do this assignment correctly. The order of fonts is important.
VERY IMPORTANT REQUIREMENT: DO NOT use any Google font that is used in the Google fonts video. Four Google fonts are used in the video. There will be a high penalty for using even one of those four fonts.
-
Following the procedures shown in the video, choose two Google font families: one is for all the headings on the page, and the other is for everything else. Make sure they both look good together and are not too similar to each other. Make sure the one used in paragraphs has good readability at a small size.
-
You may choose: (1) either your headings are all serif fonts, and everything else is sans-serif, or (2) the opposite, your headings are all sans-serif fonts, and everything else is serif. PAY ATTENTION to serif and sans-serif, and NEVER MIX them together in a single font stack.
-
Add the appropriate element to the HTML
<head>element for your Google fonts. -
Edit the two existing font-family declarations in the CSS file to include your Google fonts.
-
Add at least one other common font family to each of those declarations, and make sure it is a suitable companion to the Google font you have named. Note that you might need to add two, because a common font on Windows is not always a common font on Mac, and vice versa. You will have to LOOK UP common font families — don't just guess. You will lose points if you make bad choices. This is demonstrated in the video about font stacks.
-
Add the correct generic at the END of each declaration. Make sure you are choosing the best one to match the fonts preceding it in the declaration. Generics are covered in your book (chapter 12) and in the font stacks video.
Test your page for all the font options by deleting, saving and reloading — as many times as needed.
TIP: When you're selecting a font for the operating system you don't have (Mac or Windows), you can look it up on Wikipedia to see an image of how it looks. Not on Wikipedia? Then is it really a common font?
In the starter CSS and HTML, grid areas are already set up for you. The initial layout looks like this — it is a 5-column, 2-row grid.
Using grid areas, you will change the CSS so that the layout matches this first example.
IMPORTANT: Your fonts will look different from those in the example.
Grid areas are covered in Robbins, pages 458-459 ("Defining grid areas") and 465-466 ("Positioning by area"). Using the area names, you can easily change the position of an item and the number of grid cells that it spans.
I am requiring you to use grid areas in this assignment.
NOTE: We do NOT use grid-row-start or grid-column-start when we use grid areas.
-
Follow the screen capture shown in the example to arrange all 10 grid items. Your first job is to get everything in the right position to match that image. You will CHANGE the number of rows and the number of columns in the starter CSS:
grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, auto); -
Do NOT use pixels (
px) in thegrid-template-columnsorgrid-template-rowsvalues. Try to use only the gridfrunit orauto; you may use%if you find it easier, but I thinkfrwill be better. -
You will CHANGE the lines below
grid-template-areas:to create your layout. Remember, any grid item may span more than one column and/or more than one row.grid-template-areas: "header arial georgia pairing bobwhite-quail" "readability line-length helvetica typeface footer"; -
After you have the positions of all grid items (view in your browser and compare to the example), you will need to adjust
paddingand (much more rarely)marginon various grid items to make them match the example. Do not let text crowd against the left or right edges of anything adjacent to the text. -
You will also need to make changes to
font-sizefor some grid items. In some cases, you will also need to specifyline-height. It is understood that your fonts will look different from those in the example. Some grid items have larger text than others — that is what you're looking for and adjusting to match. -
In the
typefacegrid item, you are expected to usetext-shadowto make the appearance match the example. It is understood that your fonts will look different from those in the example.
Before you begin Part 3, everything in the page should match the example when you view index.html in Chrome. It is understood that your fonts will look different from those in the example.
There are two ways to design a page initially. One is to design it for a wide screen, a desktop monitor, and then use media queries to adapt it to small screens. The other way is to design for mobile (small) first, and then use media queries to adapt it to wider screens.
This assignment requires you to take the first approach, even though "mobile first" is the preferred method nowadays. Therefore, your media query in this assignment must adapt the design to look good on small screens. The reason is that I think the first part (wide screen design) will be harder for you, so do the hard part first, and the easy part second.
The video CSS media queries and responsive web design is strongly recommended. In the second half of the video, a grid example is demonstrated. NOTE: The first part of the video helps explain how to write a media query. The later part of the video is exactly about grid.
-
The viewport
metaelement has already been added to the<head>in the HTML file. -
At the bottom of the CSS file, write a media query for
screenwith one breakpoint (see Robbins chapter 17 and the video). The breakpoint will indicate the width at which the page changes. Choosing a good number for this breakpoint is part of your assignment. DO NOT choose the width of a specific device. Use the Chrome Developer Tools to find a suitable breakpoint measured in pixels (px). This 4-minute video demonstrates exactly how to do that. -
In that media query, specify any changes that are needed to make the page look like the small-screen example (your fonts will be different). You will certainly change values for
grid-template-columns,grid-template-rowsandgrid-template-areas. To grade this, we will view your page in Chrome with Device Mode set to iPhone 6/7/8. -
Changes must also be made in the media query to
paddingfor most grid items. -
The graphic at the top of the page (in the
header) becomes unreadable at a small size, so it makes sense to hide it. HINT: Use the display property to hide something. Look it up. -
There should be no need to change
font-sizeorline-heightfor any grid item in the media query. -
Do not include any lines in the media query that are not needed. For example, you are not changing any background color. Therefore, no
backgroundproperty should appear anywhere in the media query.
In Chrome, you will test your page for different device sizes using the Developer Tools (View menu > Developer > Developer Tools). YOU ARE supposed to use CHROME. At 1:25 in this 4-minute video, you will see exactly how to test for device sizes.
When everything is finished, save both files, commit and push (or publish, the first time you publish the branch) to GitHub. Be sure to stay in your gh-pages branch for all steps. DO NOT forget to publish/push your repo after you have carefully checked your work!
Be sure to check the rubric and SUBMIT THE URL of your GitHub repo in Canvas to complete this assignment.
Note that the rubric covers each one of the three sections in these instructions:
- Part 1: Font families and Google fonts
- Part 2: Grid layout using grid areas
- Part 3: Responsive web design