Week 2: February 4: Box Model + CSS

2/4 Itinerary

  • Setting up Rutgers Site
  • HTML/CSS Manifesto
  • Accessing Offline
  • Project 1 – Portfolio
  • HTML5 Methods – Header/Nav/Main/Section/Article/Footer
  • IDs + Classes
  • CSS Box Model
  • CSS Painting
  • Text Adjustments & Google Fonts
  • Artist Sites
  • Reading Discussion
  • Color Swatches
  • Hover Interactions + Links
  • Studio – 2:50PM – 3:50PM

Setting up Portfolio/Rutgers Site

Today we are going to take a step back and begin by setting up our servers on the Rutgers www page. We’ll be using this as the basis for our work for the rest of the semester and this first project. Inside your www folder, create a file structure that looks like what I have inside the www folder.
CMD + Shift + N will create a new folder, make sure to use lowercase and no spaces when titling your folders

  1. Create a folder titled projects 
  2. Create another folder titled assets
    1. inside of this folder create 3 more folders
      1. css 
      2. imgs
      3. js

 
To create the index.html, open up Brackets and Go to File > Open Folder, navigate to your www folder and select open. This will place the whole folder as the structure for your brackets work, and it will be easier to navigate and add files directly to the folder.

Alternatively, you can drag and drop the www folder directly into the sidebar of Brackets and it will open up the folder automatically.  Now when you create a new file it will automatically be added to that file structure.

Basic structure of HTML File

Basic structure, feel free to copy this into your file.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>ExampleTitle</title>
</head>
<body>
</body>
</html>

Notice we are missing a few things, such as the link to a css page. To link to a css page, we have to create one to link to.

Go to File > New

Save this file inside your css folder – title it styles.css

Notice that because we set the example folder we are currently working in (for you this will be the www folder), we now see styles.css in our css folder in the side bar

Now we can go back and link to our styles.css file in the index.html. Brackets will auto generate the file path for us.

<link rel=”stylesheet” href=”assets/css/styles.css”>


Now when I make a change inside the styles.css file, it will be shown on the webpage. Click the lightning bolt in the upper right corner of Brackets to preview a live version of your page.
In this example, I changed the body element to have a background color of goldenrod.

body { background-color:goldenrod; }

Sometimes the changes in the page happen immediately, sometimes you have to save first: CMD + S. And sometimes you have to refresh the page to see changes appear.

Over the weekend you all worked on the HTML Manifesto. I want you to bring this folder into the projects folder so that we can create a link to it on your page.  Copy and paste the folder into your projects page first using Finder. It will then appear inside the projects folder in Brackets.

We then want to create a link to the manifesto.html by creating an anchor tag.
My file path, which Brackets will assist with completing the file path in the href will be:
<a href="projects/ManifestoTemplate/manifesto.html">Manifesto</a>

A link will be created inside your page, and your site should go to the manifesto page once the link is clicked. Since you already had the CSS file attached to the Manifesto – the styling you did should already be applied!

Lets take a look at your Manifesto!

  1. Create a link on your HTML MANIFESTO to go back to your home page.
    1. You will have to use ../ in order to go back up a level when linking locally
    2. My code looks like this:
      <a href="../../index.html">Home</a>
  2. Now, do the same process with the HTML file you created over the weekend which links to the best and worst portfolio pages you found. Place the myprefs.html inside your projects folder and create a link to it on your home page.  Also create a link to go back to your home page. We’ll look at these later on in class today.

Cyberduck – Access to the server from home

Download Cyberduck.
  • Press Open Connection in the top left.
  • Select WebDAV (HTTPS) from the dropdown. (By default its FTP)
  • Fill out the server as artfiles.rutgers.edu and the port as 5006 log in with your username and password, the same you use for the logins on the computers in the lab.
  • At home, connect as described above. Download the folders by either right clicking on them or dragging them to your desktop. Work locally on those files. When you’re ready, re-upload the files by dragging them into Cyberduck. You will be asked if you want to overwrite your file – yes you do, but make sure you’re overwriting the correct file in the correct directory.
  • To check if it worked, log on to your url

HTML Sections

Learning to divide up your HTML into readable sections is really important for accessibility and organization. It allows search engines to identify the correct web page content.
w3Schools Semantic Elements

HTML5 Semantic Elements

<header> – usually at the top of your page, contains title and navigation – only one per page
<nav> – used for navigation between pages, links – can have multiple
<main> the main content will go inside here – usually just one per page
<section> – generic section of document, usually have a heading, can have multiple on a page
<aside> – can be more information, also links to another section/page.
<article>  – independent content, usually have a heading, can have multiple
<footer> – usually at the bottom, can contain links or navs or copyright, only one per page

<div> – very helpful for styling. Semantically do not mean anything.

CSS Lecture/Reference

CSS Reference

Inspector

The inspector is a tool that allows us to both look at and debug pages. Inside Chrome, right click and select Inspect.

It will open up a temporary window on your screen, usually on the side. Mine is set to the bottom.

In here, you can see all the CSS and HTML for the page, and select specific elements using the magnifying glass. This is a great tool to use to look at sites close up and learn specific techniques. It also allows you to change the content temporarily in your browser.

Eg altering the background color of this button:

CSS Painting

Using one of these two paintings by Sean Scully, create a similar composition using CSS divs, sections, and background colors. 20 minutes.

Related image       or     

  1. Create a new folder inside your projects folder: css-painting
    1. Inside this folder make an html file: painting.html
    2. Inside this folder make a css file: painting-styles.css
    3. Set up your html file and link it to the painting-styles.css
  2. Use classes on your divs to make it easier for you to arrange the colors.
    1. Hint: You will most likely need one set of divs inside another set of divs.
  3. Remember – block elements stack on top of each other and inline-blocks stack next to each other
  4. Make sure there is a link back to your home page
  5. Extra: use :hover in your CSS to create a more exciting (and weird?) interaction.

Color-Swatches

In this mini-project you will create a themed page containing your favorite five color swatches. I will demo how to do this briefly, but follow the instructions below after I finish.

Color swatch Template

Parameters

  1. Choose five colors and their hex codes. Use Adobe Kuler to find these colors. You can also use the import image to select colors based on an image.
  2. Create a new folder inside your projects folder: color-swatch
    1. Inside this folder make an html file: color-swatch.html
    2. Inside this folder make a css file: color-swatch-styles.css
    3. Set up your html file and link it to the color-swatch-styles.css
  3. Create a <header> that uses and <h1> tag for your title and <p> tag for your name.
    1. Center each of these using text-align:center; in css
  4. Create five <sections>, each one should have the same class and an individual id. The class will allow you to style each section the same, and the id will allow you to change the specific color.
  5. Each section will have an <h2> and a <p> tag.
    1. The <h2> tells us the name of the color – make it up!
    2. The <p> tag tells us the hex code.
  6. Make all of the color swatches be 200px wide x 500px tall. Hint: Use the class of the section!
    1. Round the corners of each section using: border-radius
  7. Use the unique ID tag you gave each swatch to change the color of each one in css.
    1. Hint: Use the # to access a specific ID tag.
  8. Center all of the swatches on the page. I recommend using display:flex like I will show during the demonstration.
    1. Hint: You will have to create a one container around all of your sections in order for them to be activated by flex.
  9. Use a google font to change the styling
  10. Make it look good!
  11. When you are finished link this page on your main page: index.html
    1. And make sure there is a link on the color swatch page that goes back to your index.html page.
  12. Bonus: Feature a background image that shows off the color swatches.

Extra note: Box Sizing

Within the box model, the border and padding add to the size of the box. This can become annoying when we want to keep the size of the boxes inside a larger form so we can maintain relational sizes. It’s also slightly more intuitive. For more in-depth examples and history – check this out: History of Box-Sizing

I’d recommend adding the code below to your CSS pages during the semester.

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Homework

  • Come to class with your portfolio site setup and located on your Rutgers personal server
    • You should have the HTML complete with correct linking between pages
      • This includes:
        • About page
          • Details about you
        • Contact Page
        • Current Projects page
          • Links to each current project
        • Past Projects page
          • Include your images
        • Home Page
        • Consistent Navigation Menu between each page
        • Footer
    • Have basic styling applied. You will have studio time to work on this in-class, but you need to come prepared with questions/issues
    • Make sure you have the images/projects selected to showcase from your previous work.
    • Collect 10 Maxims – You’ll be using these in class next Monday
    • Complete Color Swatch activity and add it to your list of ongoing projects
  • Post 6 images to Are.na
  • Lev Manovich reading from last week ( in case you haven’t done it yet) – come with one question about it.
  • Optional: CSS Flexbox Tutorial – Flexbox Froggy