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. You get hands-on practice working with basic through advanced techniques to get the most out of your experience. First we go through the basics of using Adobe Dreamweaver. You will learn the basics of coding for web design, beginning with HTML and CSS. For this course you will use Adobe Dreamweaver and Adobe Fireworks.

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 on a DVD disc 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 basic websites.

PRICE

R3100.00

DURATION

2 DAYS

09:00am - 14:00pm

NEXT DATE

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

HTML, CSS, Dreamweaver
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 and Hosting
Uploading your website to the internet.
Adobe Dreamweaver
Adobe Fireworks

COURSE SUBJECTS - CLICK TO VIEW

HTML Subjects

Introduction

The World Wide Web
Client Side vs. Server Side
The web technologies
Evolution of the World Wide Web
What is Web 2.0
Workings of HTTP
The fundamentals of the web
What is AJAX?
The W3C
Web Standards
Web Accessibility

Browsers

What is a Browser?
Browser Wars
Netscape to Chrome
Browser Statistics
A Modern Browser
Cross-Browser compatibility issues
Internet Explorer 6 issues
Mobile Browsers

The Syntax

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

The DOCTYPE

The Different DOCTYPE’s
What is a DOCTYPE
HTML5 DOCTYPE
The DTD
XML declaration issue
XHTMLising your code
Document Object Model
HTML5 Default options

The HEAD

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

The CSS in HTML

Deprecated Style tags
Linking to CSS
Defining Media type
&

The BODY

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

Tables

Table headers
Accessibility in Tables
Nesting Tables
Adding Captions
Merging columns and rows

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

Hyperlinks

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

Forms

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
JavaScript form onclear

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

HTML5 Video

Browser Codecs
encoding in H264
encoding in Ogg Theora
encoding in VP8
Using the < video >tag < /video >
A Fallback system for legacy browsers

Publishing

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

CSS Subjects

CSS Introduction

HTML Structure and Content, 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
Using IE6 Standards Mode
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

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

WHY STUDY WITH US

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 Materials For 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 Support There 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

DOWNLOAD COURSE INFO

VIEW OUR F.A.Q