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: £2,150.00
Option 2:
Saturday, 10am to 1pm for 10 weeks: £2,150.00
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:
- JavaScript and jQuery
- PHP with MySQL for Beginners
Career Paths
Web Designer
Course Details
- 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
- 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
- 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
- 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
- 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
- Using templates part 1: Grids
- Templates vs. DIY
- Finding a grid template
- Building a site on a grid template
- Image magic: Parallax scrolling
- What is parallax scrolling
- Parallax images
- Using a jQuery plugin to create a parallax image
- 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
- 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
- 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