GRC 338: Assignments

CSS style: mobile first

I’m providing the structure for a webpage and your job is to style to as close as possible to the screenshots below:

I also included a placeholder image. You need to replace it with an appropriate image.

For this assignment, the goal is to make it look good on smartphone only. You don’t need to worry about tablets, laptops, and desktops. (We will work on it next week.)

Whatever you do, though, you may not edit the HTML file at all.

Publish your pages on the URL: username.github.io/grc338/css-mobile-first

Set up

1. Download this zip file.

2. Unzip the file. It contains one HTML file, one image, and one CSS file.

3. Open the CSS in VS Code (or your text editor of choice).

Tasks

1. Replace the image, without changing the HTML file. (Rename the other image.)

2. Write your CSS to make it look like my screenshot.

3. Check the list of mistakes to avoid.

4. Work offline on your CSS file, until you found a solution that you’re happy with, but don’t change the HTML file.

CSS properties for the fonts in the document

To use the fonts I’m using on my example, you’ll need to add the font-family, font-weight, and font-style values that are listed below:

Example

If you wanted to use Sutro Light Italic on your paragraph (you don’t), you would need:

    p {  
        font-family: Sutro, serif;  
        font-weight: 300;  
        font-style: italic;  
    }

So don’t copy the example above, but use it as a model to apply the each typeface from the list below to where they belong in your CSS. (Yes, there’s some trial and error involved.)

• Sutro Light Italic

      font-family: Sutro, serif;  
      font-weight: 300;  
      font-style: italic;
  

• Sutro Light

      font-family: Sutro, serif;  
      font-weight: 300;  
      font-style: normal;
  

• Sutro Bold

      font-family: Sutro, serif;  
      font-weight: 700;  
      font-style: normal;
  

• Sutro Bold Italic

      font-family: Sutro, serif;  
      font-weight: 700;  
      font-style: italic;
  

• Poppins Italic

      font-family: poppins, sans-serif;  
      font-weight: 400;  
      font-style: italic;
  

• Poppins Regular

      font-family: poppins, sans-serif;  
      font-weight: 400;  
      font-style: normal;
  

• Poppins Bold Italic

      font-family: poppins, sans-serif;  
      font-weight: 700;  
      font-style: italic;
  

• Poppins Bold

      font-family: poppins, sans-serif;  
      font-weight: 700;  
      font-style: normal;
  

Evaluation

You’ll be evaluated on your technical skills using CSS.

Tips

1. Remember, it’s smartphone only. Don’t worry about wider screens.

2. You don’t need to make the content narrow for mobile. Make the browser window narrow instead.

3. Do not change the HTML file for any reason! Not one bit!!!

4. Always make sure to avoid the most common mistakes

Submission

1. You don’t have to submit anything on Canvas.

2. Got to your public repository on GitHub, and open a new folder named grc338/css-mobile-first/. (Always copy and paste.) ➤

3. Create a new index.html file and commit. ➤

4. Upload all three files (index.html, lasagnastyle.css, and lasagna.jpg) to your GitHub repository. ➤

5. Click on your name to check if it’s working.

6. Open the same link on your phone to check it again.

Check canvas for deadlines.