Web Design + Mobile

Learn to develop hand coded websites using modern technologies and real life professional techniques

This course will take place in 3-4 Kirby Street, London, EC1N 8TS. Find on map
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 + Mobile 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.

Subjects for this course

HTML
Web Design + Mobile image
CSS
Web Design + Mobile image
Web Editors
Web Design + Mobile image
WebStorm
Web Design + Mobile image
HTML5
Web Design + Mobile image
CSS3
Web Design + Mobile image
jQuery
Web Design + Mobile image
Mobile sites
Web Design + Mobile image
Videos
Web Design + Mobile image
Maps
Web Design + Mobile image
Forms
Web Design + Mobile image
Complete Project
Web Design + Mobile image

Course Outline

Web Design + Mobile course overview

This course explains how to practically create websites from scratch using different techniques, such as xHTML, CSS, HTML5, CSS3. After completing our web design course you will be able to create HTML websites yourself.

Next to learning how to code, you will also build complete websites from scratch. You will gain experience in website creation process by planning, structuring, coding, reserving website name, web hosting and uploading website to a live server.

The complete short course is hands-on, instructor-led and classroom based that can be attended full-time during the week or part-time on weekends or evenings.


Who is Web Design + Mobile training for?

This course is for you if you have never hand coded a website from scratch. This course also helps entrepreneurs to get more control and insight into their website. This course is designed for complete beginners in web design. No previous coding background is required. The workshop on the last day will help you gain practice and experience what you learn during the course, as well as learning new techniques, tricks and tools.


Prerequisites for Web Design + Mobile 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 weekend courses.


What will I get?

  • Training from professional HTML and CSS web designers:
  • Real-time Practice and Projects
  • Electronic Course Material
  • Course Completion Certificate
  • After course Support
  • Careers Advice


Web Design + Mobile Course Contents

HTML

Introduction

  • What is internet?
  • Introduction to HTML, CSS, JS and Web Editors (IDEs)
  • 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 vs HTML5

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 Lists

  • What is a list?
  • HTML ordered lists
  • Unordered lists
  • Use list items
  • Creating navigations with lists of anchors

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, Divs, new HTML5 elements

  • Creating HTML tables
  • Adding rows and columns to tables
  • Defining padding and spacing
  • Adding table borders
  • Merge rows or columns with colspan and rowspan
  • Tables vs Divs
  • Using Divs
  • HTML5 Header, Main, Footer, Nav tags
  • The box model
  • Styling block level elements
  • How to set up a layout
  • Float vs Clear
  • Intro to flexbox
  • Intro to asic CSS3 properties

Working with images in HTML

  • Adding images
  • Create image links
  • The GIF, JPEG and PNG formats
  • Alternative text, titles and descriptions for images

HTML Multimedia

  • Adding video to web pages
  • Adding YouTube video to a web page
  • Adding a Google map to a web page

HTML Forms

  • What is a form?
  • Creating forms
  • Forms - get and post method
  • Forms - action attribute
  • 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 navigations using CSS

Creating web page layouts 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, sticky
  • 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
  • Variables and Functions
  • Events and Handlers



Web Design Projects

Project1: Create a personal or business website

Using the skills obtained from our web design course, we will build a simple 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 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. We will then modify this project using JavaScript

Project3: Personal project

In the last part of the course (day 3-4) you will plan, design, build and publish your own project.


Day 5: Personal project and workshop

After many requests, we added this extra day workshop: you will be able to to keep working on your project, alone or in groups. You will work with and learn real life technologies, share what you have learnt with other students and may get help and cooperate with our previous career path students. According to the project you are working on, your trainer will help you adding advanced features to your projects, eg: responsive backgrounds, JavaScript sliders etc.

 

 

 

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.

Latest Reviews

Frequently Asked Questions

Have a question?
We are here to answer them