Build a simple homepage using HTML, CSS, and JavaScript.
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:
- HTML, or HyperText Markup Language, which is used to describe the content of websites;
- CSS, Cascading Style Sheets, which is used to describe the aesthetics of websites; and
- JavaScript, which is used to make websites interactive and dynamic.
Create a simple homepage that introduces yourself, your favorite hobby or extracurricular, or anything else of interest to you.
Log into cs50.dev, click on your terminal window,
and execute cd by itself. You should find that your terminal window’s
prompt resembles the below:
$
Next execute
wget https://cdn.cs50.net/2022/fall/psets/8/homepage.zip
in order to download a ZIP called homepage.zip into your codespace.
Then execute
unzip homepage.zip
to create a folder called homepage. You no longer need the ZIP file,
so you can execute
rm homepage.zip
and respond with “y” followed by Enter at the prompt to remove the ZIP file you downloaded.
Now type
cd homepage
followed by Enter to move yourself into (i.e., open) that directory. Your prompt should now resemble the below.
homepage/ $
Execute ls by itself, and you should see a few files:
index.html styles.css
If you run into any trouble, follow these same steps again and see if you can determine where you went wrong! You can immediately start a server to view your site by running
http-server
in the terminal window. Then, command-click (if on Mac) or control-click (if on PC) on the first link that appears:
http-server running on LINK
Where LINK is the address of your server.
Implement in your homepage directory a website that must:
-
Contain at least four different
.htmlpages, at least one of which isindex.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. In particular, you might find some of Bootstrap’s components of interest. To add Bootstrap to your site, it suffices to include
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>in your pages’
<head>, below which you can also include<link href="styles.css" rel="stylesheet">to link 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 asfont-size, ormargin; and -
Integrate one or more features of JavaScript into your site to make your site more interactive. For example, you can use JavaScript to add alerts, to have an effect at a recurring interval, or to add interactivity to buttons, dropdowns, or forms. Feel free to be creative!
-
Ensure that your site looks nice on browsers both on mobile devices as well as laptops and desktops.
If you want to see how your site looks while you work on it, you can run
http-server. Command- or control-click on the first link presented by
http-server, which should open your webpage in a new tab. You should
then be able to refresh the tab containing your webpage to see your
latest changes.
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!
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 this Markup
Validation 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!
Consider also:
- 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.
Afraid style50 does not support HTML files, and so it is incumbent
upon you to indent and align your HTML tags cleanly. 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 */
For fairly comprehensive guides on the languages introduced in this problem, check out these tutorials:
In your terminal, execute the below to submit your work.
submit50 cs50/problems/2023/x/homepage