By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Webdesign Tutorial

Learn the basics of webdesign in this tutorial.

Edited: 2015-08-04 02:13

This Tutorial takes a modern approach to HTML and CSS in web design, by teaching you to use the languages the way they are supposed to be used – combined as one. In these articles we may implement features that isn't supported by older browsers such as IE6 – we recommend that you ditch support for such browsers.

All you need to get started, is a text-editor, with the capability to save and edit HTML files. Basically you can use any text editor to do this, but you should avoid using programs such as Microsoft Word, since they might add their own code to the files.

To get yourself started, begin by reading the Tutorials, and as you advance you may continue reading From the Layout and Technical sections.

Tutorials

  1. An Introduction to HTML
  2. An Introduction to CSS
  3. Paragraphs and Headings
  4. Semantic elements of HTML
  5. Images and Links
  6. Tables
  7. Using SPAN and DIV for Layout

Technical

  1. Absolute and Relative Paths
  2. Creating and using Favicons
  3. CSS Sprites
  4. About White Space / Non Breaking Spaces
  5. IDs and Named Anchors

Layout

  1. CSS Selectors for Beginners
  2. How to Center a Website or Element
  3. Applying Backgrounds
  4. Hover effects on links
  5. Creating Buttons with CSS
  6. How to make CSS Drop-down menus
  7. Display table and table-cell Tutorial
  8. How to make a CSS Image Gallery

References

  1. CSS Properties
  2. HTML Elements
  3. HTML Global Attributes
  4. Color Reference
  5. Special characters in HTML
  6. The manifest file

Etc...

  1. Ditch support for Old Browsers
  2. Web Designers Tools List
  3. The Robots.txt Tutorial
  4. The difference between PNG8, PNG24 and PNG32

Visions

  1. Article, Section, Header and Footer.

Sources and Links

  1. The WHATWG Specification - WHATWG