Always Learning

Student Resources

HTML & CSS : Level 2

Build on the skills learned in HTML and CSS: Level 1 to develop more advanced web pages. You'll explore additional features for creating web pages, including creating and modifying tables; setting up forms; adding multimedia; validating code and publishing your site. You will learn to apply advanced CSS techniques to enhance the appearance and usability of your website. At the end of this class you will be able to create and style more advanced web pages.

Course objectives

First Session

A quick recap of HTML & CSS Level 1.

home page

Here is my lake image!

Crater Lake

Here is my logo

logo

Here are my social media icons

twitter facebook instagram


Second Session

Working on our index.html!

side nav
Our page with a sub nav

Our images!

ad
ad
ad



Third Session

Creating your third page (our ABOUT page)

Fourth Session

Faux Columns and more!

Learning by troubleshooting... sometimes frustrating, but when we finally find the answer... !!!

faux
Our Faux finally working

Answer
Overflow:hidden! Since both our containers were floating, the area did not exist for the background color to display. Once adding overflow hidden to our wrapper, Viola!!!


Reviewing our sub nav based on hover!

Here is the recording link for our menu based on hover!

Playing with Font Awesome

Font Awesome allows you to use their icons as typography vs images (ie facebook, twitter and instagram). Here are the steps:


Fifth Session

Playing with Tables

tables
Tables

tables
Another Table

tables
HTML Email created in tables

Additional!!!

Browser Compatibility

Max width and Internet Explorer!

Love our max-width property! Use it in websites, usually for my images to fit nicely in their containers!!! In tables, max-width for images work nicely, except in Internet Explorer.

Time to "google search: max-width tables not working in IE."

Found it!

Here is the CSS - Please note the new property:
table-layout:fixed;
and, the width of our image is 100%!

CSS
Our CSS

CSS
Our HTML


Sixth Session

HTML Form

Student Examples of placing their form in a website

form
Fitness Website

form
Bagel Website


Final Classwork

A working form

We will create a working form in a blank html page, using the following form elements:

And most importantly, we will need a formhandler

And access to my server via FTP (Cyberduck or Filezilla or WinSCP

Video Recordings

Video Tag

A great explanation of the three media types


<video controls>
<source src="video/beethoven.mp4" type="video/mp4">
<source src="video/beethoven.ogv" type="video/ogv">
Your browser does not support the video tag.
</video>

Audio


<audio controls>
<source src="audio/terminator.ogg" type="audio/ogg">
<source src="audio/terminator.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>