Hello!
Use this page as reference for presentations, exercises and handouts.
Making your first webpage (your practice file)
- Create a folder in Dropbox with your name for your Code with me work
- Inside your folder, create a folder called "practice"
- Inside the "practice" folder, create a file called "index.html"
- Open the file in a text editor, and write your name in it. Save the file.
- Open the file in your browser. You just made and viewed your first web page!
Exercise 2. Playing with the inspector
Open a website, like oregonlive.com or your own news site, and inspect it by right-clicking a page of the page and click "Inspect Element." Try things like highlighting different elements; deleting elements; and moving elements around.
Practice file: Writing HTML
- Write an HTML page in your practice file. In the "index.html" you made earlier, build a page using the <html>, <head>, <title>, <body> tags.
- Practice writing some HTML tags. Such as: <h1>, <h2>, <h3>, <p>, <img>, <a>, <ul> and comments.
Exercise 3. Format an article with HTML
Create a folder called "onion", and paste the text below into a new HTML page in that folder.
Lesson 3-'oops'
Troubleshooting HTML
Exercise 3b. Fix this HTML page
Someone messed up this webpage! Paste the HTML code below into a new HTML page, and fix the errors.
Practice file: Writing CSS
Try using CSS to style the contents of your practice file. In your "practice" folder, create a "css" folder and, and a "styles.css" file inside of it. Lastly, link that CSS file from the HTML file: <link rel="stylesheet" href="css/styles.css" />
- Try using these CSS properties to style your content: color, font-family, font-size.
- Try looking up and using the CSS properties to underline, bold and italicize text.
Exercise 4. Style the Onion article with CSS
Using the Onion article you formatted earlier, create an external CSS file that does the following. If you don't know or remember the syntax of a property, practice looking it up!
- Make the main headline dark green.
- Use the font family "Georgia" for the main headline and the subheadline.
- Center the text of the main headline and the subheadline.
- Make the paragraphs have a line height of 19 pixels.
- Remove the underline from the links.
- Make the "You might also like" label all uppercase.
- Bonus: Make an underline appear when you hover over a link.
Practice file: Writing CSS classes
Give CSS classes a shot in your practice file! Follow these steps to victory:
- Think of a descriptive name for your class, like "intro" or "awesome" or "gigantic".
- In your HTML file, add that class to a paragraph or another element by adding class="intro" to the opening tag of that element.
- In your CSS file, write a rule for that class, beginning with .intro { ... }.
If you need an example, look the three tabs:
Exercise 5. Design it Twitter-style
Your goal is to take the HTML at the end of this exercise and use CSS, including classes, to make it look like the image below. (The HTML tags already have classes written for you.)
Create a "twitter" folder, and paste the HTML below into a new HTML file. Then, create a "css" folder with a "styles.css" file inside.
Hint: Need some help? Keep reading. There's some starter CSS in the tab below. Also, these are the CSS rules you'll need to write:
- Write a CSS rule for the "realname" class that makes the color "#333333"
- Make the "username" class gray and not bold
- Make the "maintext" class a font size of 18 pixels
- Make the "mention" class (which is a link that mentions another Twitter user) bold
- Make the "date" class gray
- Make all the links have the color "#008AB9"
- Make all of the text Arial or another sans-serif font
The project
Past student work
- Interactive: A Frank Lloyd Wright classic
- Where Does U.S. Military Aid Go?
- Renewable Energy Resources in the United States
- How does the Jordan Bridge compare to...
Work with your mentor:
- Talk about your idea
- Sketch a design
- Mark your content up with HTML
Sample timeline: codewithme.us/project
A simple float
Using the HTML below, do the following
- For the first part, make the image float to the left of the text.
- For the second part, make the two columns of text float side-by-side.
First part:
Second part:
Making an infographic with floats
Harness the power of floats by creating an infographic. Take the HTML below and style the elements and classes to match the graphic below. Click the image to see a bigger version.
Done early?
Learn more about how the box model works by checking out the box model flipbook, and by playing Box Model Ninja!
Box model flipbook
Let width, border, padding and margin explain themselves to you. Check it out!
Be a box model ninja!
Think you understand how the box model works? Or just completely confused? Try out our game, Box Model Ninja, to understand the parts of the box model.
Lesson 8
Paper code
Assemble the code!
Exercise 9. Create a before and after graphic
Using the fade skills you've learned, let's make a simple before and after graphic.
Create a new folder, and copy the HTML, CSS and JavaScript below into their own separate files:
- index.html
- css/styles.css
- js/script.js
Change the jQuery so that when you click the image on the page, it disappears, leaving only the background image showing.
What we did together during the presentation
- Find the jquery folder in your Dropbox.
- Open up index.html and styles.css in your text editor
- Create your JavaScript file. In the "js" folder within the "jQuery" folder, create a file called "script.js"
- Search for jQuery. Google "jquery google", click on the first link, and copy the HTML snippet that looks like this: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
- Paste that snippet in index.html in your <head>
- Add http: before the // in that snippet
- Include your JavaScript file. In index.html, type this on a new line to include the JavaScript file on your page: <script type="text/javascript" src="js/script.js"></script>