Chapter 1.3 - Homework

Congratulations on making it all the way here! That was a lot to learn in just one chapter. Don't worry about memorizing all the terminology—this book always be available if you need to come back and look something up. Additionally, no single programmer remembers all of the HTML & CSS functionalities and they always consult search engines—don't be afraid to search up information as well! In fact, we encourage you to do that.

Now that you know how to stylize and write more advanced HTML, let's add more interesting elements to our personal website that we set up in the last homework!

Milestone 1: Creating a stylesheet file

For the first milestone, create a file called style.css and place it in assets/css/ subdirectory of your project repository which you set up last time.

Milestone 2: CSS Resets

Because different web browsers might render our website differently, the practice of adding CSS resets to our HTML files has become a common practice. CSS resets take every common HTML element with a predefined style and provide one unified style for all browsers. These resets generally involve removing any sizing, margins, paddings, or additional styles and toning these values down.

There are numerous types of resets available but the two most common are Eric Meyer's reset and Normalize.css. Normalize.css requires a stronger understanding of CSS so hold off on implementing it until you have mastered the language! For now, create another file called reset.css inside assets/css/ and paste the following code (use the "Copy to clipboard" button in the top-right):

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Milestone 3: Adding CSS to HTML files

To get CSS talking to HTML, we reference our CSS file within our HTML file. The best practice for referencing CSS is to include our styles in external stylesheets (as we've done in the first two milestones) and include them from within the <head> element of our HTML document, like below:

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Example Website</title>

		<link rel="stylesheet"  href="assets/css/style.css">
	</head>

	<body>
		<!-- this is a comment -->
	</body>

</html>

If our CSS file is within a subdirectory or subfolder, the href (stands for hyper-reference) attribute value needs to correlate to this path accordingly. For example, if our main.css file were stored within a subdirectory named css inside another subdirectory called assets, the href attribute value would be assets/css/main.css, using a forward slash to indicate moving into a subdirectory. This is identical to moving between directories in Unix! However, keep in mind that writing /assets/css/main.css instead of assets/css/main.css would break the website, since the first / would point to the root directory in your filesystem, not the directory in which your file is located! As a rule of thumb, use relative directories (like the one in the example above). You can also input real URLs here! However, sometimes websites that host CSS files go down, so it's better to store CSS locally for your own website.

Now, open the index.html file we create last time and append the <head> tag with two elements below. Do not copy-paste the code from above, but make sure to place the elements below in the same place as in the example above.

<link rel="stylesheet"  href="assets/css/style.css">
<link rel="stylesheet"  href="assets/css/reset.css">

Milestone 4: Adding content

Now, inside <body> of your index.html, add a header <h1> with the name of your website (it can be just your name) and a paragraph <p> with the description of your website (or a little bit about yourself).

Milestone 5: Adding images

Find an image that you want to appear on your website (it could be you!), add it to assets/img/, and incorporate it to your website using

<img src="assets/img/{yourimage}" />

where {yourimage} is the name of the your image file

Don't forget to include the extension! Some operating systems don't show them by default, so either enable that setting on your machine or use ls inside the command line to see its full name.

Milestone 6: Styling content

Now, let's experience what you can do with CSS. It is up to you how you want to implement this milestone—feel free to play around with any of the CSS knowledge that we covered in this chapter or search up additional material online. However, here are just a few things that you could do:

Change the font size of your paragraph:

p {
  font-size: 20px;
}

Add an id attribute to your image (for example, id="my-image") and change its top margin:

#my-image {
  margin-top: 4rem;
}

Now, experiment with your website—try adding classes, more HTML elements, <div> containers, etc. The best way to learn web development is by doing! In class, we'll ask you to spend a few minutes and showcase what you've learned from this exercise and share your knowledge with others.

Milestone 7: Commit and push to Github

Once you complete all the milestones above, you should commit your changes and push them too Github. This way, you'll be able to return to these changes later, and you can share your Github repository with other people.

Oval: Web Development and Design