Advanced Web Design

Shopping Cart

The Advanced Web Design course provides a thorough examination of advanced web design techniques including responsive design and jQuery. A good foundation in HTML5 & CSS3 is essential to participate and ideally you will have completed the Web Design for Beginners course. Taught by a professional freelance web designer, you will learn about responsive and adaptive design, how to create responsive websites that look great on desktop, tablet and mobile and add some magic with jQuery plugin libraries.


Skills Required

Previous experience of Web design, HTML, CSS is required. You should have completed our HTML & CSS for Beginners training course


Course level



Duration & Cost

Option 1: 
Wednesday & Friday, 6pm to 9pm for 5 weeks: £2,150.00 Shopping Cart

Option 2: 
Saturday, 10am to 1pm for 10 weeks: £2,150.00 Shopping Cart


Course Start Date

Please call to enquire (0208 947 1338)


Certificate of Completion will be provided after completing the course


Course Progression

After completion of this course, participants may wish to extend their knowledge further with these courses:

  1. JavaScript and jQuery
  2. PHP with MySQL for Beginners


Career Paths

Web Designer


Course Details

  1. The modern web: how we design up to date websites
    • Single and multi page website design
    • Introducing responsive design and jQuery
    • What is jQuery and what can we do with it
    • Designing for every screen size
    • Responsive vs. Adaptive vs. Fixed Width design
  2. Responsive web design (RWD) part 1: The fundamentals
    • How and why we use RWD
    • The core ingredients: flexible grids, flexible images and media queries
    • EM, REM, VH/VW and % - the units of measurement in RWD
    • Creating a simple responsive layout
    • The magic formula
    • Retrofitting a simple fixed width web page to be responsive
  3. RWD part 2: The flexible grid
    • What is a flexible grid and how do we use it
    • Building a simple flexible grid
    • Using the grid to layout a page
  4. Modern layouts: Single page and full width websites
    •  How we create full width web pages
    • Flexible images
    • Background images to the rescue!
    • The single page website concept
    • Creating and using anchor names to navigate a single page site
    • jQuery magic - the “scroll to” plugin
  5. RWD part 3: Media queries
    • What they are, why we use them and how we do it
    • Progressive enhancement vs. graceful degradation
    • Break points, the key to designing for all screens
    • Global changes using the “html” element
    • Changing individual elements with media queries
  6. Using templates part 1: Grids
    • Templates vs. DIY
    • Finding a grid template
    • Building a site on a grid template
  7. Image magic: Parallax scrolling
    • What is parallax scrolling
    • Parallax images
    • Using a jQuery plugin to create a parallax image
  8. Using templates part 2: The hamburger menu
    • What is a hamburger menu
    • Finding a menu template
    • Using the hamburger menu in your responsive design
    • Adapting the template to your needs
  9. RWD part 4: Putting it together
    • Recapping what we know so far
    • Laying out a full width, responsive website on a flexible grid with parallax images and a hamburger menu
  10. RWD part 5: Best practices
    • Discussing best practices when designing for all screen sizes
    • Image optimisation and why it is vital in modern web design
    • Revisiting progressive enhancement and graceful degradation
    • The future of RWD


Connect with us

Wimbledon Branch

45 Wimbledon Hill Road, Wimbledon, London SW19 7NA, United Kingdom

Ealing Branch

43-47 New Broadway, Ealing, London W5 5AH, United Kingdom

  • dummy +44 (0) 208 947 1338

  • dummy +44 (0) 7783 424 089

  • dummy +44 (0) 208 947 7704

  • dummy info@amitycollege.co.uk


Enter your email and we'll send you more information

© 2019 Amity College Limited. All Rights Reserved.