CSE 154

Section 2: Wireframing and Intro to CSS

Agenda

  • QuickCheck
  • Wireframing
  • Introduction to CSS
  • Demo GitGrade Submission

QuickCheck!

A no-stakes way for you to check in with yourself.

Exercise 1: Wireframing

Programming is always easier when you've got a plan! For this exercise we will be collaborating to create a wireframe for this website.

A wireframe is a way to represent what you want a website to look like before you start coding it. You will want to annotate it with things like colors, possible links, images, and other features you want to add to it.

A good wireframe might look something like this:

Wireframes sketched in a notebook

Source: https://www.flickr.com/photos/148443584@N05/33875203552

Exercise 2: Styling our about.html page with style.css

Cascading Style Sheets (CSS): <link> 

<head>
...
  <link href="filename" rel="stylesheet" />
...
</head>

HTML (template)

<link href="style.css" rel="stylesheet" />

HTML (example)

CSS describes the appearance and layout of information on a web page (as opposed to HTML, which describes the structure for content)

Basic CSS Rule Syntax

selector {
  property: value;
  property: value;
  ...
  property: value;
}

CSS (template)

p {
  color: red;
  font-family: sans-serif;
}

CSS (example)

Demo: What Rules Should We Apply To about.html?

MDN has a great list of CSS properties to look through!
Beware, it is a bit long.

linter-stylelint package

  1. Install linter-stylelint in the Atom settings.
  2. Run the command
    curl https://courses.cs.washington.edu/courses/cse154/19au/resources/assets/.stylelintrc.json -o .stylelintrc.json INSIDE THE PROJECT DIRECTORY
  3. Get live feedback as you code!

Example Output:

example of output

CSS Redundancy Checker

There should not be any repeated rules in your CSS file. Instead, they should be factored out into grouped selectors. We have a handy CSS Redundancy Checker that can help you spot repeated rules in your code.

Google Fonts:

There are several ways you can import your desired font from Google Fonts

  • Import using the link tag in the head of your HTML
  • Import using the @import() in the CSS
  • DO NOT place the @import() in a style tag in the HTML

Exercise 3: CSS Stands For...?

Given the following HTML, what HTML and CSS would be necessary to produce the expected output below? (You can download the HTML here). 


          <h1>CSS: Corgis, Short &amp; Sweet</h1>

HTML

CSS: Corgis, Short & Sweet

output

  • The "CSS" text is green, underlined and 40pt font.
  • Both "Short" and "Sweet" have a cursive font type.
  • Any text that is not green/purple has a color of #444.
  • The "short" text is all lower-case and has a font-size of 14pt.
  • The "Sweet" text is purple and italicized.

Note: you may add <span> tags as appropriate to get the desired output.

Solution:


                

                  CSS: Corgis,
                  Short &amp;
                  Sweet

HTML

h1 {
color: #444;
}

#css-abbr {
color: green;
font-size: 40pt;
text-decoration: underline;
}

#short, #sweet {
font-family: cursive;
}

#short {
font-size: 14pt;
text-transform: lowercase;
}

#sweet {
color: purple;
font-style: italic;
}

CSS

Exercise 4: GOT Selectors

Directions: Use the given HTML code and CSS selector tool on the slide below to improve your skills in CSS selectors! 


<!DOCTYPE html>
<html>
  <head><title>GOT FTW</title></head>
  <body>
  <h1>Game of Thrones Page</h1>
  <div id="intro">
    <h2>Introduction</h2>
    <p>Game of Thrones is the best series ever!</p>
  </div>
  <div id="content">
    <div class="bordered">
      <p>
        There are five books: A Game of Thrones, A Clash of Kings, a Storm of Swords, a Feast for Crows, and a Dance with Dragons.
      </p>
    </div>
    <h2>Houses</h2>
    <ul>
      <li>House Stark</li>
      <li>House Targaryen</li>
      <li>House Lannister</li>
      <li>House Tully</li>
    </ul>
    <h2>Plot</h2>
    <p>It's too long to describe. Just read the books!</p>
  </div>
  <div id="footer">
    <h2 class="bordered">Thank you!</h2>
  </div>
  </body>
</html>

HTML

Write a CSS selector here for:

  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements inside content and footer
  5. p elements inside content
  6. p elements directly inside content
  7. elements with class bordered
  8. h2 elements with class bordered

GOT Selectors: Solutions

  1. all h2 elementsh2
  2. element with ID intro#intro
  3. h2 elements inside intro#intro h2
  4. h2 elements inside content, footer#content h2, #footer h2
  5. p elements inside content#content p
  6. p elements directly inside content#content > p
  7. elements with class bordered.bordered
  8. h2 elements with class borderedh2.bordered

Demo: Submitting CP1 on GitGrade

Note: You should re-submit once you've finished all the requirements by Wednesday at 11PM!

  • You have 2 late days in total and can use up to 2 on an assignment.
  • All CPS have a late day challenge, which, if completed successfully, get you an extra late day!

Steps to follow when submitting an assignment

  1. Check your code in the validators to catch HTML errors and use the CSS redundancy checker to ensure there are no duplicate rules
  2. git add, commit and push the files
  3. Go to your gitlab repository and make sure your submission is uploaded and passes the linter.
    • look for the green check mark!
  4. Go to the course website page with the assignment and hit the "turn in" button.
  5. Turn in the assignment on that page. (this can be done multiple times. We will grade the most recent one)