Homepage

tl;dr

Build a simple homepage using HTML and CSS.

Background

The internet has enabled incredible things: we can use a search engine to research anything imaginable, communicate with friends and family members around the globe, play games, take courses, and so much more. But it turns out that nearly all pages we may visit are built on three core languages, each of which serves a slightly different purpose:

  1. HTML, or HyperText Markup Language, which is used to describe the content of websites;

  2. CSS, Cascading Style Sheets, which is used to describe the aesthetics of websites; and

  3. JavaScript, which is used to make websites interactive and dynamic.

Focusing on just the first two of those three languages for now, create a simple homepage that introduces yourself, your favorite hobby or extracurricular, or anything else of interest to you.

Getting Started

Here’s how to download this problem’s "distribution code" (i.e., starter code) into your own CS50 IDE. Log into CS50 IDE and then, in a terminal window, execute each of the below.

  1. Execute cd to ensure that you’re in ~/ (aka your home folder).

  2. Execute mkdir pset5 to make (i.e., create) a directory called pset5 in your home directory.

  3. Execute cd pset5 to change into (i.e., open) that directory.

  4. Execute wget https://cdn.cs50.net/2018/fall/psets/5/homepage/homepage.zip to download a (compressed) ZIP file with this problem’s distribution.

  5. Execute unzip homepage.zip to uncompress that file.

  6. Execute rm homepage.zip followed by yes or y to delete that ZIP file.

  7. Execute ls. You should see a directory called homepage, which was inside of that ZIP file.

  8. Execute cd homepage to change into that directory.

  9. Execute ls. You should see this problem’s distribution, including index.html and styles.css.

  10. You can immediately start a server to view the site by typing

    http-server

    in the terminal window and clicking on the link that appears, which should be of the form https://UUID-ide.cs50.xyz:8080.

Specification

Implement in your homepage directory a website that must:

  • Contain at least four different .html pages, at least one of which is index.html (the main page of your website), and it should be possible to get from any page on your website to any other page by following one or more hyperlinks.

  • Use at least ten (10) distinct HTML tags besides <html>, <head>, <body>, and <title>. Using some tag (e.g., <p>) multiple times still counts as just one (1) of those ten!

  • Integrate one or more features from Bootstrap into your site. Bootstrap is a popular library (that comes with lots of CSS classes and more) via which you can beautify your site. See Bootstrap’s documentation to get started. To add Bootstrap to your site, it suffices to include

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

    in your pages' <head>, below which can

    <link href="styles.css" rel="stylesheet">

    containing your own CSS.

  • Have at least one stylesheet file of your own creation, styles.css, which uses at least five (5) different CSS selectors (e.g. tag (example), class (.example), or ID (#example)), and within which you use a total of at least five (5) different CSS properties, such as font-size, or margin; and

  • Ensure that your site looks nice on browsers both on mobile devices as well as laptops and desktops.

  • No need to include any JavaScript on your site for this problem set, unless so inclined!

Testing

If you want to view how your site looks while you work on it, there are two options:

  1. Within CS50 IDE, navigate to your homepage directory (remember how?) and then execute

    http-server

  2. Within CS50 IDE, right-click (or Ctrl+click, on a Mac) on the homepage directory in the file tree at left. From the options that appear, select Serve, which should open a new tab in your browser (it may take a second or two) with your site therein.

In either case, you’ll be brought to a URL of the form

https://UUID-ide.cs50.xyz:XXXX

Where USERNAME is your username on CS50 IDE, and XXXX is either 8080 or 8081, those referring to the port number on which your web server is listening for requests (instead of the default 80 or 443 for HTTP and HTTPS requests, respectively). At that address, you’ll see a listing of all of the files in your homepage directory, and from there can navigate to any HTML page you’ve created.

Recall also that by opening Developer Tools in Google Chrome, you can simulate visiting your page on a mobile device by clicking the phone-shaped icon to the left of Elements in the developer tools window, or, once the Developer Tools tab has already been opened, by typing Ctrl+Shift+M on a PC or Cmd+Shift+M on a Mac, rather than needing to visit your site on a mobile device separately!

Assessment

Correctness

Afraid there’s no check50 for this assignment. Instead, your site’s correctness will be assessed based on whether you meet the requirements of the specification as outlined above, and whether your HTML is well-formed and valid. To ensure that your pages are, you can use the W3Schools HTML Validator service, copying and pasting your HTML directly into the provided text box. Take care to eliminate any warnings or errors suggested by the validator before submitting!

Design

In considering the overall design of your site, the staff will take into account the following, among potentially other things as well:

  • whether the aesthetics of your site are such that it is intuitive and straightforward for a user to navigate;

  • whether your CSS has been factored out into a separate CSS file(s); and

  • whether you have avoided repetition and redundancy by "cascading" style properties from parent tags.

Style

Afraid style50 does not support HTML files, and so it is incumbent upon you to indent and align your HTML tags cleanly, as the per the examples shown in Week 5’s lecture. Know also that you can create an HTML comment with:

<!-- Comment goes here -->

but commenting your HTML code is not as imperative as it is when commenting code in, say, C or Python. You can also comment your CSS, in CSS files, with:

/* Comment goes here */

Hints

For fairly comprehensive guides on the languages introduced in this problem, check out the documentation for each on W3Schools.

How to Submit

Execute the below, logging in with your GitHub username and password when prompted. For security, you’ll see asterisks (*) instead of the actual characters in your password.

submit50 cs50/problems/2019/x/homepage

You can then go to https://cs50.me/cs50x to view your current scores!