Web Design (HTML, CSS, Image Files, Colors)

Getting Started with HTML and CSS

The following pages demonstrate how HTML and CSS work together to create simple web layouts. When viewing the pages, right click and "View Source" so you can copy/paste into your own working document.

Basic Layouts

  • Click here for a simple left nav layout from W3Schools.com.
  • Click here for a simple (no floating) top nav layout from W3Schools.com.
  • Click here for a layout with title and nav on the same line (using CSS float property).
  • Click here for a layout with a fixed titleNav and footer.
    • When an element has fixed positioning (CSS rule), that element is "removed from the normal flow" and placed wherever you specified (top/bottom, right/left) with respect to the edges of the browser window. With fixed elements, various page elements might end up in the same place, so use z-index to control which element you want to be on top. Then apply padding or margin to make sure that (for example) a footer does not cover up the bottom of the content and/or a titleNav does not cover up the top of the content.

Responsive Images, Responsive Design

  • Click here for a responsive image (image width changes proportional to browser width).
  • Click here for another example of responsive images (whole column of responsive images).
  • Click here for an example of responsive design. In addition to having responsive images, when the browser is very narrow, a media query kicks in to change the layout for a mobile device (so that it is a single column).
  • Click here for an example of responsive nav bar. When the browser is very narrow, the nav bar turns into a "hamburger menu" that drops down when you click on it.

Hero Layout

  • Click here for a hero layout (large background image - few words with large font).
  • Click here for more ideas for laying out web pages this way.

Drop Down Menus

Drop down menus used to be made using hover techniques, but since there is no hover on mobile devices, we now use click events on menu headings to hide/show it's drop down elements. The examples below use a "transition" (a CSS rule for the "right" property of the .dropDown class) to provide a little animation - when the drop down menu appears, it enters from the right.

  • Click here for drop down menus (using icons) on a dark title background.
  • Click here for drop down menus (using icons) on a light title background.

Parallax

Parallax in web design means that an image moves at a different rate that other elements on a page. This can sometimes be used to give a feeling of 3 dimension, for example, if a background image moves more slowly than a foreground image. A current trend in web design is to use parallax to have elements move at different rates when the user scrolls up or down. Here are some parallax examples.

  • Click here for a simple parallax demo fixed background-images between text. Scroll up and down to see effect.
  • Click here to see the same parallax demo but with a fixed nav bar (scroll up and down to see effect).
  • Click here to see parallax with text inside the fixed background images (scroll up and down to see effect).

Single Page Design

Single Page Design is where you place several "Virtual Web Pages" inside of one physical web page and you use internal links for navigation.

  • Click here for an example of Single Page Design. This example uses a little jQuery (widely used JavaScript library) to slow down the scroll as you link between virtual pages (provides slight animated effect).

Click here for zip file containing all above code examples

Working With Images

Working With Colors: