Web Design and User Experience Engineering Part 1

Northeastern University via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Paid Certificate Available
Duration & workload

2 days 2 hours 28 minutes
Sessions

On-Demand
Subtitles

English

Found in

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Grab it

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).

Syllabus

HTML Fundamentals

This week emphasizes the importance of Semantic HTML and explores the definition and value that Semantic HTML provides .. We will cover how to use resources like MDN and the browser Developer Tools (DevTools)while being cautious of AI tools like ChatGPT. An examination of HTML, CSS, and JavaScript roles will follow, including HTML syntax, structure, and semantic elements.

CSS Fundamentals

This week, we examine CSS syntax, specificity, and semantic class names. We discuss loading CSS, the CSS box model and related properties, and the differences between inline, block, and inline-block elements in the flow layout. The week also covers debugging CSS using the browser DevTools and applying the box model to create various common layouts. The main assignment for this week involves creating CSS for an existing HTML page to match a requested appearance.

Page Layout with CSS

This week, we cover some common web design concepts, such as placeholder text and images, the issues that drive and complicate font selection, and important accessibility issues such as respecting text size and alt text. We examine some common misunderstandings regarding copyright law and how this impacts work as a web developer. We explore more layout options with CSS, learning about Flexbox, Grid Areas, and multi-column grids. We discuss the meanings and implementation of responsive and adaptive design in web pages. The main assignment for this week provides an approximate layout with changes between desktop sizes and mobile sizes and asks you to write the HTML and CSS to create a solution.

HTML Forms and Positioning

This week, we focus on the structure and layout of HTML forms, covering the syntax of various form-related elements and the related basic accessibility needs and mistakes, along with the limited HTML-based validation available for forms. I present common layouts for form labels and fields, including exceptions, and discuss how these layouts are or are not beneficial for your user experience. We also cover the different options for the position property and how these options are used to resolve common web design desires, including building a "dropdown" navigation menu. The main assignment for this week requires you to match a requested layout on a form that will submit data to a provided server.

CSS Transitions and Animations

This week, we introduce BEM (Block, Element, Modifier) class naming conventions and explore their use, reasoning, and potential benefits. We cover common UI/UX concepts such as hero images, calls-to-action (CTAs), the concept of "the fold," panels, cards, and breadcrumb navigation.We also dive into the syntax and practical application of CSS transforms, transitions, and animations. Finally, we will learn to restrict any animation to respect user settings about reduced motion and add motion to our dropdown navigation example.

Introduction to Javascript

This week provides an introduction to JavaScript, focusing on key concepts and practical applications. You will explore how to load JavaScript and understand its basic syntax through this week's readings and quizzes. Topics such as variables, functions, arrays, objects, conditionals, loops, and lexical scope will be discussed, alongside some video animations to illustrate more complex concepts. We will also delve into the Document Object Model (DOM), a method of manipulating web pages dynamically using JavaScript. Finally, we will explore debugging techniques used to help identify and fix errors. To reinforce your learning, you will complete an assignment in which you will build a "Rock-Paper-Scissors" game that integrates buttons and console interactions, thus demonstrating the above core skills.

Applied Javascript

This week, we deepen your understanding of JavaScript by introducing advanced syntax concepts, including spread and rest operators, destructuring, JSON, and regular expressions. You will explore how to interact with the DOM by manipulating node contents and handling JavaScript events, reinforced with quizzes to check your understanding. This week also covers JavaScript-based form validation, highlighting best practices, common pitfalls, and the importance of balancing front-end convenience with backend security. The week culminates with an assignment where you create a form submission feature with integrated JavaScript validation, applying key concepts from the lessons to ensure functionality in web applications.