Web & Graphic with User Experience Design (UX Design)

Training Square London
Course summary
Professional Training
12 Weeks or Fast Track 8 Days or Evenings 8 Weeks
1,190 GBP

Course description

Web & Graphic with User Experience Design (UX Design) - Training Square London

Whether you are designing your personal website or developing a commercial website, our web design course will equip you with the required skills to enable you design the site efficiently. Our web design course covers all the latest designing softwares and technologies like Adobe Dreamweaver, Adobe Photoshop, HTML5, XHTML, jQuery, Javascript, CSS2, CCS3 and many more. Designing a website can be a very tedious task and could get messy if the designer does not have the necessary troubleshooting skills. At Training Square our trainers are expert on troubleshooting and fixing the problems you will encounter in real life.

Suitability - Who should attend?

This course is suitable for professionals of all skill levels - beginner, intermediate and advanced.

Training Course Content

Web Design - XHTML, HTML5, CSS3, Dreamweaver, Photoshop & XD

Web Design

  • Overview of Web Design
  • Effective Tools and software available
  • HTML5, XHTML, HTML and CSS in Brief
  • Supporting HTML5 cross-browser
  • Web Page Building Blocks
  • A Basic HTML Page
  • Semantic HTML: Markup with Meaning
  • Markup: Elements, Attributes, and Values
  • A Web Page’s Text Content
  • Links, Images, and Other Non-Text Content
  • HTML Page Structure
  • Creating First Web Page
  • Creating a Title
  • Creating Headings
  • Understanding HTML5’s Document Outline
  • HTML Validation

Working with Web Page Files

  • Planning Your Site
  • Creating a New Web Page
  • Saving Your Web Page
  • Specifying a Default Page or Homepage
  • Editing Web Pages
  • Organizing Files
  • Viewing Your Page in a Browser

Basic HTML Structure

  • Headings
  • Common Page
  • Header
  • Navigation
  • Defining a Section
  • Specifying an Aside
  • Creating a Footer
  • Creating Containers
  • Adding the Title Attribute to Elements

Structural building blocks

  • <div>, <section>, and <article>
  • Headings: <header>, <hgroup>, and <h1>–<h6>, plus <footer>
  • HTML5-style heading element levels
  • Structural elements: <nav>, <aside>, <figure> (and <figcaption>)
  • Putting it all together
  • Accessibility and HTML5


  • About Images for the Web
  • Getting Images
  • Inserting Images on a Page
  • Offering Alternate Text
  • Specifying Image Size
  • Scaling Images with the Browser
  • Adding Icons for Your Web Site

Web Links, Anchor Links, Internal and External Links

  • The Anatomy of a Link
  • Creating a Link to Another Web Page
  • Creating Anchors
  • Linking to a Specific Anchor
  • Creating Other Kinds of Links

CSS2 and CSS3 (Cascading Style Sheet)

  • CSS Building Blocks and Working with Style Sheets
  • Style Rule
  • Adding Comments to Style Rules
  • Creating an External Style Sheet
  • Linking to External Style Sheets
  • Creating an Embedded Style Sheet
  • Applying Inline Styles
  • The Importance of Location
  • Using Media-Specific Style Sheets
  • Offering Alternate Style Sheets
  • The Inspiration of Others: CSS

Formatting Text with Styles

  • Choosing a Font Family
  • Specifying Alternate Fonts
  • Creating Italics
  • Applying Bold Formatting
  • Setting the Font Size
  • Setting the Line Height
  • Setting All Font Values at Once
  • Setting the Color
  • Changing the Text’s Background
  • Controlling Spacing
  • Adding Indents
  • Setting White Space Properties
  • Aligning Text
  • Changing the Text Case
  • Using Small Caps
  • Decorating Text

Layout with Styles

  • Considerations When Beginning a Layout
  • Structuring Your Pages
  • Styling HTML5 Elements in Older Browsers
  • Resetting or Normalizing Default Styles
  • The Box Model
  • Changing the Background
  • Setting the Height or Width for an Element
  • Setting the Margins around an Element
  • Adding Padding around an Element
  • Making Elements Float
  • Controlling Where Elements Float
  • Setting the Border
  • Offsetting Elements in the Natural Flow
  • Positioning Elements Absolutely
  • Positioning Elements in 3D
  • Determining How to Treat Overflow
  • Aligning Elements Vertically
  • Changing the Cursor
  • Displaying and Hiding Elements

