CS 351 Spring 2020 Homework 2

Getting started with HTML, CSS, and JavaScript

Dr. Greg M. Bernstein

Due Friday, February 7th, 2020 by 11:59PM, 50 points.

General Instructions

The goal of this homework is to get you started with all three of the technologies that we will be using all semester: HTML, CSS, and JavaScript. In addition you will use more Markdown functionality to present your solutions.

Create and Use a new Branch hw2

We will create a new git branch called hw2 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 1. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw2. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts)

Getting started with HTML & CSS

(a)

In the following HTML which are the tags and which are the attributes?

Give a simple list (not an HTML list) of attributes and tags used in the above here.

(b)

Can you use the same id attribute on more than one element in an HTML document? Does the fact that we use id attributes as targets for links within a page influence this? Can you use the same class on multiple elements in a document? Why or why wouldn’t this be helpful for styling?

(c)

For the CSS shown below. Identify the CSS selector and indicate its type, identify the CSS properties, the CSS values.

Put your answer here.

(d)

Describe the CSS selector combinators used in the following CSS fragment. Use the appropriate CSS terminology from the course slides or MDN.

Question 2. (10 pts)

“Outline” pages for your club website.

(a) Create a directory to hold your site.

Within the top level of your repo create a directory name clubProject to hold all your site files. We will add more subdirectories as needed.

(b) Create at Least three Pages

Start with the HTML document outline from the course notes and add needed elements to pass the HTML Validator. You will need a “home page” (index.html), and “about page”, and a “club activities page” to start. Only the “home page” must have the name index.html, the other pages can have file names of your choice (no spaces in file names!!!).

Read the explanatory text describing the <main> element in the HTML5.2 Specification – main. Add a <main> element to the <body> of each of your pages. Give each page a unique <title> in the <head> and put some content at least a heading and paragraph in the <main> element so we can tell the purpose of the page.

Answer the following questions: According to the HTML5 specification should you: (i) Put site wide navigation into the <main> element? (ii) Should you put common banners (e.g., site logo) in the <main> element? (iii) Should you put copyright notices in the <main> element?

List the file names of your pages here.

(c) The <header> element

According to the HTML5.2 Spec – header we can use the <header> for “introductory” content. Let use it to hold into info about each page, such as an <h1> element related to the pages purpose. Should we put this inside or outside the <main> element according to the specification?

(e) Navigation

The users of your club need an easy way to navigate your clubs website. We’ll use a <nav> element as described in the HTML5.2 Spec – nav. Within your <nav> use an unordered list, <ul> of links, <a> to each of the pages. Use relative URLs in all your links. Create this “navigation menu” once and then copy and paste it into all your other pages. Test that you can navigate to all the pages in your site via this “menu”.

Take a screenshot of your file manager showing the website’s top level directory and the HTML pages you created. Mine looks like:

Figure to come
Figure to come

(f) Navigation Helper

We’d like to indicate to the user which page they are on when they look at the navigation menu. To do this we will customize the <nav> for each page by adding a class active to the <li> holding the link to the page. For example if we are on an about.html page the <nav> might look like:

Show the HTML code for one of your pages (nicely formatted) here.

Question 3. (10 pts)

JavaScript: strings and numbers, conversions, hex and binary. MDN string string manipulation methods.

(a) String to number conversions

When we work with various HTML input controls, the raw data we get is usually in string form. Hence we need a way to convert from strings to integers or floating point numbers. In JavaScript we use two global functions for this parseInt and parseFloat.

Run the following JavaScript code in your browsers developer console. In the answer section provide explanations to my comments and take a screen shot of the last few results and include that with your answer. Make sure to put your name in place of the “YourNameHere” portion of the string.

(b) Number to Strings

When we display numbers we generally want to format them in a way appropriate to the application. We can do this with the following methods from JavaScript’s Number class. These include: toString, toPrecision, toFixed as well as others.

Run the following JavaScript one line at a time in your browser’s developer console, answer parts (i)-(iii) detailed in the comments and show a screenshot of your answers to (i)-(iii).

(c) Single and Double quote strings

In this problem we will also practice using the most common debugging method in all of Javascript: console.log(). Single quote and double quote strings are the same in JavaScript. Let’s test that this is true. Run the following code one line at a time in your browser’s developer console. Provide answers to the questions in the comments and a screen shot (partial is fine) of the developers console with the results.

(d) Simple string manipulations

The String class contains a number of helpful functions among the many are: includes, replace, split, toUpperCase, toLowerCase. Always check the String methods before writing something yourself. Let’s try some of these.

(e) Backticks and template strings

There is yet another string that was added to ES6, the template string. This is extremely handy when adding elements to the DOM. It uses backticks and allows for variable substitution within the string. Let’s try a simple example. Take a screenshot of your console for your answer.

Question 4. (10 pts)

JavaScript: Arrays and basic Objects. MDN Array

(a) Array basics

JavaScript arrays are really lists in that they can grow and shrink and can contain any kind of element including a mix of different types of elements. Let’s try some basic array manipulations. Provide answers to the questions in the comments and a partial screen shot of your debug console.

(b) Fancier Array Methods

In many cases in JavaScript we provide a function as a parameter to another function. This is a kind of “functional programming” and we need to get used to it. We are going to try this with the map and sort array methods. Hint: you will find the answers to most of the questions below by looking at the MDN Array documentation.

(c) Objects

JavaScript Objects are extremely versatile and relatively easy to use. So much so that we will not need to define any object instances via JavaScript classes until the end of the course when we work with React. Let’s see how this works. Substitute your information in the following and run it in the developer console. Click to expand some of the objects fields and take a screen shot for your answer.

Question 5. (10 pts)

Initial styling for your club website. Create a stylesheet named club.css and put it in the top level of your clubProject directory. Link it in the <head> of all your site files.

(a) Header styling for each page

Choose a different font than the default for your <h1> in the <header> for each page. Center that text.

Optional choose a “web font” from Google Fonts just follow their directions on how to use, they will give you a link and show how to specify the font in CSS. Use the @import approach to bring the font into your style sheet. For more background see MDN Web Fonts.

Take a screen shot and include it here. I get something like:

Page Title
Page Title

(b) Box model for body, main, nav

Set the background color for the <body>, <nav> and <main> elements. The <body> color should be different from <nav> and <main>.

Adjust margin and padding to something reasonable.

Limit the width of the <nav> with the max-width property. Put a border of some type around the <nav> (we’ll style the insides later).

Take a screen shot and include it here. I get something like:

Box model
Box model

(c) Navigation Styling

Now let’s make then <ul> in the <nav> look more like a menu and less like a bullet list. There is an entire MDN tutorial on list styling, but we are basically going to turn off most list styling for the list in the <nav> by setting list-style-type: none. Set a background color for the <li> element that is “active”. I turned off link styling by setting text-decoration: none, and on the a:visited pseudo-class setting the font color to black (optional). I also set up hovering over the links (optional).

Show the selector you used to only apply your list styling to the list in <nav> and not any other list on the page. Take a screen shot of your styled page and show it here. Mine looks like:

Nav Styling
Nav Styling