Use this page as reference for presentations, exercises and handouts.
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.
Create a folder called "onion", and paste the text below into a new HTML page in that folder.
Someone messed up this webpage! Paste the HTML code below into a new HTML page, and fix the errors.
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" />
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!
Give CSS classes a shot in your practice file! Follow these steps to victory:
If you need an example, look the three tabs:
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:
Past student work
Work with your mentor:
Sample timeline: codewithme.us/project
Using the HTML below, do the following
Learn more about how the box model works by checking out the box model flipbook, and by playing Box Model Ninja!
Let width, border, padding and margin explain themselves to you. Check it out!
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.
Using the fade skills you've learned, let's make a simple before and after graphic.
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