К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Responsive Web Design · LearnSpace
Назад в каталог
courseraПрограммирование

Responsive Web Design

Курс от University of London, Goldsmiths, University of London
Уровень не указан≈ 27.9 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn how to make your web page designs adapt to different screen sizes using responsive grid layouts. You will learn how to add navigation and other design elements, and you will learn how to separate data and display using JavaScript objects and templates. At the end of the course, you will be able to: 1. Explain why users need to know where they are, where they can go and what is on a web page 2. Create wireframe mockups of web pages 3. Identify the key functional elements of web pages 4. Use Bootstrap components to realise page designs 5. Use JavaScript data structures such as arrays and objects to define the data used in a web page 6. Use the Handlebars template library to convert data to HTML 7. Add interactivity to templates using JavaScript event listeners In this course, you will complete: 1 website design assignment taking ~1 hour to complete 1 programming assignment taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

Навыки, которые вы освоите

Responsive Web DesignUsabilityJavascriptHypertext Markup Language (HTML)Bootstrap (Front-End Framework)Content ManagementData StructuresUser Interface (UI)WireframingCascading Style Sheets (CSS)Web DesignHuman Computer InteractionUser Experience DesignInteraction Design

Программа курса

5 модулей · 91 учебных материалов

01Responsive Web Design: Course overview3 материалов

Introduction

Course outlineЧтениеGrading and assessmentЧтениеLearning outcomesЧтение
02Web design principles 22 материалов

Module introduction

Учитесь у экспертов

Professor Matthew Yee-King

Lecturer

Dr Kate Devlin

Senior Lecturer

Prof Marco Gillies

Professor

Dr Mick Grierson

Reader

Responsive Web Design
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 27.9 ч

5 модулей

Язык: Английский

Субтитры: Арабский, Французский, Бенгальский, Украинский, Китайский (Китай), Греческий, Итальянский, Бразильский португальский, Вьетнамский, Нидерландский, Корейский, Немецкий, Пушту, Урду, Русский, Тайский, Индонезийский, Шведский, Турецкий, Азербайджанский, Испанский, Дари, Хинди, Японский, Казахский, Венгерский, Польский

Часть программы вашего университета
OverviewВидео
Lecture slidesЧтение

Usability and user experience

Usability and user experienceВидеоUsability and user experienceЗадание

Where can you go?

Where can you go?ВидеоWhere can you go?Задание

What is here?

What is here?ВидеоWhat is here?Задание

Accessiblity

URL for this lessonЧтениеAccessibilityВидеоAccessibilityЗадание

Guidelines for design

URLs for this lessonЧтениеLecture slidesЧтениеGuidelines for designВидеоGuidelines for designЗадание

Design examples

URL for this lessonЧтениеLecture slidesЧтениеDesign examplesВидеоDesign examplesЗадание

Summary

SummaryВидеоWeb design principles summary quizЗаданиеDesign principles on your favourite websiteВзаимная проверка
03Realising design principles in code25 материалов

Introduction

Code for this moduleЧтениеOverviewВидео

Basic bootstrap setup

URL for this lessonЧтениеBasic Bootstrap set upВидеоBasic Bootstrap starter code (inc. images)ЧтениеBasic Bootstrap set upЗадание

Where can you go?

URL for this lessonЧтениеWhere can you go?ВидеоWhere can you go?Задание

Collapsible navbars

Collapsible navbarsВидеоCollapsible navbarsЗадание

Building out the site

Building out the siteВидеоBuilding out the siteЗадание

Where am I?

URL for this lessonЧтениеWhere am I?ВидеоWhere am I?Задание

Responsive grid

URL for this lessonЧтениеResponsive gridВидеоResponsive gridЗадание

Bootstrap themes

URLs for this lessonЧтениеBootstrap themesВидеоBootstrap themesЗадание

Summary

SummaryВидеоRealising design principles in code summary quizЗаданиеWorking with navbarsВзаимная проверка
04Adding content to websites21 материалов

Introduction

OverviewВидеоURL for this moduleЧтение

Separating structure and content

Separating structure and contentВидеоSeparating structure and contentЗадание

JavaScript objects

JavaScript objectsВидеоJavaScript objectsЗадание

JavaScript templates with Handlebars

URL for this lessonЧтениеJavaScript templates with HandlebarsВидеоJavaScript templates with HandlebarsЗадание

Putting data into templates

Source CodeЧтениеPutting data into templatesВидеоPutting data into templatesЗадание

Displaying different data with the same template

Source CodeЧтениеDisplaying different data with the same templateВидеоDisplaying different data with the same templateЗадание

Displaying the same data with different templates, Use a Bootstrap modal

Source CodeЧтениеDisplaying the same data with different templates, Use a Bootstrap modalВидеоDisplaying the same data with different templates, Use a Bootstrap modalЗадание

Summary

SummaryВидеоAdding content to websites summary quizЗаданиеEdit a templateВзаимная проверка
05Building a full gallery app20 материалов

Introduction

OverviewВидеоSource Code for this moduleЧтение

JavaScript arrays

URL for this lessonЧтениеJavaScript arraysВидеоJavaScript arraysЗадание

Storing objects in arrays and displaying them with a template

Storing objects in arrays and displaying them with a templateВидеоStoring objects in arrays and displaying them with a templateЗадание

Dynamically displaying single images from an array

Dynamically displaying single images from an arrayВидеоDynamically displaying single images from an arrayЗадание

Implementing a search function

Source CodeЧтениеImplementing a search functionВидеоImplementing a search functionЗадание

Data structure for a complete image gallery

Source code for the galleryЧтениеData structure for a complete image galleryВидеоData structure for a complete image galleryЗадание

Writing the templates for the gallery

Writing the templates for the galleryВидеоWriting the templates for the galleryЗадание

Switching displays in the gallery

Switching displays in the galleryВидео

Summary

Building a full gallery app summary quizЗаданиеAnimal galleryВзаимная проверка