- Zero to Blog Post: Goal
This is an assignment for [[http://digital.hackinghistory.ca][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):
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 [[https://help.github.com/articles/cloning-a-repository/][described here]], or just use [[https://code.visualstudio.com/docs/editor/versioncontrol#_cloning-a-repository][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 [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started][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:
- Main Text
- 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 ~
~ element inside of ~
- create a ~
~ inside of ~~
- There are 4 column headings listed under HEAD. Create a ~~ element, a ~
~ element inside of that, and add each heading as a ~| ~ inside of the ~ |
~
- Create a ~~ element and add information about each prime minister as a ~
~ composed of 4 ~~ cells
- Add a ~~ element as a child of the ~
~ and add the CAPTION text there
- add 4 ~
![]() ~ tags to ~
Resources: [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables][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:
[[./03/ursula.png][file:./03/ursula.png]]
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 [[https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout][CSS Layout track]] from MDN is useful here, but be sure to read the (often complex) sections through to [[https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids][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:
[[./04/grid.png][file:./04/grid.png]]
On your phone it will look a little different, kind of like this: [[./04/grid-phone.png][file:./04/grid-phone.png]]
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,
- ~~ 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.
- ~~ 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 ~~.
- 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 ~~ tag, which contains all of the elements mentioned below
- a ~~ element, inside of which there should also be:
- an ~
~ element with the figure's name
- an ~
~ element containing the text ~by Your Name~ and any other "byline" information you would like to include
- a ~~ element with class ~main~, containing your main content
- an ~
![]() ~ tag within the main section. The image should be a picture of the historical figure, or related to the historical event or process.
- a ~~ element with class ~sources~.
- inside your sources section, a ~
~ element containing at least two ~- ~ 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 ~~ element to ~~ in ~index.html~, with attributes ~rel~ set to "stylesheet" and ~href~ set to "./style.css"
- ~~ 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 ~~ 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 [[https://code.visualstudio.com/docs/editor/integrated-terminal][by typing the instructions into the integrated terminal]], [[https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette][by typing ~npm~ into the comand palette]] and selecting ~test~ or ~run script~, or from the [[https://marketplace.visualstudio.com/items?itemName=maty.vscode-mocha-sidebar][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.
+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.
|