Responsive Web Design

Description

In this course, you will learn how to design and build an interactive, professional-looking website using concepts from interaction design and human computer interaction. Using responsive grid layouts, you will learn how to make your web page designs adapt to different screen sizes. You'll learn how to add navigation and other design elements, as well as how to use JavaScript objects and templates to separate data and display.

You will be able to:

• Explain why users need to know where they are, where they can go, and what is on a web page by the end of the course.
• Create web page wireframe mockups.
• Recognize the primary functional elements of web pages
• Create page designs with Bootstrap components.
• Define data in a web page using JavaScript data structures such as arrays and objects.
• Convert data to HTML using the Handlebars template library.
• Use JavaScript event listeners to add interactivity to templates.

Syllabus:

 1. Responsive Web Design: Course overview

• Web design principles
• Usability and user experience
• Where can you go?
• What is here?
• Accessibility
• Guidelines for design
• Design examples

 

2. Realising design principles in code

• Basic Bootstrap set up
• Collapsible navbars
• Building out the site
• Responsive grid
• Bootstrap themes

 

3. Adding content to websites

• Separating structure and content
• JavaScript objects
• JavaScript templates with Handlebars
• Putting data into templates
• Displaying different data with the same template
• Displaying the same data with different templates, Use a Bootstrap modal

 

4. Building a full gallery app

• JavaScript arrays
• Storing objects in arrays and displaying them with a template
• Dynamically displaying single images from an array
• Implementing a search function
• Data structure for a complete image gallery
• Writing the templates for the gallery
• Switching displays in the gallery

Show more