Introduction to Website Design Course Gauteng

Learn HTML and CSS with Dreamweaver

HTML and CSS Course Johannesburg – Overview

Build a complete website from start to finish.

Our Introduction to Website Design Course in Gauteng is definitely the course to start with if you want to become a website designer. This HTML & CSS course will teach you everything you need to know on how to design a basic HTML website from scratch. You get hands-on practice working with basic through advanced techniques to get the most out of your experience.  You will learn the basics of coding for web design, beginning with HTML and CSS. We will also supply you with software you can use to code your own websites going forward.

HTML CSS Dreamweaver Course Durban Johannesburg

First we will start by learning the theory behind HTML and all the different tags available to create the structure of our website. Then we will move on to learning all the theory behind CSS and all the properties available to style our website.

You will also learn all about different page layouts and how to create them. We will use the latest techniques in web design staying away from tables for layouts. We will design a complete website in class and also learn how to upload it to the internet. You also receive great course content like books, documentation, resources and all class activity and files at the end of your course.

This is a great HTML and CSS course available in Gauteng. Learn everything you need to know to design a complete 5 page website with gallery and contact form.

09:00am - 14:00pm
Please Contact

Who is this course for?

People new to Web design that desire a deeper understanding of HTML & CSS, and the new standards of web design with Dreamweaver. Anyone wanting to learn how to design a website from start to finish.

Assumed Knowledge

For this Introduction to Web Design Course with HTML and CSS in Johannesburg we will assume little or no prior knowledge of HTML and CSS. You should have a working knowledge of either the Windows or Mac operating system. No previous web design skills required.

What you will Learn

  • All HTML Tags
  • All CSS Properties
  • Planning a Web Site Design
  • Semantics on the web
  • Images and Hyperlinks
  • Working with page structure
  • Page Layout Design and Planning
  • Building Forms with Validation
  • Building a Complete Website
  • Basic Search Engine Optimisation
  • Domain Name and Hosting
  • Uploading your website to the internet with FTP.
  • And much more…

HTML Subjects


  • The World Wide Web
  • Client Side vs. Server Side
  • The web technologies
  • The fundamentals of the web
  • The W3C
  • Web Standards
  • Web Accessibility


  • What is a Browser?
  • Browser Wars
  • Browser Statistics
  • A Modern Browser
  • Cross-Browser compatibility issues
  • Mobile Browsers

The Syntax

  • A self-closing tag.
  • block vs. inline
  • Site Architecture
  • File & Folder Management
  • Site definition
  • Naming conventions
  • Defining assets


  • The Different DOCTYPE’s
  • What is a DOCTYPE
  • Document Object Model
  • HTML5 Default options


  • Adding Meta tags
  • Descriptions and Refresh
  • The Character Set
  • HTML Comments
  • Script Tag


  • Linking to CSS
  • Defining Media type


  • HTML tags & elements
  • Semantics in the language
  • Page Structure
  • Headings & Paragraphs

Semantic Tags

  • Lists
  • Nested Lists
  • Data Types and Definitions
  • Special Characters
  • adding title attribute
  • using < address >
  • cite, dfn, var, abbr
  • and it’s semantics
  • code, kbd, samp and pre
  • Quoting in HTML
  • bold, strong, italic and emphasis

Web Images

  • GIF vs JPEG vs PNG
  • What the future holds
  • SVG and Canvas
  • When to use what image format?
  • Image attributes
  • Alternate text for Accessibility
  • Figure Captioning


  • The anchor tag
  • Jump links to an ID
  • relative & absolute links
  • server side relative linking.
  • open new tabs
  • Linking to an email address


  • The < form > tag < /form >
  • Text fields
  • Setting Accessibility labels
  • Text Area
  • Check boxes
  • Drop-down lists
  • Radio buttons
  • Radio Groups
  • Upload a file
  • Fieldset & accessibility
  • Submit & Reset buttons

HTML5 in Forms

  • email, url, date, week input types
  • time, datetime, month input types
  • number, range and search input types
  • tel & color input type
  • list, autofocus and required attributes
  • multiple, pattern and autocomplete
  • min, max and step


  • Buying a Domain
  • Buying hosting space
  • File transfer Protocol
  • Uploading files to a server
  • Testing online

CSS Subjects

CSS Introduction

  • CSS Presentation
  • Advantages of CSS
  • Creating and Using Style-Sheets
  • CSS Rules: The Basic Syntax
  • Case, Whitespace and Comments in CSS
  • The CSS Standards
  • The Scope Of CSS
  • Browser Support for CSS

CSS Boxes and CSS Selectors

  • The CSS Box Model
  • CSS and Logical HTML Structure
  • Styling Boxes: Borders, Margins and Padding
  • The IE Box Model and Quirks Mode
  • IE Box Model Workarounds
  • Specifying CSS Distances
  • Problems with Absolute Units: pixels and point sizes
  • Using Proportional Units: em, ex and percentages
  • Formatting Box Edges Differently
  • Shorthand Syntax for Sets of Edges
  • Using Margins and Padding Effectively
  • Collapsing Vertical Margins on Paragraphs
  • Using Negative Margins on Boxes
  • Background Images on CSS Boxes
  • Grouping Elements with HTML Classes
  • Styling Multiple Elements Similarly (Selector Grouping)
  • Block Boxes and Inline Boxes
  • Block Box Behavior
  • inline Box Behaviour

