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

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

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

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

Web Design and User Experience Engineering Part 1

Курс от Northeastern University
Начальный≈ 50.6 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

Introduces the fundamentals of developing web user-interface/user-experience (UI/UX). This course will focus on core concepts and best practices involved in developing web applications that are not tied to specific libraries or frameworks. Topics include HTML, CSS, Javascript, and basic accessibility (a11y).

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

Cascading Style Sheets (CSS)JavascriptHypertext Markup Language (HTML)Responsive Web DesignHTML and CSSWeb DesignSemantic WebData ValidationWeb Content Accessibility GuidelinesUser Interface and User Experience (UI/UX) DesignEvent-Driven ProgrammingAnimationsWeb Design and DevelopmentJavaScript FrameworksWeb ApplicationsFront-End Web DevelopmentUser Interface (UI)User Interface (UI) DesignUsabilityWeb Development

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

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

01HTML Fundamentals28 материалов

Getting Started

Course IntroductionЧтениеNortheastern University - Prior Learning Assessment ЧтениеSyllabus - Web Design and User Experience Engineering Part 1ЧтениеMeet Your FacultyЧтение

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

Brett Ritter

Instructor

Web Design and User Experience Engineering Part 1
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 50.6 ч

7 модулей

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

Субтитры: Арабский, Французский, Узбекский, Итальянский, Бразильский португальский, Корейский, Немецкий, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Meet Your Fellow Learners!Обсуждение
Course Content OverviewЧтение
Course Software and ToolsЧтение
Core Course ConceptsЧтение
Course FundamentalsЧтение
Academic IntegrityЧтение

Lesson 1: History of Web UI/UX Development

Week 1 Overview: HTML FundamentalsЧтениеEvolution of WebЧтение

Lesson 2: Introduction to HTTP Protocol, Request, Response, Status Codes, Request Methods, Servers, Browsers

What is the Web?ЧтениеServers and BrowsersЧтениеGeneral and HTML Casing Styles and IndentationЧтениеAssess Your Learning: General and HTML Casing stylesЗадание

Lesson 3: Command Line and the Modern Dev

Intro to the Command LineЧтение"serve" WebserverЧтениеAssess Your Learning: Web serversЗадание

Lesson 4: Looking up Information (MDN, W3Schools, ChatGPT)

Finding Good SourcesЧтениеThe Risks of ChatGPT, Copilot, and other LLMs when learningЧтениеUsing MDNЧтение

Lesson 5: Roles of HTML/CSS/JS

The Roles of HTML/CSS/JS on a Web PageЧтение

Lesson 6: HTML Syntax and Structure (incl, Hyperlinks)

Fundamentals of HTML SyntaxЧтение

Lesson 7: Semantic HTML

What and Why of Semantic HTMLЧтениеMost Common ElementsЧтениеSteps to Run the Code on Your LaptopЧтениеAssess Your Learning: Semantic HTMLЗадание
02CSS Fundamentals22 материалов

Lesson 1: CSS Syntax

Week 2 Overview: CSS FundamentalsЧтениеBasic CSS SyntaxЧтениеAdvanced CSS SyntaxЧтениеAssess Your Learning: CSS Syntax SelectorsЗадание

Lesson 2: Loading CSS, URLs, Absolute and Relative Paths

Loading CSSЧтениеDemo: Applying StylingВидеоAssess Your Learning: Final Paths of Absolute vs RelativeЗаданиеAssess Your Learning: CSS LoadingЗадание

Lesson 3: CSS Box Model, Inline, Block, Inline-block

Flow LayoutЧтениеThe 4 Parts of the CSS Box ModelВидеоCSS Box ModelЧтениеAssess Your Learning: Box ModelЗадание

Lesson 4: Debugging CSS using Browser DevTools

Demo: Applying the Box Model - Horizontal MenuВидеоDemo: Applying the Box Model - Vertical MenuВидеоAdditional ResourcesЧтениеDemo: Dev Tools and CSSВидеоAssess Your Learning: Styling the BoxЗадание

Lesson 5: Precedence, Specificity, and the Cascade

CSS Precedence and SpecificityЧтениеAssess Your Learning: Precedence and SpecificityЗадание

Lesson 6: Semantic CSS Class names, Semantic vs Utility Class Names

CSS Class NamesЧтениеSteps to Run the Code on Your LaptopЧтениеAssess Your Learning: Semantic vs Utility Class NamesЗадание
03Page Layout with CSS29 материалов

Lesson 1: Practical Starting Concepts

Week 3 Overview: Page Layout with CSSЧтениеLorem IpsumЧтениеEmmet ЧтениеFont BasicsЧтениеImages in ForegroundЧтениеImages in BackgroundЧтениеPractical Copyright for Web Devs ЧтениеAssess Your Learning: Identifying Semantic Class NamesЗаданиеAssess Your Learning: ImagesЗаданиеAssess Your Learning: Practical CopyrightЗадание

