This repository contains the starter code and project templates for the WDD 230 course, "Web Frontend Development I." The course focuses on the planning, design, and development of responsive websites using HTML, CSS, and JavaScript, with attention to usability, accessibility, and best practices in web frontend development.
This course emphasizes the development of responsive and accessible websites using modern web technologies. Key areas of focus include:
- Semantic and valid HTML
- Contemporary CSS for styling
- JavaScript for interactivity
- Usability and accessibility best practices
- Effective planning and design methodologies
By the end of this course, students will be able to:
- Develop web pages that are semantic and valid using contemporary Hypertext Markup Language (HTML).
- Style web pages using valid, contemporary Cascading Style Sheets (CSS) and avoid all HTML presentation markup.
- Provide content that is visually appropriate, usable, and findable to humans and machines.
- Plan, design, and develop web pages and sites according to best practices of organization and maintainability.
- Work with JavaScript to handle events and interactions within the browser, including JSON and remote APIs.
- Work effectively within a team by teaching and learning collaboratively, communicating clearly, fulfilling assignments, and meeting deadlines.
| Week | Topics | Assignments |
|---|---|---|
| 1 | Course setup, introduction to HTML and CSS | Course Home Page |
| 2 | Advanced HTML and CSS techniques, design principles | Course Home Enhancement, Design Principles Document |
| 3 | Responsive design, media queries, CSS frameworks | Chamber Site Plan |
| 4 | Forms and tables, accessibility considerations | Chamber Home Page |
| 5 | JavaScript basics, DOM manipulation | Book of Mormon App, Chamber Home Continued |
| 6 | Advanced JavaScript, working with JSON and APIs | Chamber Home Continued |
| 7 | Web performance optimization, SEO best practices | Chamber Discover Page |
| 8 | Version control with Git, collaborative development | Form Page Build, Chamber Join Page |
| 9 | Web hosting and deployment strategies | Chamber Directory Page |
| 10 | Progressive web apps, service workers | Chamber Home Enhancement |
| 11 | Final project planning and development | Chamber Project Submission |
| 12 | Final project development and testing | Individual Website Project |
| 13 | Final exam preparation, project presentations | Final Exam, Final Project Work |
| 14 | Course review, final project submission | Individual Final Project |
- HTML5
- CSS
- JavaScript
- Git/GitHub
To view my personal website which includes the final project as well as several other websites I built:
Personal Website
Please note this material is for educational purposes only. Redistribution or reuse is prohibited without permission.