Zero to Blog Post: Goal

This is an assignment for Digital History, a digital humanities course taught in the History Department at the University of Toronto. If you’re a teacher, feel free to fork and repurpose for your own courses. If you’re a student, keep reading!

You do not have to become a coder to do well in this course. However, you will have to be willing to explore technical skills that you might not otherwise develop as a humanities scholar. In this assignment, you will learn very basic web coding skills and apply them to a simple problem. The goal of the assignment is to provide you with basic technical knowledge that you will need for later assignments.

Expectations

This assignment is graded pass/fail. You will only get credit if all of your code runs as required. To pass the assignment, you must:

• successfully create a github repositor and clone a local copy
• complete all five (optionally 6) problems of this assignment, such that both the student-visible tests and the instructor/machine-visible tests all pass. See below for details.
• commit your work to git as you go, so that a query of the git history will show multiple steps. Please note that git commits are timestamped and unique; they are an excellent defense against accusations of cheating, so please use them extensively.
• push all your changes to Github

Preparation

Please work your way through the following HTML and CSS resources (these are also listed in the syllabus):

• MDN: Getting Started with the Web
• MDN: Intro to HTML. This is a great, systematic introduction to the most important HTML elements.
• MDN: Learn HTML Pathway. You won’t need all of this, but a lot of it is interesting.
• MDN: Learn CSS Pathway. Again, there is more here than you need, but big parts of it will be used in this assignment.

Details

Presumably you got here by clicking on the link on on the Assignments Page of the DH website. Then clone locally via the “Clone or Download” process described here, or just use the VSCode git commands. Do your work in VSCode, then push your repo to the cloud when you’re ready.

Web pages are composed of three components: HTML, CSS, and Javascript. HTML provides the structure and content of a web page; CSS controls the style of presentation; and Javascript permits dynamic modification of both. In this assignment, we explore the first two components, HTML and CSS

Problem 1: HTML Structure

Make sure you’ve read intro to HTML overview and have explored enough to orient yourself when you run into difficulties.

In the directory 01, find the file 01/letter.txt. Your job is to convert this raw text into structured HTML. I’ve provided you with some starter code in 01/index.html. Please make changes as follow:

• Header:
  • add the sender info in the appropriate div element. Wrap the information in a <p> element and divide lines with <br> elements
  • add the date in the <time> element
  • add the recipient info in the recipient div element, wrap in a p and divide w br as above.
  • make sure that both email addresses are working mailto: links
• Main Text
  • add the text of the greeting line (“Dear Prof…”) to the div.greeting element
  • add the main text of the letter to the div.text element. Separate into paragraphs with <p> elements, but also note:
  • The lines reading Assignments, Lectures and Course Website should be <h1> elements rather than <p> elements
  • The lines starting with - A... should be made into list elements in an unordered list
  • add the closing (Sincerely,… yr name) to the.... wait for it… that’s right, to the div.closing element
• Footer:
  • Add the motto (“Perpetuis…”) to the footer element

If you’ve passed all the tests, then you should be fine!

Problem 2: Tables

HTML tables are sometimes misused as a styling technique, but they are designed for the display of tabular data. table.txt contains information which is appropriate to a table form. Your job is to convert it and add the HTML to index.html. Here is your assignment:

• Take the information in TITLE and put it in an <h1> element inside of <header>.
• create a <table> inside of <article>
• There are 4 column headings listed under HEAD. Create a <thead> element, a <tr> element inside of that, and add each heading as a <th> inside of the <tr>
• Create a <tbody> element and add information about each prime minister as a <tr> composed of 4 <td> cells
• Add a <caption> element as a child of the <table> and add the CAPTION text there
• add 4 <img> tags to <footer>

Resources: MDN Table Lesson

Problem 3: Basic Styling

CSS is an enormous topic, so it will be easy to get lost. In this problem we deal with a few basic CSS properties, mostly affecting fonts, colors, and spacing. Start with the well-structured HTML in index.html, to which very little styling has been applied so far.

We want to make the final page look something like this image:

Please do the following:

• set the default font-family for the whole page to "Roboto", sans-serif, using the html selector at the top of the file.
• set the maximum width of main to 50rem (we use a mixture of px and rem in this assignment!)
• add a border radius of 10px to main
• add a background color to both header and footer. Make it the same color!
• add some padding ( 5px) to the top of header
• add margins of 10px to the left and right of article, and set the display to flow-root to fix the old problem of uncleared floats.
• give the img inside article a maximum width of 15rem; also float it left; give it a visible border with a radius of at least 5px, and add a margin o n the right side to separate it from the text
• make sure the minimum height of footer is at lest 5rem

Problem 4: Layout and Media Queries

Here we tackle the difficult subject of CSS layout. The entire CSS Layout track from MDN is useful here, but be sure to read the (often complex) sections through to CSS Grids. You will need to be familiar with the box model,

Your job is to take the HTML given to you in index.html and make it look like this:

