Speak To A Course Advisor - Call 01539 724622

Webmaster – HTML and CSS Web Design

Webmaster – HTML and CSS Web Design
  • webmaster-html-and-css-web-design

£200.00

This course is available in Online format.

This Webmaster online distance learning course will teach you all the skills you need to build an attractive website for your business or just for your own interest. The course is all online so you can study anytime and anywhere with full tutor support available by a dedicated specialist tutor. The course is entirely suitable for web design beginners, and is structured to help build up learners competence in a gradual, step-by-step fashion.

Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.

Need Help? Contact Us Leave Feedback

Categories: , , .

Tags: , , , , , , .

Introduction

Webmaster – HTML and CSS Web Design Level 3

Course code: WEB03

Delivery method: Online

Course duration: 12 Months

Entry requirements: No prior qualification needed

Award achieved: Open Awards Certificate

Awarding body: Open Awards

This Webmaster online distance learning course will teach you all the skills you need to build an attractive website for your business or just for your own interest. The course is all online so you can study anytime and anywhere with full tutor support available by a dedicated specialist tutor. The course is entirely suitable for web design beginners, and is structured to help build up learners competence in a gradual, step-by-step fashion.

Content

LESSON 1 – GETTING STARTED

  • Before We Get Started;
  • Pre-requisites;
  • The Notepad++ Text Editor;
  • Download Chrome, Firefox, Opera, & Safari Browsers;
  • The HTML & CSS Quick Reference Guides;
  • Assignment Notes;
  • Technical Support;
  • The Open Awards Certificate.
  • Introduction To The Internet;
  • A Short History Of The Internet;
  • Clients & Servers Explained;
  • The World Wide Web;
  • Accessing The Internet;
  • Web Browsers.
  • Getting Started With HTML;
  • Tags & Attributes explained;
  • The HTML Document Structure;
  • Creating An HTML Document;
  • Frequently-Used HTML Tags;
  • A Sample Document;
  • Create Your First Web Page.
  • Getting Started With CSS;
  • What Is A Cascading Style Sheet?
  • The Cascade In Simple Terms;
  • Introducing Style Rules;
  • Creating A Style Sheet;
  • Basic Styling Explained;
  • A Sample Style Sheet;
  • Create Your First Style Sheet.
  • Getting Started With Graphic Design;
  • What Is Graphic Design?
  • The Best Graphic Design Software;
  • Free Graphic Design Software;
  • Top Graphic Design Tips.
  • Introduction To HTML Editors;
  • Text Editors;
  • “What You See Is What You Get” Editors;
  • “What You See Is What You Mean” Editors.
  • Lesson Review & Quiz;
  • Assignment 1 – HTML & CSS Exercises.

LESSON 2 – AN HTML PRIMER FOR BEGINNERS

  • Headings, Paragraphs, & Sections;
  • <h1> To <h6> Heading Tags;
  • The <p> Paragraph Tag;
  • The <br> Line Break Tag;
  • The <div> & <span> Tags;
  • The <section> Tag;
  • A Working Example;
  • Now Try It Yourself.
  • Introducing HTML Colours;
  • HTML Colour Names;
  • Hexadecimal Colour Coding;
  • Red Green Blue (RGB) Colour Coding;
  • Using A Colour Picker Tool;
  • Using The <style> Tag;
  • A Working Example;
  • Now Try It Yourself.
  • Navigation With Hypertext Links;
  • What Is A Hypertext Link?
  • The <a> Anchor Tag;
  • The Target Attribute;
  • Inserting Text Links;
  • Inserting Image Links;
  • Inserting A Bookmark;
  • Local Links;
  • Link Colours;
  • A Working Example;
  • Now Try It Yourself.
  • Graphics & Images;
  • The <img> Image Tag;
  • Sizing An Image;
  • Sizing Units;
  • Inserting A Local Image;
  • Inserting A Remote Image;
  • Image Floating;
  • Creating Image Maps;
  • A Working Example;
  • Now Try It Yourself.
  • Ordered & Unordered Lists;
  • Create An Ordered List With The <ol> Tag;
  • Create An Unordered List With The <ul> Tag;
  • Create A Description List With The <dl> Tag;
  • Styling A List;
  • Nested Lists;
  • A Working Example;
  • Now Try It Yourself.
  • Introducing HTML Tables;
  • Defining An HTML Table With The <table> Tag;
  • Inserting Table Rows With The <tr> Tag;
  • Inserting Table Columns With The <th> and <td> Tags;
  • Spanning Rows & Columns;
  • Styling A Table;
  • A Working Example;
  • Now Try It Yourself.
  • Simple HTML Forms;
  • Define An HTML Form With The <form> Tag;
  • Create Input Fields With The <input> Tag;
  • Text Boxes;
  • Radio Buttons;
  • Check Boxes;
  • Submit & Reset Buttons;
  • The Action & Method Attributes;
  • Submitting A Form;
  • A Working Example;
  • Now Try It Yourself.
  • Lesson Review & Quiz;
  • Assignment 2 – Create A “Contact” Web Page.

