Web Development Basics

To do web development, you need a few core concepts and technologies. You have to understand the basics of the web itself, you need HTML, CSS, and JavaScript for the “front-end” that is sent to and displayed in the browser, and you need some “back-end” language for the code running on the server (in CS 253, we use Python).

The following are solid, useful resources for learning the basics of web development.

Web

To start, you need a basic understanding of how the web works:

HTML

Then, to create a web page, you’ll have to use HTML:

  • CS50 Web Week 0 — The first 37 minutes of this 2 hour lecture (video plus written lecture notes) covers HTML with clear explanations and examples throughout.
  • Fundamentals of Web Programming: HTML Basics — This interactive textbook includes active code (edit and “run” the HTML samples to see how they render) and interactive exercises and a quiz to check your understanding.
  • MarkSheet.io: HTML 5 — Includes 13 pages covering the basics of HTML. Lots of clear, concise descriptions with examples for each concept. May be too brief in some cases, but good for a quick overview of the most important concepts.
  • HTML Dog — Tutorials organized into Beginner, Intermediate, and Advanced levels. These are somewhat hands-on, directing you to actually create a page and try things out as you read. The Beginner tutorial covers about the same amount as the MarkSheet.io tutorial, though with more hands-on direction, while the other two go well beyond.

Reference

Either of these sites will be good for looking up the details of a tag or attribute:

CSS

CSS is the language used to add “style” (formatting and layout) to a page:

  • CS50 Web Week 0 — CSS starts at minute 37 (see the “Chapters” dropdown to navigate straight to it, and again, the written lecture notes are useful). The sections starting from “Responsive Design” are related to CSS as well, but in the context of CS 253, we will get to some of those later.
  • Fundamentals of Web Programming: Cascading Style Sheets — Again, this site includes active code and interactive exercises to aid your learning.
  • MarkSheet.io: CSS 3 — 29 quick lessons, each covering one basic topic of CSS.
  • HTML Dog — Again organized into Beginner, Intermediate, and Advanced levels, and again more hands-on than MarkSheet.io.

Reference

To look up the details of a property, selector, value, etc.:

JavaScript

The Mozilla Developer Network (MDN) JavaScript documentation is high quality and offers several paths to information. The following selections are a good path for a student in CS 253.

  • First, read through the first three sections of What is JavaScript?, stopping at “How do you add JavaScript to your page?”, unless you’re curious about that part, too. It does a good job introducing the language and how it fits into web pages.
  • Then, the JavaScript Basics page does a good job introducing… the basics of the language! Work through this to learn the syntax and some important aspects of using JavaScript in a web page. And do work through it, downloading and modifying the files they provide to follow along, do everything yourself, and test each step as you go. You won’t learn nearly as well from just reading through it alone.
  • Of the remaining pages (and there are many), these are the most important for a student in CS 253:
    • Functions — reusable blocks of code — Much of this will go quickly for you, since you’re already familiar with functions. The section on anonymous functions and arrow functions, though, covers an aspect of functions that is used heavily in JavaScript and likely to be new for you. The section on function scope and conflicts is less important to us at this point in CS 253 and can be skimmed.
    • Manipulating Documents — Covers how you can use JavaScript to modify elements of a page within the browser. This is one of the most common uses for JavaScript in web pages. This is how we can have fast interactivity within a page. In this article, focus on the following DOM API methods and how they work in the examples:
      • document.querySelector() [MDN docs]
      • document.querySelectorAll() [MDN docs]
      • document.createElement() [MDN docs]
      • Node.appendChild(), Node.removeChild(), and Element.remove()
    • Introduction to Events — The first two sections (“What is an event?” and “Using addEventListener()”) are most important (yes, you can stop after them if you want to). This teaches how to make things happen in a page based on events like the user clicking somewhere or typing something.

Beyond that, you can always look up any topic you need in the MDN documentation. It’s an excellent source and first stop for information.

Flask (Python Back-End)

The official Flask documentation is a go-to reference for specific details, and it contains a good tutorial as well. In CS 253, we will build our applications with a simpler architecture than that presented in the newest tutorial, so I have archived a slightly modified copy of the older Flask 0.12.4 Tutorial, which presents the simpler architecture.

The Learn Flask tutorial at Tutorialspoint is relatively easy to follow, and it follows a path of developing a Flask application closest to the model we use in CS 253.

The Flask Mega-Tutorial walks through Flask web development in 23 separate chapters, each covering a particular sub-topic — Good for reading through in order or for looking up a specific topic. It does use a more complicated architecture for its example application than we use in CS 253, however.

CS50x Week 9 - Flask is a 2.5 hour lecture video from Harvard’s CS50x class covering Flask and web application development. The site provides additional resources connected to the lecture, including written lecture notes that you may find useful.

Explore Flask is mostly a collection of best practices for Flask web development — It won’t work as a tutorial, but it is good for learning how best to approach certain aspects of developing with Flask.

Courses:
modified: