Responsive Web Design: Course overview-Introduction
Course outline
Grading and assessment
Learning outcomes
Web design principles -Module introduction
Overview
()
Lecture slides
Web design principles -Usability and user experience
Usability and user experience
()
Web design principles -Where can you go?
Where can you go?
()
Web design principles -What is here?
What is here?
()
Web design principles -Accessiblity
URL for this lesson
Accessibility
()
Web design principles -Guidelines for design
URLs for this lesson
Lecture slides
Guidelines for design
()
Web design principles -Design examples
URL for this lesson
Lecture slides
Design examples
()
Web design principles -Summary
Summary
()
Realising design principles in code-Introduction
Code for this module
Overview
()
Realising design principles in code-Basic bootstrap setup
URL for this lesson
Basic Bootstrap set up
()
Basic Bootstrap starter code (inc. images)
Realising design principles in code-Where can you go?
URL for this lesson
Where can you go?
()
Realising design principles in code-Collapsible navbars
Collapsible navbars
()
Realising design principles in code-Building out the site
Building out the site
()
Realising design principles in code-Where am I?
URL for this lesson
Where am I?
()
Realising design principles in code-Responsive grid
URL for this lesson
Responsive grid
()
Realising design principles in code-Bootstrap themes
URLs for this lesson
Bootstrap themes
()
Realising design principles in code-Summary
Summary
()
Adding content to websites-Introduction
Overview
()
URL for this module
Adding content to websites-Separating structure and content
Separating structure and content
()
Adding content to websites-JavaScript objects
JavaScript objects
()
Adding content to websites-JavaScript templates with Handlebars
URL for this lesson
JavaScript templates with Handlebars
()
Adding content to websites-Putting data into templates
Source Code
Putting data into templates
()
Adding content to websites-Displaying different data with the same template
Source Code
Displaying different data with the same template
()
Adding content to websites-Displaying the same data with different templates, Use a Bootstrap modal
Source Code
Displaying the same data with different templates, Use a Bootstrap modal
()
Adding content to websites-Summary
Summary
()
Building a full gallery app-Introduction
Overview
()
Source Code for this module
Building a full gallery app-JavaScript arrays
URL for this lesson
JavaScript arrays
()
Building a full gallery app-Storing objects in arrays and displaying them with a template
Storing objects in arrays and displaying them with a template
()
Building a full gallery app-Dynamically displaying single images from an array
Dynamically displaying single images from an array
()
Building a full gallery app-Implementing a search function
Source Code
Implementing a search function
()
Building a full gallery app-Data structure for a complete image gallery
Source code for the gallery
Data structure for a complete image gallery
()
Building a full gallery app-Writing the templates for the gallery
Writing the templates for the gallery
()
Building a full gallery app-Switching displays in the gallery
Switching displays in the gallery
()