In-Class Exercises (Labs)
During the next few classes we will be getting to know how HTML and CSS work in the Browser through a series of short exercises. Below is a checklist for you as you move through each one.
Thursday, Oct 6
In Class Lab: Continue to explore Design Experimentation with Positioning, Different Selectors (Classes and ID’s), and Navigation (traditional and “anchor tags”).
1. Explore working with adding “Positioning” properties to your CSS, including: position: relative, position: fixed, position: absolute.
2. Explore using the “Display” property, i.e. display: block, display: inline, display: inline-block, display: none. Put elements in <div>’s and other containers, and explore what happens as you change their positioning.
Tuesday, Oct 4
In Class Lab: Explore Design Experimentation with Positioning, Different Selectors (Classes and ID’s), and Navigation (traditional and “anchor tags”).
1. Explore working with adding “Positioning” properties to your CSS, including: position: relative, position: fixed, position: absolute.
2. Explore using the “Display” property, i.e. display: block, display: inline, display: inline-block, display: none. Put elements in <div>’s and other containers, and explore what happens as you change their positioning.
——————————
Thursday, Sep 22
Lecture: Intro to Code
In Class Lab: An HTML Page
1. Create an HTML Page
(basic HTML page structure)
2. Add some content
3. Add a hyperlink
4. Add an image tag <img>
(“Self-closing” tag)
—
Resources:
W3Schools
HTML Cheat Sheet
CSS Cheat Sheet
Other links on our class Site
——————————
Tuesday, Sep 27
In Class Lab: HTML Styling with CSS Formatting
1. Add an image and make it a link
2. Explore adding various tag’s to your HTML content structure, such as <h1>, <h2>, <p>, <img> and see how they behave.
3. Add a “Comment” to your HTML, such as a note.
4. Try adding some “inline styles” to your HTML, using such tags as:
<b>
<em>
<img>
5. Once you get the hang of this, then try adding an “embedded” or “internal” style sheet within your HTML structure. Do this within a <style> section in the <head> of your HTML file. Try styling the <html> or <h1> or <body> tags.
6. Take the styles you wrote in the embedded stylesheet (above), and place in its own stylesheet.css file. To link this up to your HTML, add the <link> to the stylesheet and put this in the <head> section of your HTML.
7. Add content to the other Pages to familiarize yourself with the overall structure.
—
Resources:
W3Schools
HTML Cheat Sheet
CSS Cheat Sheet
Other links on our class Site
——————————
Thursday, Sep 29
In Class Lab: HTML Styling with CSS Formatting
1. Look at a basic Navigational structure, based on using a list – a simple website!
See how the CSS changes not only the Style, but also the Functionality. (See Code sample)
2. Build a basic HTML index page, and then link a CSS Stylesheet.
– Create a list and turn it into a navigation with at least 4 elements
– Create a page with several divs, play around with positioning.
Recent Posts
