Python Learning Journal: HTML Mockup

You’ve been creating your learning journal entries so far using a shared journal I have created for you. It’s time now to make your own version.

You’ll be spending quite a bit of time looking at this journal, so you might as well make it look nice and behave well. To that end, I want you to make a mockup of the site in HTML and CSS.

Tasks

Create a Repository in GitHub called learning-journal-basic (or use the existing repository you are sharing with your partner). The repository should have a README.md file, a standard Python .gitignore file and an appropriate OSS license. Clone the repository to your development machine. In the repository, create a new folder called <yourname>-mockups (replace <yourname> with your own name, please). In that folder, create four HTML files and a CSS stylesheet with the following specifications:

  1. The first should be a home page that shows a list of journal entries with just the title and date created.
  2. The second should be a detail page that shows a single entry. The title, text and created date should be displayed on this page.
  3. The third should be an HTML form page you will use to create a new entry. The title and text of the entry should be inputs in this form, empty at first.
  4. The fourth should be an HTML form page you will use to edit an existing entry. The title and text of the entry will be inputs in this form as well. Pre-populate them with the text from a make-believe entry.

Each entry in the list on the home page should have a link that leads to the detail page. The home page should also have a UI element that allows you to start to create a new entry. It should link to the page with the create form.

The detail page should have a UI element that allows editing the entry. It should link to the edit form page.

There should be a UI element that leads back to the home page from any page in the site.

You should make an effort to make the pages in your mockup look as unified as possible. Ensure that there is a common header, footer and navigation system shared among all the pages.

You must also include a CSS stylesheet in your repository that contains the styles needed to display the site. The HTML mockup pages should use this stylesheet via a “link” tag in the HTML head section.

You may use a pre-existing CSS framework, like Bootstrap or Zurb Foundation, if you like.

Submitting Your Work

When you are satisfied with your mockup, please submit a link to the repository URL in GitHub. I will clone your repository and verify that it displays correctly and has all the required elements.

Make the site as pleasing and personally attractive as you can. As I said earlier, you’ll be seeing a lot of the site during the rest of this course.