Text Formatting in CSS

  • Text Formatting
  • Typefaces, Alternatives and Defaults
  • Text Size — a Serious Usability Issue
  • Font Characteristics
  • Setting and Using Space Within Text
  • Formatting Blocks of Text
  • Using Arbitrary Inline Tags:

More CSS Selectors and Selection

  • Using HTML Element IDs in CSS
  • Using CSS Descendant Selectors
  • Descendant Selector Examples
  • Child, Sibling and Pseudo-Class Selectors
  • Why You Need To Know Them
  • Browser Support and CSS Hacks
  • Distinguishing and Setting Link States
  • Link, Visited, Hover, Active, Focus
  • Modularising CSS Style-Sheets
  • Simpler Management, Less Effort, More Control
  • Embedded CSS Styles in HTML Documents
  • How and When to Use Them (Rarely).
  • Distinguishing Print, Screen and other Output Formats
  • Special Issues in CSS for Print

CSS Positioning

  • Choosing the Right CSS
  • Technique for Positioning Blocks
  • The Position Property, Floats, Margins (inc. Negative and Auto), etc
  • Static Positioning and Normal Flow
  • Absolute Positioning Outside Normal Flow
  • Relative Positioning — Not What You May Expect!
  • Fixed Positioning Outside Normal Flow
  • Relative Absolute Positioning
  • Absolutely Positioned Blocks in Relatively Positioned Containers
  • Floating Boxes with the CSS float property
  • Page Layout Using Absolutely Positioned Blocks

More on CSS Page Layout

  • Alternative Methods of CSS Positioning
  • Centring Blocks
  • Styling Lists
  • Redefining the Behaviour of Inline and Block Elements
  • Hiding and Revealing Blocks
  • Table Formatting in CSS
  • Styling Table Cell Borders
  • Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

  • Taking Control: Ensuring that CSS Rules Interact in the Way You Want
  • Combining Styles: Different Types, Origins, Importance, Specificity and Order
  • Examples: Combining Rules
  • Cascading and Cascade Order
  • Resolving Style Conflicts By Origin
  • Resolving Style Conflicts By Importance
  • Resolving Conflict By Selector Specificity
  • Resolving Conflict By Order
  • Non-CSS Presentational Hints
  • Property Inheritance

CSS Layers and Translucency

  • Different Forms of Layered Presentation in CSS
  • Layering with the z-index Property
  • Different Methods for Creating Translucency Effects
  • The CSS3 opacity Property
  • opacity Example
  • Fixed Attachment Backgrounds in Layers
  • background-attachment Example
  • Transparency and Semi-transparency with Alpha-Blended PNG
  • PNG Translucency Example and Sample Code
  • Pseudo-Transparency with JPG Positioned Backgrounds
  • JPG Pseudo Transparency Example

Using CSS in the Real World

  • Deploying CSS
  • CSS Formatting Versus HTML Formatting
  • Achieving a Balance
  • Standard Tags and Semantic Markup
  • Usability
  • Readable Pages
  • Screen Size and Fluid Design
  • Text Size, Including Internet Explorer Quirks
  • Table Layout and CSS Positioning
  • Table Layout and CSS Positioning as Alternatives
  • Combining Table Layout with CSS Positioning
  • CSS Browser Support
  • Testing Websites
  • Using Test Suites and Multiple Browsers
  • Cross-platform Testing in Single-platform Environments
  • CSS Help and Advice
  • Authorative Sources versus Web Myths and Gossip
  • Free Lifetime Support
HTML Course in Johannesburg


  • You can always sit in for the Introduction to Web Design Course in Johannesburg again at any time within a year for free.
  • Our courses are practical – The best way to learn
  • Our Tutors share their 13 years experience and best practices, something you won’t get anywhere else.
  • We support our students through multiple channel

Here’s what you get with your registration

Supplied Course Material

Web Design Course MaterialsFor this HTML and CSS Website Design Course in Johannesburg we supply detailed course notes and reference text. We try to provide sufficient supporting material so that you can return to your work place with sufficient confidence to permit further learning. You also get all course activity and files on a DVD disc at the end of your Website Design Course.

Ongoing Student Support

Website Design Course SupportThere is nothing worse than leaving a course and feeling left on your own. We like to ensure our customers have all the support and backup they need which includes 90 days unlimited support by phone or email. You also get lifetime support through our Resource Centre. You can also sit in again for the HTML & CSS Course in Johannesburg for free, within a year, if you feel you need a refresher.

We look after our students:

We provide water, coffee & tea throughout the day. You can even have your coffee at your desk.

You also get

  • The most complete HTML and CSS Course you can find.
  • A start to a great portfolio.
  • A great Practical Website Design Course in Johannesburg.
  • A great collection of Web Design Books.
  • A certificate of completion.
  • Access our Resource Centre with free resources, code examples and more.
Website Design Short Course Johannesburg Durban
Share with a Friend

Start typing and press Enter to search

Pin It on Pinterest