Web Design

Learn Web designing using HTML5, CSS3, HTML & CSS from web designers in London and also create projects for your portfolio. HTML, CSS, JavaScript, and Adobe Dreamweaver all in one course

15 %
Discount

when you buy 3 or more courses

The discount will be automatically
applied at the checkout
Looking for a
2-12 months
training?
Choose Web designer
Career Programme

Looking for a 2-12 months training?

Choose

Web designer career programme

Upcoming dates

There are no open public schedule dates for Web Design course. We can offer you a private training or arrange a public course for you. Contact us here and we can make arrangements for your course.

Delivery Formats

This course can be attended face to face in an open classrooms, live online virtual classroom remotely from home or office, private one-to-one and on-site for your team at your office.


Subjects for this course

HTML5
Web Design image
CSS3
Web Design image
Emmet
Web Design image
Videos
Web Design image
Maps
Web Design image
Forms
Web Design image
Complete Project
Web Design image
Publish Website
Web Design image
Front end Development
Web Design image
Design Process
Web Design image
Flexbox
Web Design image
CSS Grids
Web Design image

Course Outline

Web Design course overview

This course explains how to create web pages from scratch using different techniques, such as HTML5, CSS3, basic JavaScript using professional tools and workflow, as well as following high coding standards. After completing our web design course you would be able to create HTML websites yourself.

The complete course is hands-on based. A practical web design project at the end of the course will ensure that you go through website creation process by planning, creating structure, coding, using different web design software, buying you website a domain name, hosting and uploading website to a live server.

This short HTML and CSS course is hands-on, instructor-led and classroom based. This training can be taken as a part-time evening course or even on the weekends.


Who is Web Design training for?

This course is for you if you are interested in creating or maintaining websites for yourself or for others. This course also helps business owners to get more control and insight into their website. This course is designed for complete beginners of web design. No previous coding background is required.

If you are looking for HTML course and CSS training course then this web design course is for you. Check out also our graphic design training course.


Prerequisites for Web Design course

To attend this course you must be familiar with basic use of computers and internet. You must be able to create/copy/rename/delete folders and files on your computer. Typing skills are beneficial. If you are not fully familiar with such topics, please make sure you have some practice before course starts.

Keep in mind weekday courses are very intensive; if you have little or no experience at all, please consider enrolling on evening or weekend courses.


What will I get?

  • Training from professional HTML and CSS web designers:

    Training Dragon consultants have been implementing professional HTML & CSS solutions across a range of web sites for many years. Those consultants write and teach our web design training courses, so their experience directly informs course content.

  • Real-time Practice and Projects:

    Our web design course is designed to get you started in web design. We work on industry related projects in this web design course. These projects help you create your web design portfolio. If you have a project or an idea that you wanted to turn into website then present that idea during the course and our trainers will help you to work on your own website.

  • Course Material:

    HTML and CSS electronic notes are included in this course.

  • Course Completion Certificate:

    After completing this training you will receive a web design course completion certificate.

  • Support and Careers Advice:

    After the course if you have any problems or questions regarding HTML and CSS, do not hesitate to contact us. Training Dragon’s trainers and career consultants are expert in their fields and if you need any help with you career choice, please speak to one of our career consultants.


Web Design Course Contents

HTML

Introduction

  • Introduction to HTML, CSS, JS and Web Design
  • Web editors and IDEs
  • Web Design and websites structure
  • Client side vs Server side
  • Separation of concerns: content vs presentation vs behaviour

HTML (Hyper Text Markup Language)

  • HTML5 intro
  • HTML page structure
  • HTML tags
  • HTML attributes and values
  • View HTML source code
  • Emmet plugin to automate HTML coding

HTML Meta and in-site SEO

  • What are HTML Meta tags
  • Role of HTML in search engine optimisation
  • HTML keywords and importance in SEO
  • Description meta tag
  • Author meta tag
  • Keywords meta tag
  • Robots meta tag
  • Title tag

HTML Text

  • How to use text on HTML web pages
  • HTML comments
  • Headings
  • Paragraphs
  • Div tags
  • Span tags
  • deprecated presentational tags