Style Sheets for Mobile to Desktop

  • Mobile Strategies and Considerations
  • Understanding and Implementing Media Queries
  • Building a Page that Adapts with Media Queries

Working with Web Fonts

  • What Is a Web Font?
  • Where to Find Web Fonts
  • Downloading Your First Web Font
  • Working with @font-face
  • Styling Web Fonts and Managing File Size

Enhancements with CSS3

  • Understanding Vendor Prefixes
  • A Quick Look at Browser Compatibility
  • Using Polyfills for Progressive Enhancement
  • Rounding the Corners of Elements
  • Adding Drop Shadows to Text
  • Adding Drop Shadows to Other Elements
  • Applying Multiple Backgrounds
  • Using Gradient Backgrounds
  • Setting the Opacity of Elements

CSS3 Properties

  • Color and transparency
  • Backgrounds
  • Borders
  • Drop shadows
  • text-shadow
  • Gradients


  • Creating Ordered and Unordered Lists
  • Choosing Your Markers
  • Choosing Where to Start List Numbering
  • Using Custom Markers
  • Controlling Where Markers Hang
  • Setting All List-Style Properties at Once
  • Styling Nested Lists
  • Creating Description Lists

HTML Forms and HTML5 forms

  • Creating Forms
  • Processing Forms
  • Sending Form Data via Email
  • Organizing the Form Elements
  • Creating Text Boxes
  • Creating Password Boxes
  • Creating Email, Telephone, and URL Boxes
  • Labeling Form Parts
  • Creating Radio Buttons
  • Creating Select Boxes
  • Creating Checkboxes
  • Creating Text Areas
  • Allowing Visitors to Upload Files
  • Creating Hidden Fields
  • Creating a Submit Button
  • Using an Image to Submit a Form
  • Disabling Form Elements
  • New HTML5 Features and Browser Support

Video, Audio, and Other Multimedia

  • Third-Party Plugins and Going Native
  • Video File Formats
  • Adding a Single Video to Your Web Page
  • Exploring Video Attributes
  • Adding Controls and Autoplay to Your Video
  • Looping a Video and Specifying a Poster Image
  • Preventing a Video from Preloading
  • Using Video with Multiple Sources
  • Multiple Media Sources and the Source Element
  • Adding Video with Hyperlink Fallbacks
  • Adding Video with Flash Fallbacks
  • Providing Accessibility
  • Adding Audio File Formats
  • Adding a Single Audio File to Your Web Page
  • Adding a Single Audio File with Controls to Your Web Page
  • Exploring Audio Attributes
  • Adding Controls and Autoplay to Audio in a Loop
  • Preloading an Audio File
  • Providing Multiple Audio Sources
  • Adding Audio with Hyperlink Fallbacks
  • Adding Audio with Flash Fallbacks
  • Adding Audio with Flash and a Hyperlink Fallback
  • Multimedia Files
  • Considering Digital Rights Management (DRM)
  • Embedding Flash Animation
  • Embedding YouTube Video
  • Using Video with Canvas

HTML Tables and CSS

  • Structuring Tables
  • Spanning Columns and Rows

jQuery, JavaScript internal and external

  • Integrating jQuery Menu
  • Integrating jQuery Tabs
  • Working with Scripts
  • Loading an External Script
  • Adding an Embedded Script
  • JavaScript form validation

Testing & Debugging Web Pages

  • Trying Some Debugging Techniques
  • Checking the Easy Stuff: General
  • Checking the Easy Stuff: HTML
  • Checking the Easy Stuff: CSS
  • Validating Your Code
  • Testing Your Page
  • Troubleshooting when Images Don’t Appear

CSS Properties and Values

  • CSS Properties and Values
  • CSS Selectors
  • CSS Color Values
  • Gradients
  • Media Queries
  • CSS Font Embedding

Making your website live

  • Use FTP to load your website
  • Choosing your domain name
  • Configuring your domain with domain registrar