On your phone it will look a little different, kind of like this:

As you can see, it doesn’t look very much like this yet! This page is somewhat complicated. It uses “nested” layouts in order to expose you to both flexbox and two different ways of setting up a CSS Grid layout. In the solution key layout,

• <main> is a grid “parent”, with the directive display: grid. It has 4 direct children: nav, section.sidebar, article, and aside. Each of these is a grid “child” which must be assigned to one of the grid template areas in the main grid.
• <article> is a grid child, but it also parent of its own grid. It contains 5 styled divs, with id #box1 to #box5. the article grid does not define named template areas, so its children need to be placed using the grid-row and grid-column methods. You can see in the screenshot that the boxes overlap with each other in a diagonal line across the whole grid, with the fifth box placed in the top right off of the line.
• section.sidebar is a grid child as well, and also a flexbox parent. Here we use flexbox to very easily line up the child img tags in a vertical line.
• for fun, I have also added a media query at the end of style.css. These few lines of code reorganize the page completely, something that would have been very hard to do just a few years ago.

I’ve added in the relevant CSS selectors and declarations; all you need to do is fill in the values. Here’s what I expect you to do:

• uncomment and then fill in grid-template-columns and grid-template rows so that the main column is 4 times as wide as the sides and 4 times as tall as the nav. Use fr units for consistency.
• Add grid-area declarations for all the direct children of <main>.
• fill in flex-direction and optionally justify-content and align-items to make the section.sidebar flexbox layout work right
• optionally fill in the gap declaration in the article ruleset
• fill in grid-row and grid-column for #box1 through #box5.
• in the @media query, fill in the flex-direction for section.sidebar

Problem 5: Blog Post

OK, you’ve done a lot of practice, and you should now be ready to write your blog!

In this exercise, you will write a short blog post (approximately 200 words) in HTML about a real historical figure (or event, or process) about whom (or which) you already have some interest, and in whom (or which) you are genuinely interested. You will write this post in ./05/index.html, and style it in ./05/style.css

index.html* should contain, at a minimum, the following elements:

• an <article> tag, which contains all of the elements mentioned below
• a <header> element, inside of which there should also be:
  • an <h1> element with the figure’s name
  • an <h2> element containing the text by <span class="author">Your Name</span> and any other “byline” information you would like to include
• a <section> element with class main, containing your main content
• an <img> tag within the main section. The image should be a picture of the historical figure, or related to the historical event or process.
• a <section> element with class sources.
• inside your sources section, a <ul> element containing at least two <li> elements, each of which lists one source that you used in writing your blog post. The title of the source should be a hyperlink with href attribute linking back to the source. If your source is a print book or article, the link should point to the source’s listing in the library catalog. In the extremely unlikely event that the source is not among the library’s holdings, use an Amazon or Google Scholar link instead.

style.css should style the page this way:

• add a <link.../> element to <head> in index.html, with attributes rel set to “stylesheet” and href set to “./style.css”
• <article> should be either a grid or a flexbox container. Use this method to adjust the layout of the main page elements.
• set the background color of <header> to something different from the background color of the rest of the page
• add right and left margins to section.main and section.sources
• Add a border to section.sources to set it off from section.main
• use float to position the img tag either on the right or the left of the section

Note: these requirements don’t guarantee that your page will look good! Make whatever further changes you need in order to get a look you’re satisfied with.

Problem 6: Reflection

Required for letter grade of ‘A’ only. As before, copy the file ./Reflection/reflection-template.md … but this time please note change from your last assignment – copy it to Reflection/reflection.md. This change improves the automated tests. Once you’ve copied the file, follow the directions found therein.

Tests

As in our other assignments, this one comes with a set of bundled tests designed to make your life a little easier. To run them, first execute npm install from this directory. Then run either npm test or, for a slightly nicer output, npm run test-less-confusing. Even better, to have the tests run continuously every time you save changes to a file in the directory, type npm run watch (again and always, from the root directory of the repository). This will start a process running which won’t stop until you exit the terminal or type Control-c from inside the terminal itself.

As you will remember, you can do this by typing the instructions into the integrated terminal, by typing npm into the comand palette and selecting test or run script, or from the mocha sidebar. You might want to use the terminal if you’re running `npm watch` so that you ucna interrupt the process if it starts to consume too many resources.

Handing in

As mentioned above: when you are finished – when your code passes all the tests – submit your code via pull request. This is the only acceptable submission process!

The above method is deprecated. Github Classroom no longer uses forks for assignments. Instead, submission is accomplished automatically simply by pushing to the ~master~ branch. So, no need to submit a Pull Request!

Resubmission

If you need to resubmit (using up a chit), first do all your work in the master branch. When you’re confident that your work is complete, create a new branch called resubmit-1 (do this at the command line, in Atom, or in GitKraken. You can even do it on the web).

Push that branch to Github, and then alert me that you’re resubmitting (you might want to reconfirm that all the tests pass before doing this). I’ll then initiate a regrade.