Syllabus
Welcome to Web Development and Design by Oval! We're happy to have you here. Over the course of this class, you will learn everything you need in order to build and publish your own fully functional website online.
In this course reader, you will find notes and tutorials for each lecture. While the entire course reader is available to you beforehand, we suggest that you read each chapter only after you have attended the corresponding lecture and have completed all previous homework (though feel free to take a look at what's to come!).
Schedule
The objective of this course is to equip you with the knowledge required to build your own personal website—be it a page about yourself, your favorite movie, your pet, or whatever else that you envision1. To do so, the course is split into 4 different units, with individual subchapters. Each subchapter has a supporting 2-hour lecture, notes, and homework. Some chapters refer to separate readings to support the knowledge that you obtain in lectures. During Chapter 1.2, you will set up a repository (directory) for your upcoming website, and all of the later assignments will help you improve it. Below is the table of contents—it covers everything from what is a browser to how to deploy your final website online.
UNIT 1 - Technical Foundations
Chapter 1.1: Browsers, Servers, Command Line Tools, IDEs.
How does a browser work? How does it retrieve information and how does it display it? This chapter focuses on the conceptual overview of computer networking and it will introduce you to the tools that every web developer needs to be comfortable with in order to build efficient websites rapidly.
Chapter 1.2: Introduction to Git. Introduction to HTML.
In this chapter, you will learn how to use Git, a version control system used by millions of developers. You will also learn about HTML—a markup language that defines the structure of every website that you ever visited. After that, you will set up a repository for your own starter website on Github.
Chapter 1.3: Introduction to CSS and Advanced HTML Tags.
This chapter covers advanced HTML elements such as buttons, images, as well as semantic tags to help you organize your code for readibility. It will also explain what is CSS and will teach you how to style your HTML elements (i.e., how to add colors, margins, background images, etc).
UNIT 2 - Design
Chapter 2.1: Introduction to User Interface Design.
We will take a break from coding and explore what makes a website visually appealing and easy to use. What is a design personality? How to use typography and colors to define your website personality? What is a design system? After completing this chapter, you will be ready to answer questions like these, will know about fundamental UI/UX design patterns, and will start sketching your own website.
Chapter 2.2: Advanced User Interface Design.
How to space elements of the interface? How to create color palettes? What are advanced techniques for designing text? After completing this chapter, you will equipped with the most essential tools for designing your website, will do advanced sketches for your own website, and will be prepared to learn about designing software in the upcoming chapter.
Chapter 2.3: Design Tools.
In order to be able to quickly and efficiently design beautiful websites, it is important to know how to use prototyping software. A very popular (and free) choice among developers is Figma—an online platform used by millions of designers. In this chapter you will learn how to use it and will be ready to start creating the final design for your website.
UNIT 3 - Introduction to Programming
Chapter 3.1: Programming in JavaScript.
So far you have set up the structure of your website, its elements, designed its appearance, and even know how to style them in CSS. But how do you animate your website to be dynamic and feature-rich? Here is where programming comes in. In particular, all browsers use JavaScript to add programmed components into your website. Before progressing to implementing the design that you have developed in the previous unit, we will learn how to make a website interactive. In this chapter, you will learn fundamental computer science concepts like variables, conditional statements, and loops, and will learn how to use them in JavaScript.
Chapter 3.2: Functions and Event Handlers.
How do you set up your website's elements such that the user can interact with them and can change the state of your website? The solution is to use event listeners and handlers. In this chapter, you will learn about JavaScript functions and how to use them to make elements of your website interactive.
UNIT 4 - Responsive & Rapid UI Design
Chapter 4.1: Element Alignment and Tailwind CSS.
Positioning elements on a website can be tricky. After this chapter, however, you will master this skill—we will show you what is a CSS Flexbox and Grid Layout and how to make prototyping them a lot faster using a utility-first CSS framework Tailwind CSS.
Chapter 4.2: Layout, Positioning, and Responsive Design.
How do you position your elements on the screen and organize them into containers and grids? How do you make your website look good on all devices, regardless of their screen dimensions? In this chapter, we will learn what Tailwind CSS capabilities you may use to organize your content and optimize it for different screen dimensions.
Final classes
Beyond HTML, CSS, and JS. Office Hours.
The previous ten chapters have covered a substantial amount of information — in fact, we've designed them to cover the most important insights and skills we've gained ourselves over multiple years of web development. By now, your website is almost ready, though we realize that you may still have lingering questions. Use this time to ask us anything! Besides that, we will cover some of your possible next steps beyond the course during the lecture. For homework, you will finalize your website and deploy it online.
Project Presentation.
Congrats! You've worked very hard and we hope you are proud of what you have built. Share your website with us!
Course Policies
This course is fast-paced: over the duration of the course, you will learn fundamentals of computer science, networking, and front-end web development. In order to make sure that everyone is keeping up with the workload and is getting a solid grasp of the material, each lecture will be followed by homework that is due the upcoming lecture. For example, Lecture 1 will have Homework 1 that will be due Lecture 2.
1 Within reasonable complexity constraints, of course — we can't teach you how to build a new startup in one month, but you are definitely going to be proud of what you build!