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

Intermediate

 

Duration & Cost

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

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

 

Course Start Date

October 2017


Certification

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

 

Refer A Friend Banner


Website security

NUS NY 728x90 2016 12 15 V1 NC

Opening Hours

Monday
09:00 - 21:00
Tuesday
09:00 - 21:00
Wednesday
09:00 - 21:00
Thursday
09:00 - 21:00
Friday
09:00 - 21:00
Saturday
09:00 - 21:00
Sunday
09:00 - 21:00
Go to top
Join us at Amity College Ltd.