Lesson 2: Flexbox, Grid Areas

FlexboxЧтениеDemo: FlexboxВидеоDemo: Flexbox Part 2ВидеоGrid AreasЧтениеDemo: Grid AreasВидеоDemo: Grid Areas Part 2ВидеоAssess Your Learning: Flexbox vs Grid

Lesson 3: Responsive and Adaptive

Responsive and AdaptiveЧтениеDemo: Responsive and AdaptiveВидео

Lesson 4: Mobile First Design, Mobile First Implementation

Mobile Viewport ConsiderationsЧтениеMobile First Design ЧтениеMobile First Implementation ЧтениеAssess Your Learning: Mobile ConsiderationsЗадание

Lesson 5: Grid Columns and the 12 Column Grid

Grid Columns and SpansЧтение12 Column GridВидеоDemo: 12 Column GridВидеоChoosing between Flexbox and Grid ЧтениеSteps to Run the Code on Your LaptopЧтениеAssess Your Learning: 12 Column GridЗадание
04HTML Forms and Positioning18 материалов

Lesson 1: HTML Forms

Week 4: Overview: HTML Forms and PositioningЧтениеHTML Form SyntaxЧтениеKeyboard NavigationЧтениеCSS ResetЧтениеFloatЧтениеHTML Form LayoutЧтениеRegex Patterns ЧтениеHTML-Based Form ValidationЧтениеServer-Based Form ValidationЧтениеAssess Your Learning: HTML Form ElementsЗаданиеAssess Your Learning: 1 Column Form Layouts vs 2 Column Form LayoutsЗадание

Lesson 2: Positioning

Position ProperlyЧтениеDemo: Applied PositioningВидеоDemo: Applied Positioning Part 2ВидеоAssess Your Learning: PositioningЗадание

Lesson 3: Dropdown Navigation

Demo: Dropdown NavigationВидеоWeek 4 ResourcesЧтениеAssess Your Learning: Dropdown NavigationЗадание
05CSS Transitions and Animations12 материалов

Lesson 1: BEM Class Names

Week 5 Overview: CSS Transitions and AnimationsЧтениеBEM: Why and HowЧтениеAssess Your Learning: BEMЗадание

Lesson 2: Simple UI/UX Concepts

Simple UI/UX ConceptsЧтениеAdditional ResourcesЧтениеAssess Your Learning: Common UI/UX ConceptsЗадание

Lesson 3: Transforms

Transform Concept and SyntaxЧтениеAssess Your Learning: TransformsЗадание

Lesson 4: Transitions and Animations

Transition Concept and SyntaxЧтениеCSS Animation Concept and SyntaxЧтениеDemo: CSS-only Transitioning Dropdown NavigationВидеоAssess Your Learning: Transitions and AnimationsЗадание
06Introduction to Javascript21 материалов

Lesson 1: Loading JS

Week 6 Overview: Introduction to JavascriptЧтениеJavaScript (JS) OverviewЧтениеLoading and Running JSЧтениеAssess Your Learning: Loading JSЗадание

Lesson 2: Basic JS Syntax

JS Linting and Basic SyntaxЧтениеJS Variables and PrimitivesЧтениеJS Functions and CallbacksЧтениеJS Arrays and Objects ЧтениеObject vs Array LookupВидеоConditionals and ComparisonЧтениеLexical ScopeВидеоMutation and ScopingЧтениеJS LoopsЧтениеAssess Your Learning: Running JSЗадание

Lesson 3: The DOM

What is the DOMЧтениеAssess Your Learning: DOMЗаданиеAction on a Button Click ЧтениеAssess Your Learning: Basic JS SyntaxЗадание

Lesson 4: Debugging JS

Debugging Concepts and ApproachЧтениеDemo: Debugging JSВидеоAssess Your Learning: Debugging JSЗадание
07Applied Javascript16 материалов

Lesson 1: More JS Syntax

Week 7 Overview: Applied JavascriptЧтениеSpread and Rest OperatorsЧтениеDestructuringЧтениеJavaScript Object Notation (JSON)ЧтениеRegex & JS Syntax, and Common Mistakes ЧтениеAssess Your Learning: More JS SyntaxЗадание

Lesson 2: Using the DOM

DOM Node ContentsЧтение

Lesson 3: Events

JS EventsЧтениеAssess Your Learning: JS EventsЗадание

Lesson 4: JS-based Form Validation

Backend is Security, Frontend is ConvenienceЧтениеJS Based Form ValidationЧтениеJS Form Validation PitfallsЧтениеAssess Your Learning: Common Form Validation Pitfalls Задание

Lesson 5: Web Service Calls

Web Service Calls/AJAXЧтениеSteps to Run Code on Your LaptopЧтение

Course Wrap-Up

Congratulations! Чтение
Задание