Use this page as reference for presentations, exercises and handouts.
Open a website, like miami.edu 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:
Right-click the boxes below to inspect them. Use the Metrics box in the right-column of the inspector to see the box model in action.
Then, try writing CSS that uses the box model in your practice file. Try properties like margin, border, padding, background-color and width. Look at the CSS tab if you need some inspiration.
Let's take the HTML and CSS you created from the last Twitter exercise, and start refining the design. Open up those files, and let's get rolling!
Using the HTML below, do the following
Using the fade skills you've learned, let's make a simple before and after graphic.
Copy the jQuery snippet below and paste it in script.js. Change it 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