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

    Please call to enquire (0208 947 1338)


    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

     

    Connect with us

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

    • dummy +44 (0) 208 947 1338

    • dummy +44 (0) 208 947 7704

    • dummy info@amitycollege.co.uk

    Newsletter

    Enter your email and we'll send you more information