Design Tutorial

Learn how to build a website from the scratch, using nothing but HTML and CSS.

This Tutorial takes a modern approach to HTML and CSS, and may implement features, which isn't supported by older browsers. Use the HTML and CSS Tutorial together with the relevant References, linked in the Reference section on this page.

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 your self started, begin by reading the Tutorials, and as you advance you may continue reading From the Layout and Technical sections.

Hosting

Custom HTML and CSS is supported by most web hosting companies, also providing FTP access to your hosting space.

Some may even provide, usually not-to-be-recommended WYSIWYG tools, which can help you build your website.

If you are looking to build your own website, you'll be needing to find a hosting provider. You can try looking for a cheap dedicated server hosting, where you can have full control over the server provided to you by the hosting company. Including the free choice of Operating System, Access control, Hardware and etc.

However if you think a dedicated server would be too much for your budget and website needs, you always have the option to look for a shared hosting service. Of course there will be slight difference because your site will be sitting on a shared server with some other sites. If you'd like to know more about shared web hosting, or what type of server would be best for you and your site, it's always best to read some reviews and recommendations first, before deciding which host to choose.

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 Reference
  2. HTML Reference
  3. Color Reference
  4. Special characters in HTML
  5. The manifest file

Etc...

  1. Ditch support for Old Browsers
  2. Web Designers Tools List
  3. The Robots.txt Tutorial

Visions

  1. Article, Section, Header and Footer.

Sources and Links

These sites are not related to Brugbart.

  1. The WHATWG Specification - WHATWG

Links

  1. BlueBoden's Blog

  2. Broadcasting Service