LESSON 3  – A CSS PRIMER FOR BEGINNERS

  • Incorporating A Style Sheet;
  • Inline Styles;
  • Internal Styles;
  • External Styles;
  • A Working Example Of Each Method;
  • Now Try It Yourself.
  • CSS Rules & Selectors;
  • CSS Rules Syntax;
  • Style Rules Precedence;
  • The Element Selector;
  • The Id Selector;
  • The Class Selector;
  • Grouping Selectors;
  • Selecting By Attribute;
  • Pseudo Elements & Classes;
  • Inserting CSS Comments;
  • A Working Example;
  • Now Try It Yourself.
  • Incorporating Colour & Images;
  • Using CSS Colour Names;
  • CSS Hexadecimal Colour Coding;
  • CSS Red Green Blue (RGB) Colour Coding;
  • Text & Background Colours;
  • Background Images;
  • A Working Example;
  • Now Try It Yourself.
  • Padding, Margins, & Borders;
  • Element “Boxes” Explained;
  • Padding Individual Sides;
  • Padding Shorthand;
  • Margin Individual Sides;
  • Margin Shorthand;
  • Border Properties;
  • Border Styles;
  • Border Width & Colour;
  • Border Individual Sides;
  • Border Shorthand;
  • Rounded Borders;
  • A Working Example;
  • Now Try It Yourself.
  • Styling Text & Blocks;
  • Font Families, Size, & Colour;
  • Font Style, Weight, & Alignment;
  • Text Transformation;
  • Text Shadows;
  • Styling <div> & <span> Blocks;
  • A Working Example;
  • Now Try It Yourself.
  • Styling Lists & Tables;
  • Setting List Item Markers;
  • Using An Image As A List Marker;
  • Positioning The List Marker;
  • Styling Table Borders;
  • Setting Table Width & Height;
  • Vertical & Horizontal Alignment;
  • Using Table Padding & Colours;
  • A Working Example;
  • Now Try It Yourself.
  • Styling Forms;
  • Styling Text Boxes;
  • Styling Textarea Boxes;
  • Styling Select Menus;
  • Styling Radio Buttons & Check Boxes;
  • Styling Buttons;
  • A Working Example;
  • Now Try It Yourself.
  • Positioning Elements;
  • Static Positioning;
  • Relative Positioning;
  • Fixed Positioning;
  • Absolute Positioning;
  • Overlapping Elements;
  • Positioning Text In An Image;
  • A Working Example;
  • Now Try It Yourself.
  • Lesson Review & Quiz;
  • Assignment 3 – Add Styling To Your “Contact” Web Page.

