Syllabus
Responsive Design 1

Responsive Design 1

UXUI-1373

Credit Fall 2020
08/24/2020 - 12/13/2020

Course Information

Section 001
Distance Learning
MW 15:00 - 15:55
DLS DIL
Jennifer Jones

Section 001
Laboratory
MW 15:55 - 17:40
DLS DIL
Jennifer Jones

Office Hours

No office hours have been entered for this term

Course Requirements

WEB DESIGN 1: 16 WEEK CALENDAR

 

Weeks 1-3

Competency One: Use HTML for the structure and content of a web page

  • Be introduced to HTML Syntax
  • Learn when to use Absolute & Relative URLs
  • Add images to a web page
  • Be Introduced to Cascading Style Sheets (CSS)
  • Upload files to a Live Website using FTP

Weeks 4-5

Competency Two: Write CSS3 styles to format the elements of a web page

  • Identify CSS Class Selectors
  • Use the Div Tag for Basic Page Formatting
  • Use Browser Developer Tools
  • Identify HTML5 Semantic Elements

Weeks 6-7

Competency Three: Create CSS3 to format fluid page layouts

  • Implement fluid Layout & Max-Width
  • Test run a Real-World Layout
  • Work with the Box Model
  • Use Floats & Images

Weeks 7-9

Competency Four: Structure, style and embed specialized content on a web page

  • Code Links with Images & Page Jumps
  • Style Links
  • Style the Navigation
  • Share CSS & Center Content
  • Set the Viewport Meta Tag
  • Set CSS Background Images
  • Have Fun with Fonts

Weeks 10-11

Competency Five:  Use advanced layout techniques, high res graphics, CSS specials

  • Fine-Tune a layout with Box Model
  • Use CSS Buttons & Floats
  • Implement Hi-Res Images

Weeks 12-13

Competency Six:  Code an interactive image-rich webpage

  • Review HTML and CSS
  • Demonstrate how HTML is used to mark up or describe the content
  • Use CSS to styles the content based on markup
  • Use native CSS capabilities of modern browsers
  • Code images and videos that resize in accordance with browser size
  • Implement web-font typography and CSS animated transitions
  • Use media queries to adapt content

week 14-16

Competency Seven:  Demonstrate the capabilities of Responsive Web Design (Final Project)

  • Create a website from scratch using the skills you have learned
  • Use all best practices
  • Demonstrate mastery of typographic and layout properties


 

Readings

Free Online Book: HTML & CSS Guidebook

https://htmlandcssguidebook.com/index.html

 

Course Subjects

COURSE DESCRIPTION

Catalog Description:

WECM description: Instruction in web page design and related graphic design issues including markup languages, websites, and browsers.

VisCom description: Instruction in designing and building websites, essential HTML5 and CSS3, responsive design, and related visual design and web content issues.

 

Course Prerequisites:

The students enrolled in this course should have a familiarity with general Macintosh procedures as well as experience with Adobe Photoshop. Students should be ready to work in a professional manner and respect the instructor’s efforts to spend time with as many students as possible each time we meet. Students will be expected to complete assigned work with excellence to achieve the best possible grade. If a student desires to challenge the prerequisite course(s) they may do so. Please contact the Visual Communication office for more information.

 

COURSE RATIONALE/OBJECTIVES

Instruction in best practices for building responsive websites that adapt to different devices and user behaviors. Responsive design topics to be covered include: HTML5; CSS3; semantic html; code frameworks; designing with fluid grids; creating layouts which incorporate typography and fluid media; using CSS media queries; responsive web typography; color; templates; hosting; web apps; web services. Students are then prepared to 1) evaluate whether or not responsive web design is a viable career option for them, and 2) pursue more advanced study in web, interaction, and UX design if they choose to do so.

 

COURSE SNAPSHOT

In this class you’ll learn how to code HTML and CSS, the coding languages used to create web pages. I focus on best practices for structuring the content of your webpages with HTML and then styling the content with CSS.

 

Once you have the basics under your belt, you'll move on to real-world page layout. You’ll learn text and link styles, centered page layout, background images, CSS-based navigation, forms, uploading files via FTP, and much more. I will provide you with content and prepared images for use in these projects but this training will give you hands-on practice coding websites from scratch all the way through uploading them to make them live.

 

Student Learning Outcomes/Learning Objectives

  • Coding Basics: HTML Syntax
  • Creating Links: Text, Images, Email, & Named Anchors
  • Adding Images
  • Cascading Style Sheets (CSS)
  • Div Tag & Basic Page Formatting
  • Using Browser Developer Tools
  • HTML5 Semantic Elements
  • Fluid Layout & Max-Width
  • Real World Layouts
  • The Box Model
  • Floats & Images
  • Styling Links
  • Styling the Navigation
  • HTML & CSS Wireframe
  • CSS Background Images
  • Google Fonts
  • CSS Buttons & Floats
  • Hi-Res Images
  • Uploading to a Live Website via FTP
  • Form Basics