Working with image tag

  • Img tag
  • Adding images
  • Alternative text, titles and descriptions for images
  • Create image links
  • Images formats for web: PNG, JPEG/JPG, SVG etc

HTML Hyperlinks 

  • Anchor tag
  • Internal links vs External links
  • Creating Links to 
  • Creating a link around an image

HTML Lists

  • What is a list?
  • Ordered lists
  • Unordered lists
  • List items
  • Creating navigations with lists of anchors

HTML Tables

  • We do not use tables for websites anymore
  • Tables in Email Design
  • Table tag
  • Table attributes
  • Adding rows and columns to tables
  • TR, TH, TD tags
  • Defining padding and spacing
  • Merging rows or columns with colspan and rowspan

HTML Multimedia intro

  • Adding youtube videos to web pages
  • Adding Google maps to web pages

HTML Form

  • Form tag intro
  • Creating forms
  • 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
  • CSS comments
  • CSS best practices
  • Inline vs Internal vs External CSS
  • Link tag 
  • A
  • CSS stylesheets: rulesets, selectors, rules, properties

Styling text and inline elements using CSS

  • Styling inline elements, text, links, images
  • Defining text colour
  • Text decoration and other text-related properties
  • Font size and other font-related properties
  • Word-spacing, Letter-spacing, line height and other typographic properties

Styling block level elements using CSS

  • Block elements sizing and size units
  • Background colours and background images properties
  • Margin and Padding properties
  • Traditional Box Model vs modern Box Model
  • Keeping track of links
  • Create website navigation using CSS

Layout techniques in modern CSS

  • How to use Div
  • Fixed vs fluid vs elastic layouts
  • Intro to Responsive layouts
  • Aligning items horizontally and vertically
  • Creating columns
  • Flexbox intro
  • CSS Grid intro
  • CSS position: static, relative, absolute, sticky, fixed
  • Using z-index to simulate the third dimension

Publishing/Uploading websites

  • Domain Names for websites
  • CPanel intro
  • Web Servers Introduction
  • Uploading and Downloading to and from your website
  • Protocols FTP, HTTP

HTML web page troubleshooting

  • Testing your web pages
  • Viewing source code from browsers
  • Inspecting web page elements
  • Markup and CSS Validation tools
  • CSS linters

JavaScript

Introduction to JavaScript

  • Intro to JavaScript
  • Inspectors, console panel and JavaScript
  • Events and Handlers

Projects in Web Design Course

Project1: Simple Brochure website

Using techniques studied during HTML and CSS intro, we will create a simple brochure website with multiple pages. The project will showcase step by step the creation of webpages from scratch, following good practices and Web Standards as well as demonstrating styling and layout techniques. Among other topics, we will focus on creating sticky navigations, creating columns with Flexbox/CSS Grids related properties and how to plan and create a simple gallery.   

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: Personal project

Students will be given time to plan and work on their class project, while the trainer will guide and mentor them to make sure they follow best practices highlighted during the course. At the end of day 4, students will learn how to publish their projects via FTP software like FileZilla.

View Complete Course outline

Daily schedule

The scheme below shows what a typical day at Training Dragon looks like.

10:00 11:30 11:45 13:00 14:00 15:30 15:45
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Tea
Break
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Lunch
Break
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Tea
Break
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Video Placeholder

Looking for a
2-12 months
training?

Choose

Web designer career programme

Our Trainers

Emiliano
Emiliano
Leads our teaching team with many years of experience in teaching web development.
Ross
Ross
Brings many years of Python and Java software development experience to classrooms.
Olu
Olu
Microsoft and Oracle certified developer with years teaching experience in Android, .NET and databases.

Our Alumni Projects

Frequently Asked Questions

How many maximum people are on my course? 

?
To make sure that personal attention is provided to everyone in the class, we keep our classroom size very small. There are maximum 8 delegates in all our classrooms.

How’s is the course being taught?

?
All our courses are led by instructors and delivered in classrooms. Your instructor is available to help you throughout your course. In our classrooms we do hands-on exercises, learn step by step and build practical projects on most of our courses.
More questions?
We are here to answer them