LESSON 4 – CODE VALIDATION & DEBUGGING

  • Common HTML & CSS Errors;
  • Unclosed Elements;
  • Badly Nested Elements;
  • Unclosed Attributes;
  • CSS Debugging Tips.
  • HTML & CSS Document Validation;
  • Producing Well-Formed HTML & CSS;
  • W3C HTML Validation Website;
  • W3C CSS Validation Website.
  • The CSS Lint Code Quality Tool;
  • The Firebug Code Inspection & Debugging Tool.
  • Avoid Cross-Browser Issues;
  • Include Normalize.css In Your Code;
  • What Normalize Achieves;
  • Outline Your Elements;
  • The Web Developer Browser Extension;
  • What This Extension Achieves;
  • Using Browser Development Tools;
  • The Console Log;
  • Internet Explorer & Edge Tools;
  • Chrome Tools;
  • Firefox Tools;
  • Opera Tools;
  • Safari Tools;
  • Lesson Review & Quiz;
  • Assignment 4 – Debugging Exercises.

LESSON 5 – INTRODUCTION TO WEB DESIGN

  • Web Page Structure;
  • Why This Is Important?
  • Using A Grid Layout;
  • Using Templates;
  • Incorporate Quality Images;
  • The Importance Of Colour & White Space;
  • Using Headers & Footers;
  • Include A Maximum Impact Landing Page;
  • First Impressions Count;
  • Know Your Audience;
  • Include Concise Content:
  • Describe what you offer;
  • The benefits of what you offer;
  • What differentiates you from your competitors;
  • Use strong bullet points;
  • Each section should have a distinctive title;
  • Include a “Call To Action”;
  • Make it short & sweet (E.g. “Register NOW!”);
  • Put it in a prominent position;
  • Make the link stand out;
  • Consider Including A Blog Or Newsletter;
  • Include Links to Social Media & Trade Associations;
  • Research Your Competitors’ Websites;
  • Include Intuitive Site Navigation On Every Page;
  • Choose Easy-To-Read Fonts;
  • What is your target audience?
  • Serif Or Sans Serif?
  • Carefully select your text font for readability;
  • Use a more distinctive font for headings;
  • Don’t use more than two fonts per page;
  • Consider Including A Photo Gallery Or Slide Show;
  • Incorporate Responsive Design Techniques;
  • Use scalable sizing units such as %, em, and vw;
  • Scaling Typography;
  • Scaling Images & Backgrounds;
  • Search Engine Optimisation;
  • Carefully Choose Your Keywords;
  • Include Important Keywords In Main Content;
  • The Importance Of Meta Data;
  • Always Use Alt Text For Images;
  • Foster Links To Your Site;
  • Lesson Review & Quiz;
  • Assignment 5 – Build Your Own Landing Page.

LESSON 6 – INCORPORATING MULTIMEDIA

  • Introduction To Multimedia;
  • What Is Multimedia?
  • Guidelines For Use;
  • Native Multimedia Or Plug-Ins?
  • Advantages And Disadvantages;
  • Browser Support.
  • Common Audio Formats;
  • Musical Instrument Digital Interface (.midi);
  • RealAudio (.ram);
  • Moving Pictures Expert Group MPEG-3 (.mpeg);
  • WAV (.wav);
  • Theora Ogg (.ogg);
  • Windows Media Audio (.wma);
  • Advance Audio Coding (.aac)
  • Common Video Formats;
  • Moving Pictures Expert Group (.mpeg);
  • Moving Pictures Expert Group MPEG-4 (.mp4);
  • WebM (.webm);
  • Theora Ogg (.ogg);
  • Audio Video Interleave (.avi);
  • Windows Media Video (.wmv);
  • QuickTime (.mov);
  • Flash (.swf);
  • RealVideo (.ram)
  • Inserting Audio With The <audio> Tag;
  • <audio> Tag Methods, Properties, & Events;
  • The <source> Tag;
  • A Working Example;
  • The Audio Player;
  • Now Try It Yourself;
  • Inserting Video With The <video> Tag;
  • <video> Tag Methods, Properties, & Events;
  • The <source> Tag;
  • The <track> Tag;
  • A Working Example;
  • The Video Player Controls;
  • The Video Content;
  • Resizing The Player;
  • Now Try It Yourself.
  • Animation;
  • When To Use Animation;
  • A Good Example;
  • A Bad Example;
  • Now Try It Yourself.
  • Interactive Content;
  • What Is Interactive Content?
  • Advantages Of Interactive Web Pages;
  • Interactive Website Examples;
  • A Working Example;
  • Now Try It Yourself.
  • Lesson Review & Quiz;
  • Assignment 6 – Create An Audio/Video “Jukebox”.

LESSON 7 – INTRODUCING SPECIAL EFFECTS

  • Text Effects;
  • Implementing Text Shadows;
  • Implementing Text Gradients;
  • Create A “Neon” Text Effect;
  • Create A 3-D Text Effect;
  • Create Embossed Text;
  • Create Inset Text;
  • Styling The First Letter;
  • Text Transformations;
  • A Working Example;
  • Now Try It Yourself.
  • Implementing Web fonts;
  • Types Of Font;
  • Google Fonts;
  • The @font-face CSS Rule;
  • A Working Example;
  • Now Try It Yourself.
  • CSS Gradients;
  • Linear Gradients;
  • Repeating Linear Gradients;
  • Radial Gradients;
  • Repeating Radial Gradients;
  • A Working Example;
  • Now Try It Yourself.
  • Box Sizing With CSS;
  • The “box-sizing” Property;
  • Controlling A Box’s Size;
  • Two bordered boxes side-by-side;
  • A Working Example;
  • Now Try It Yourself.
  • Implementing Box Shadows;
  • Box Shadow Property Values;
  • Horizontal Shadows;
  • Vertical Shadows;
  • A Working Example;
  • Now Try It Yourself.
  • Using Border Images;
  • Creating A Suitable Border Image;
  • The Border Image Property;
  • A Working Example;
  • Now Try It Yourself.
  • Transitions & Transformations;
  • What Are Transitions?
  • Transition Properties;
  • A Working Example;
  • Two-Dimensional Transformations;
  • Three-Dimensional Transformations;
  • A Working Example;
  • Now Try It Yourself;
  • Lesson Review & Quiz;
  • Assignment 7 – Include Special Effects In Your Landing Page.

LESSON 8 – INTRODUCTION TO JAVASCRIPT

  • Introduction;
  • What Is JavaScript?
  • What Is A Script?
  • The <script> Tag;
  • Code Positioning;
  • Reserved Words.
  • JavaScript Variables & Simple Arithmetic;
  • Data Types & Naming Conventions;
  • Declaring A Variable;
  • Arithmetic Operators;
  • Assigning Values;
  • Increment & Decrement;
  • A Working Example;
  • Now Try It Yourself.
  • Comparison & Logical Operations;
  • Comparing Values;
  • Logical Operators;
  • A Working Example;
  • Now Try It Yourself.
  • Event Handlers;
  • Load & OnUnLoad Events;
  • OnClick Event;
  • OnFocus & OnBlur Events;
  • OnMouseOver Event;
  • A Working Example;
  • Now Try It Yourself.
  • Conditional Branching;
  • The IF and IF ELSE Statements;
  • A Working Example;
  • Now Try It Yourself;
  • Introduction To FOR Loops;
  • The FOR Loop Explained;
  • A Working Example;
  • Now Try It Yourself.
  • A Scrolling Message & Random Advertising Display;
  • Lesson Review & Quiz;
  • Assignment 8 – Create A Photo Gallery.

