June 04, 2025

Introduction to Web Programming

Pre-Activities

In preparation for our web programming session today, please complete the “Build & Deploy Your First Website” section of Scrimba’s Learn HTML & CSS lesson, from Welcome to Build a Personal Website. Stop before Deploy your personal website. If you encounter any issues accessing the scrim, please email Kiran to let her know.

Some Caveats: No learning tool is perfect! Here are a few things to note as you work through the assignment:

  • This Scrimba lesson doesn’t work on Safari, so please use Firefox, Brave, or Chrome.
  • Please note that you can use any text editor, like TextEdit on Mac or Notepad on Windows, to write, edit, and open code.
  • The instructor states that you can pull any images you want from the web to use on your site; while this is technically true, it’s legally not, since that may be a violation of copyright law.
  • Lastly, note that hot-linking, or using external links from across the web for images, is not best practice, as this can create instability in your site (if the link changes) and increase network traffic to the image source’s site.

Session Activities

HTML Editors

For today’s activities, you’re going to need some sort of program to to edit and preview your code. While you can simply use the text editor on your computer (TextEdit, NotePad or WordPad, etc.), it may be easier for this session to use an in-browser editor. The W3 Schools TryIt editor or JS Bin both work well.

HTML Practice Exercises

While the web sites and pages that you program for your project will naturally end up somewhere on your computer, it can be helpful to take a step back and use analogue technology (paper and pencil!) to help think through your HTML structure. Following up on your homework from last session, let’s work through some basic HTML exercises. You can type your answers if needed by making a copy of the HTML Exercises Box document, but I recommend writing using a pen/pencil on the printed handout instead.

Once you’ve completed all or as many of your exercises as you can, let Kiran or Eliza know. We’ll get back together as a group and discuss any challenges, thoughts, or questions you have.

Playing with CSS

Now that we’ve covered HTML, let’s learn a bit about it’s companion language, CSS. Click on the link to the sample page below. Once you’re there, try toggling the CSS on and off to see how it changes:

  • Sample page What changes do you see? Use the web developer tools in your browser to look at the source code of the webpage. What parts of the code do you think are CSS?

Copy, Paste

There are two sample webpages, Colors of Cats and Fluffy Dogs. Pick one of these two webpages and in your own GitHub repository, in a file, or on a piece of paper, try to recreate the page without using your developer tools or GitHub to look at the source code. You can use W3 schools HTML elements reference page and CSS reference page for help. Feel free to change the pictures used on the sites, or link to the ones in the img folder of this sample-pages repository.

Remember, there may not be one exact right answer, so feel free to experiment!

Review of the many ways to add CSS

In this section, we’ll quickly go over a few different ways that you will see CSS added to the HTML on a page. This includes: inline CSS, head CSS, a separate stylesheet, and imported individual, section-based stylesheets.

References

Throughout this lesson, feel free to refer to the Resourecs > For Web Programming page to see references and helpful tools. You can also look at the sample webpages for examples to look at.

Homework

JavaScript

Tomorrow we’ll be talking more about JavaScript. To get a basic grasp of how JS works with HTML and CSS to power website elements, read the “What is JavaScript?” and “JavaScript walkthrough” sections of Mozilla’s MDN web docs Dynamic scripting with JavaScript documentation.

(Optional) Go through the JavaScript exercises in W3Schools JavaScript Tutorial, from JavaScript Introduction to JavaScript Strings.

Writing HTML and CSS

In the next ten minutes, take the time to write your own webpage in a GitHub repository, using a copy of Colors of Cats, Fluffy Dogs, or another GitHub template. You can put whatever you want on the webpage, but it must include at least: