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
- p
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!
- Create a link on your HTML MANIFESTO to go back to your home page.
- You will have to use
../
in order to go back up a level when linking locally - My code looks like this:
<a href="../../index.html">Home</a>
- You will have to use
- 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
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
<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
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.
or
- Create a new folder inside your projects folder: css-painting
- Inside this folder make an html file:
painting.html
- Inside this folder make a css file:
painting-styles.css
- Set up your html file and link it to the
painting-styles.css
- Inside this folder make an html file:
- Use classes on your divs to make it easier for you to arrange the colors.
- Hint: You will most likely need one set of divs inside another set of divs.
- Remember – block elements stack on top of each other and inline-blocks stack next to each other
- Make sure there is a link back to your home page
- 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.
Parameters
- 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.
- Create a new folder inside your projects folder: color-swatch
- Inside this folder make an html file:
color-swatch.html
- Inside this folder make a css file:
color-swatch-styles.css
- Set up your html file and link it to the
color-swatch-styles.css
- Inside this folder make an html file:
- Create a <header> that uses and <h1> tag for your title and <p> tag for your name.
- Center each of these using text-align:center; in css
- 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.
- Each section will have an <h2> and a <p> tag.
- The <h2> tells us the name of the color – make it up!
- The <p> tag tells us the hex code.
- Make all of the color swatches be 200px wide x 500px tall. Hint: Use the class of the section!
- Round the corners of each section using: border-radius
- Use the unique ID tag you gave each swatch to change the color of each one in css.
- Hint: Use the # to access a specific ID tag.
- Center all of the swatches on the page. I recommend using display:flex like I will show during the demonstration.
- Hint: You will have to create a one container around all of your sections in order for them to be activated by flex.
- Use a google font to change the styling
- Make it look good!
- When you are finished link this page on your main page: index.html
- And make sure there is a link on the color swatch page that goes back to your index.html page.
- 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
- About page
- This includes:
- 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
- You should have the HTML complete with correct linking between pages
- 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
- Optional: Lynda Flexbox Tutorial
- Optional:Lynda HTML 5 Basics
- Optional: Lynda CSS Training 1
- Optional: Lynda CSS Training 2
- Optional: Lynda CSS Training 3