Course Overview
- There are no prerequisites for this course, it is introductory
- Students should have basic typing skills and the ability to listen to, read, and follow instructions
- Using libraries to write HTML/CSS for the course is not allowed
- Using a WYSIWYG editor to write code for the course is not allowed
Course Materials
- Required Textbook: a custom zyBook created specifically for the course (more information can be found in the Canvas shell and in the ASU class catalog)
- Course Announcements and Communication: Slack
- Course Materials: Canvas (find the link in your myASU)
- A Code Editor: Visual Studio Code
- A GitHub Account (signing up with your student email and verifying it allows you to access free software and tools!)
- Software (installed on personal computer): GitHub Desktop
- Adobe Creative Cloud (free for ASU students)
- Google Drive (free for ASU students)
- A Figma Account (free)
- A CodePen Account (free)
Assignments
There are multiple types of assignments in each module: zyBooks Participation Activities, zyBooks Challenge Activities, a quiz, and Module Homework/Coding Assignments. Participation and Challenge Activities are to be completed in your zyBook, and the Homework assignments generally ask you to apply the knowledge gained in that module, using it to write some code.
Students are required to complete the zyBook Participation Activities before the course meeting where they are discussed and practiced.
The course also includes a final project that allows the student to use their understanding of HTML/CSS to build a website.
Course Topics
- Course Setup & Overview (installing software, creating accounts, setting up coursework organization)
- Web Functionality & Version Control Practice (GitHub, GitHub Desktop, repositories, forking, creating, cloning, commits, pushing/pulling, web history, DNS, Web Trends)
- Considerations During the Site Building Process (wireframes, content, mobile websites & browsers, hosting & domain names)
- HTML Document Structure & Basic Tags (intro to HTML, document structure, text tags, special characters, accessibility tools, best practices)
- Semantic HTML & Links/Navigation (semantic HTML, page structure, tables, links (and best practices for accessibility), lists, site/page navigation)
- Images, Audio, & Video in HTML (adding images, audio, or video to a web page, embedding an iframe element, responsive images, image best practices for accessibility)
- HTML Forms (HTML forms, form widgets & labels, best practices for accessibility)
- CSS Introduction & Selectors (intro to CSS, adding CSS to a site/project, the CSS cascade, CSS Reset code, CSS selectors)
- CSS Box Model, Text Styling, Common Properties, & Color (the CSS box model, common CSS properties, mobile development tools, font and text properties, color in CSS, best practices for accessibility)
- Styling Forms with CSS (styling HTML forms, best practices for accessibility)
- CSS Flexbox, Positioning, & Media Queries (CSS flexbox, positioning elements in CSS, writing media queries for responsive websites)
- CSS Grid (CSS grid, combining grid and flexbox to style page elements)
- CSS Animation & Special Effects (custom animations and transformations with CSS, CSS special effects: borders, shadows, gradients, etc.)
- An Approach to Web Page Development (review of site development process, coding a simple web page from scratch)
Resources for Students
GIT Coding Resources:
Have additional questions? Reach out to the professor teaching the course section you have interest in registering for using the course catalog. The clickable name shown there leads to the profile that includes their contact information.
Credits:
Created with images by wutzkoh - "Asian man working code program developer computer web development working design software on desk in office." • Tee11 - "HTML code on computer monitor. Software / Web Developer Programming Code" • Melisa - "Code background in editor. Web programming with css coding"