Web Design Training Course Outline
Web Design Course Contents
HTML
Introduction
- What is internet?
- Introduction to HTML, CSS, JS and Dreamweaver
- Web browsers (Internet Explorer, Firefox, Safari, Opera and Google Chrome)
- Role of HTML in a web design course
HTML (Hyper Text Markup Language)
- HTML page structure
- HTML tags
- HTML attributes and values
- View HTML web pages code
- HTML vs xHTML
HTML Meta
- What are HTML Meta tags
- Role of HTML in search engine optimisation
- HTML keywords and importance in SEO
- HTML meta description
- HTML page title
HTML Text
- How to use text on HTML web pages
- What is HTML paragraph?
- Change the font of text
- Define text colour and size
- Use of Headings H1, H2, H3 etc
- What are text comments?
- Creating superscripts and subscripts
- Striking out text
- Make text bold, italic, underlined
HTML List
- What is a list?
- HTML ordered list
- Unordered list
- Use list items
- Create a navigation with a list
HTML Links
- What is HTML hyperlink/link?
- How to create a link to another page
- Connecting web pages using links
- Define target for links
- Create HTML anchors
- Link to an anchor
- Creating a link from an image
HTML Tables & Div
- Creating a HTML table
- Adding rows and columns to table
- Defining padding and spacing
- Adding table borders
- Merge rows or columns with colspan and rowspan
- Create Div
- Apply Div Colours
- Defining width and height for Div
- Float vs Clear
- Use background colour for Div
- How to use background image for Div
- How to use HTML Span
- Table vs Div
Working with image in HTML
- Adding image
- Create image links
- The GIF, JPEG and PNG formats
- Alternative text, titles and descriptions for images
HTML Multimedia
- Creating a marquee
- Adding video to web pages
- Adding YouTube video to a web page
- Adding a Google map to a web page
HTML Form
- What is HTML form?
- Create a form
- Form get and post method
- Form action
- Creating fieldsets and legends
- Creating HTML Form text boxes
- Creating password boxes
- Using form Labels
- Creating text areas
- Creating radio buttons
- Creating checkboxes
- Creating List menus
- How to create a file upload
- Use of hidden fields
- Creating form submit button
- Form reset button
CSS
CSS (cascading style sheet)
- What is CSS?
- Separating content from presentation
- Role of CSS in web design course
- Inline vs embedded or external CSS
- CSS structure
CSS in HTML
- Applying style on one web page
- Applying style on complete website
- Defining styles for Classes
- Style for HTML tags
- Defining styles for links
Styling text using CSS
- Styling text elements
- Specifying font size and colour
- Text decoration
- Specifying font alignment
- Choosing a font family
- Specify font size
- Setting the Line Height
- Make text Italics
- Use Bold Formatting
- Underlining Text
- Specify text colour
- Apply text case
- Use text's background
- Word-spacing and Letter-spacing
- Text indentation
Styling links using CSS
- Creating hover effects
- Keeping track of links
- Create website navigation using CSS
Creating web page layout using CSS
- How to use Div
- Fluid layout
- Fixed layout
- Elastic layout
- Specify the height of an element
- Specify the width of an element
- Specify the border
- Specify padding around an element
- Specify the margins around an element
- Wrapping text around images
- Use float and clear
- Use background images for elements
- CSS positions: static, relative, absolute, fixed
- Use z-index to simulate the third dimension
Publishing/Upload website
- Domain Name for your website
- CPanel intro
- Web Servers Introduction
- Uploading and Downloading to and from your website
- Protocols FTP, HTTP
HTML web page troubleshooting
- Test your website
- Check HTML code
- View code from browser
- Use Firebug to inspect HTML web page elements
- Markup and CSS Validation tools
JavaScript
Introduction to JavaScript
- What is JavaScript
- Firebug console and JavaScript
- Variables and Functions
- Events and Handlers
Projects in Web Design Course
Project1: Create a personal or business website
Using the skills obtained from our web design course, we will build a simple layout website using HTML and CSS. We will create a one-column layout brochure/magazine website with multiple pages, a working navigation and a simple gallery. You will learn how to use DIVs and CSS avoiding tables for layouts; you will learn the importance of a clean and well formatted code. This project involves many stages from planning, team work, and designing, testing and launching your website.
Project2: CSS driven gallery
Stretching the boundaries of CSS, we will create an image gallery with CSS only: disjointed rollover, css positioning, background techniques.
Project3: Advanced website
We will create a more complex website using advanced CSS tricks: pseudo classes, shadows, multiple columns, interactive JavaScript gallery.