CS50: Internet & HTML (more comfortable)

These links are for the more comfortable track, though everyone is encouraged to watch the CS50 videos on Internet Basics and HTML.

Internet Basics

There are many, very informative CS50 videos that go over how the internet works. You may want to take a look at these before getting started, but don’t worry if you don’t understand every detail. It is not necessary to understand everything before coding in HTML, but you will want to have some idea of the difference between GET and POST requests before starting on CS50 Finance.

CS50: Internet Basics (HTTP, DNS, DHCP, etc.)

Learning HTML/CSS

Once you feel ready to start coding, take a look at the videos on HTML and CSS. Keep in mind that David Malan’s videos were made before CS50 began using Cloud 9, so you will go through a difference process to preview your web pages. Doug’s video shows you can control click ‘preview’ to quickly look at the result of your code without having to start up the apache server. A great reference that you may use in conjunction with these videos is www.w3schools.com.

CS50: HTML/CSS

Web Based Problem Sets

Problem 4-0: Create your own web page

Now it’s time to choose your own adventure! Your mission is, quite simply, to have fun with HTML and implement a project of your choice subject only to the following minimum requirements.

Your code of course must be well structured, use <head> tags, <title> tags, and <body> tags. Please validate your code through https://validator.w3.org as you would with check50.

  • Your project must have at least two links, at least one of which must go to an outside website.
  • Your project must have at least three images or movies.
  • You must use three different colors.
  • Your project must use at least one table, form, or list.
  • You must use some CSS styling (inline styling is ok).

Problem 4-1: Create your own search engine

Create a front end to a search engine such as google.

  • Use a form to submit a GET request to google or another search engine.
  • Create a logo or use styled type. You can go to google.com/fonts and choose a font that you like, then click on “use” to get the html and css that you will copy and paste into your own programs.
  • Style the page with a separate .css file to make it as organized and attractive as possible.

Problem 4-2: CS50 Finance

You will complete this HTML/CSS/PHP/SQL implementation of CS50 Finance which you can preview at https://finance.cs50.net/login.php.

Since the program spec for CS50 AP is not yet complete, you will work directly with Harvard’s CS50 spec which is named Problem Set 7.

The HTML and CSS videos are included in the HTML link above, but PHP and SQL are not, so please be sure to view the embedded videos.

This program is more complex than any you have done so far in this class, so be easy on yourself, take it one step at a time, and feel free to work with a partner if you prefer. This is a major project you can enhance and turn into your final project if you like. There is much work to be done here, but at the same time, has the potential to be very rewarding!

When you are finally ready to submit, please upload the pset7.tar.gz file to your dropbox and not to Harvard’s server!