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.

General

Bento is an excellent resource full of links to tutorials, references, and other sites. It organizes them all into tracks and topics, with a well-curated set of links for each and guidance on what to move to next after completing each one. It’s great for helping you organize your study of web development, and the topics page is a great place to look for resources on a specific topic of interest. If you don’t find an answer or a sufficient explanation of something in the resources below, look here for alternatives that may do a better job for you.

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:

  • 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.
  • 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.
  • 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:

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.

  • The JavaScript Basics page does a good job introducing, well, the basics of the language. Work through this to learn the syntax and some important aspects of using Javascript in a web page. You can skip the “Supercharging our example website” section.
  • Not required, but helpful: What is JavaScript? explains further how Javascript fits into and works within a web page.
  • 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.
    • 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 (“A series of fortunate events” 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.
    • Fetching data from the server — The second important piece of making fast, interactive sites is loading information from the server without reloading the entire page. This page shows you how to do that using the Fetch API provided by modern browsers. Just read to get the basic idea at first; don’t worry about the API details right away.

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.

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: