In this course, students go beyond the code to understand what is really important in web development. Through creating a mental model of how web development works, student are exposed to the big picture of how users interact with websites. By building empathy and an understanding of target audience needs, students recognize the benefits of approaching design from the perspective of the user and the importance of accessibility, biases, and cultural sensitivity. Finally, students dive into the inner workings of the web to remove the mystery and build a clear picture of how websites work. Ultimately, the goal of this course is to prepare students to design and build beautiful, functional websites that meet the needs of their target audience.

In this course, students will start by identifying the various types of elements that exist in a web page and the importance of information architecture. They will immediately begin organizing and structuring web page content and then markup the content using HTML. This process will introduce the document object model, which enables students to build a mental model of how web pages are built and how web browsers render those pages. Important facets of writing valid HTML that is also semantically sound are introduced through a number of code writing activities. From single page coding, we zoom out to explore how websites with multiple pages, hyperlinks, and navigation are organized and developed. Students will take these new skills and apply them to building a simple multi-page website with valid code and a functional navigation.

In this course, students will engage in a design-first approach, focusing on understanding the needs of the user and prioritizing designing over coding. By engaging with personas and gaining empathy for a website’s audience, students identify the needs of their users and apply visual design principles to make sites accessible. With designs in hand, students will learn to write Cascading Style Sheets (CSS) and create rules to implement their design. Along with writing and implementing CSS code, students will explore validating, troubleshooting, and improving their CSS.

In this course, you will employ visual design practices and principles to create attractive, functional websites styled with CSS. Through a thorough investigation of the CSS box model, you are introduced to concepts such as padding, margin, whitespace, and element sizing. These concepts are then given the context of visual design principles to help you make layout and design choices that are user-centric and functional. You will then practice the layout design process to create sketches and wireframes of your designs. With plans in place, you will then write CSS to implement the design to effectively style and layout HTML elements accurately. Finally, you will go a step further to ensure this design is flexible and responsive on the many devices that could be used to visit your site.

In this course, you will explore the potential of interactivity by adding JavaScript to a website. First, you will consider the use of interactivity and identify some common best practices and pitfalls. You will then dive into the JavaScript language, practicing the basics of JS syntax and jQuery. Next, you will discover event-based programming concepts such as event handlers, state, and conditionals. Finally, you will debug both the syntax and logic of your JS code.

In this course, you will build a form to collect data input. This process begins with analyzing how web requests work and identifying the parameters of the hypertext transfer protocol (HTTP). Next, you will design and code a form to collect user data. You’ll use advanced topics such as client-side form validation and error messages to improve the user experience and overall validity of collected data. You will then evaluate your form and implementation to ensure the final design is appropriate and functional.