LESSON 9 – INTRODUCTION TO THE HTML5 APIss

  • What Is An API?
  • The Geolocation API & Google Maps;
  • The Geolocation Object;
  • Getting The User’s Current Position;
  • Handling Errors;
  • Displaying The Position In A Map;
  • A Working Example;
  • Now Try It Yourself.
  • The Drag & Drop API;
  • A Working Example;
  • Making An Element Draggable;
  • Specifying What To Drag;
  • Specifying Where To Drop;
  • Action The Drop;
  • Now Try It Yourself.
  • The Canvas API;
  • A Working Example;
  • The <canvas> Tag Explained;
  • The JavaScript Explained;
  • Now Try It Yourself.
  • The Web Storage API;
  • A Working Example;
  • Explaining The Code;
  • Now Try It Yourself.
  • The History API;
  • Move Backwards & Forwards Through Your Browsing History;
  • Moving To A Specific Point;
  • Adding History Entries;
  • Modifying History Entries;
  • A Working Example;
  • Now Try It Yourself.
  • Lesson Review & Quiz;
  • Assignment 9 – Drag & Drop Exercise.

LESSON 10 – CREATING AN ONLINE STORE

  • Before You Get Started;
  • Decide On Your Colour Scheme, Brand & Logo;
  • How Do You Attract Customers?
  • Should You Use PayPal?
  • Getting Your Domain Name;
  • Which UK Web Hosting Provider?
  • Creating Your Own Store Front;
  • A Working Example;
  • Create A Products Page;
  • Integrate With A Shopping Cart;
  • JS Function To Save Order Data;
  • Save Data Using The Local Storage API.
  • A “Display Shopping Cart” Page;
  • JS Function To Retrieve Data;
  • Use The Local Storage API To Retrieve Order Data.
  • Create A Check Out Page;
  • JS Function To Retrieve Order Data;
  • Include Personal Details Form;
  • JS Function To Check Form Data;
  • Save Personal Details Using The Local Storage API.
  • Create An Order Confirmation Page;
  • JS Function To Retrieve Order & Form Details;
  • Display Order & Form Details;
  • JS Function To Send Order To Server.
  • Store Building Software Products;
  • Shopify;
  • BigCommerce;
  • Weebly eCommerce;
  • Wix Drag & Drop Tools;
  • Squarespace;
  • BigCart;
  • Free Shopping Carts;
  • Creating & Managing A Store With Wix;
  • Your Store Front;
  • Shopping Cart;
  • Store Management;
  • Products;
  • Web Hosting;
  • Analytics;
  • Mobile Support;
  • Technical Support;
  • Try It Yourself Free For 14 Days.
  • Lesson Review & Quiz;
  • Assignment 10 – Build Your Own Store Front.

Qualification Information

Certification is based on your completed coursework and there is no formal examination at the end of the course.

On successful completion of the course, students will be awarded the Open Awards Level 3 Web Design & Construction Award.

This is a Level 3 certificate Award and has 8 Open Award credits. Open Award Credits can be accumulated with other course or unit credits over a period of time which can lead to an accredited qualification.

The certification is issued through Open Awards. Open Awards is recognised as an awarding organisation by the qualification regulators for England, Wales and Northern Ireland. The regulator for England is the Office of the Qualifications and Examinations Regulator (Ofqual); for Wales it is the Qualifications & Examinations Regulator for Wales, and the Council for Curriculum, Examinations and Assessment (CCEA) for Northern Ireland.

Method of Study

Online Version

Our online courses are fully digitised versions of the paper-courses, so you can study on any PC or smart device when connected to the internet.

As with the paper course, your online learning programme is completely flexible, so you can study at a pace that suits you.

All of our online course content is broken down into bite size chunks to make your learning more manageable and effective.

 

 

 

 

 

Method of Assessment

The course contains a number of assignments which your tutor will mark and give you valuable feedback on. We call these Tutor Marked Assignments (TMAs). You need only send the TMAs to your tutor for comment, not the self-assessment exercises which are also part of the course to help you gauge your progress.

Course Length Information

This course can be taken over a 12 month period but you can complete it as fast or as slowly as you wish.

Tutor Support

You will have access to a tutor via email who will mark your work and guide you through the course and will assist you with any problems you may have. In addition you will be supplied with a comprehensive Study Guide which will help you through the study and assessment process.