I teach a website design class, where students learn to code HTML5 and CSS3 in Notepad (basic text document) before learning how to navigate Dreamweaver.
Below is a list of resources for students as they complete their website. To see the code, right-click on the webpage and "view source" or "view page source" to see the HTML file.
To see the CSS file, click the linked CSS file in the
head section, or type the file name in your browser URL space (e.g., http://www.klandreville.com/gallery1.css). Have fun! Contact me if you have any questions.
- Slideshow Example 1: Automatic slideshow with no captions
- Slideshow Example 2: Automatic slideshow with captions and play/pause buttons, very complicated code
- Slideshow Example 3: Automatic slideshow with captions when you hover
- Slideshow Example 4: Automatic slideshow with captions all the time
- Photo Gallery Example 1: Three photos (300px by 300px) with a box shadow and captions when you hover
- Photo Gallery Example 2: Four photos (200px by 200px) with a box shadow and captions when you hover
- Photo Gallery Example 3: Four photos (200px by 200px) with no box shadows and with captions when you hover
Dropdown Menu Navigation
Dropdown menu navigation is very helpful when there are multiple pages that fall under an umbrella category. Check out the example here, and also see my code for this webpage to see how to do three-tier dropdown menus.
CSS3 Transform Example
CSS3 and HTML5 allow us to create dynamic content and movement. Check out the example here.