Adobe Dreamweaver

  • Navigating the Workspace in Dreamweaver
  • Working with the Document window
  • Managing files in the Files panel
  • Updating properties in the Property inspector
  • Configure workspace layout

Defining a Site

  • Creating local root folder
  • Setting server information with hosting account details
  • Connecting via FTP

Creating Web Pages

  • Using the New Document dialog box
  • Creating and managing files with the FIles panel
  • Previewing pages in a browser

Laying out Web Pages

  • Using the Layout section of the Insert panel
  • Creating fluid grid layouts

Formatting Text

  • Inserting special characters
  • Using Find and Replace
  • Using Spellcheck
  • Understanding paragraph and header tags
  • Inserting line breaks
  • Creating lists

Cascading Style Sheets (CSS)

  • Understanding basic CSS syntax
  • Creating and managing CSS styles in the CSS Styles panel
  • Applying styles using the Property inspector

Managing Links

  • Understanding basic link types
  • Creating links using the Property inspector
  • Creating content navigation

Images and Rich Media

  • Inserting images
  • Using the Property inspector to update and edit images
  • Inserting Flash content

Writing HTML Code

  • Using the Code view of the Document window
  • Making changes to code using Design view of the Document window
  • Selecting specific code
  • Understanding related files

Adobe Photoshop

  • Managing Assets Using Adobe Bridge
  • Navigating between Adobe Bridge and your computer
  • Working with metadata
  • Organizing collections
  • Outputting projects to PDF and for the web
  • Automating multiple images in Bridge

Using Camera Raw

  • Basic single image adjustment
  • Selective image corrections
  • Batch processing and editing
  • Understanding Process Version and workflow options
  • Automating multiple images

Understanding Photoshop Fundamentals

  • Navigating the Photoshop workspace
  • Importing and exporting presets
  • Resetting sliders and options
  • Using tool groups and options

Understanding Selections

  • Creating selections using appropriate tools
  • Adding and subtracting from selections
  • Quick Mask usage
  • Using Refined Edge

Understanding Layers

  • Creating and organizing layers
  • Understanding the differences between raster and vector layers
  • Understanding layer masks
  • Searching for layers
  • Understanding layer groups
  • Understanding layer blend modes

Understanding Adjustments

  • Differentiating between adjustment types
  • Using TAT, clipping, and visibility
  • Refining masks on adjustments

Editing Images

  • Working with the retouching tools
  • Working with Liquify
  • Using the transform controls
  • Using the Puppet Warp
  • Using the Clone Source tool
  • Creating panoramas
  • Using HDR Pro
  • Creating speciality images (black and white and duotone)
  • Selecting color

Working with Design and Print Production

  • Using character and paragraph styles
  • Using vector shapes
  • Working with layer comps
  • Creating frame based animations
  • Working with layer styles

Outputting for Web, Print, and Mobile

  • Differentiating between file types
  • Using Save For Web
  • Using the Print dialog

Adobe Experience Design (XD)

  • Introduction to Adobe Experience Design XD
  • Starting a Design
  • Inserting Text, Images, & Graphic Elements
  • Changing an Artboard’s Background Color
  • Adding Text
  • Styling Text
  • Importing Images
  • Cropping Images (Masking)
  • Importing Graphics (Photoshop, Illustrator, SVG)
  • Graphic Effects (Fill, Stroke, Shadow, etc.)
  • Fills
  • Strokes
  • Adding Shadows


The cost of this course is £1190 per person. Contact the provider to learn more about costs and payment options.

Customer Outreach Award


We believe that it should be easy for you to find and compare training courses. 

Our Customer Outreach Award is presented to trusted providers who are excellent at responding to enquiries, making your search quicker, more efficient and easier, too.

About provider

Training Square London

Training Square London

The internet indeed has changed the world, and we believe every one of us should be fully equipped to be a part of, and lead, that change. Being prepared and ready is half the battle won, and Training Square makes...

Read more and show all courses with this provider

Contact info

Training Square London

 Show phone number


Average rating 5

Based on 1 reviews.

Very clear, easy to follow & very helpful. Has a lot of knowledge which is really good.
Find a course for you!

  Read the course
 summary on this page

 Fill in your details and Request information

 Receive all the info you need

Find more courses here