Filters

Other

S3 Web Assignment

Knox badge

This task should take a total of one or two periods.

HTML requirements

Create an HTML document with the following structure:

  • <h1>: Page title, e.g., "My Hobbies."
  • <h2>: Subheading, e.g., "Here are some of my favorite hobbies."
  • <ul>: Unordered list to list your hobbies.
  • <li>: List items for each hobby (at least 3 hobbies).
  • Use the <a> tag to link to an image for each hobby. You can find some sample images online or use placeholder URLs (e.g., "https://via.placeholder.com/100x100") for this task. Make sure each image is wrapped in an <a> tag, and when clicked, it should open in a new tab. For example:
HTML
<a href="https://example.com/hobby1-image.jpg" target="_blank">
  <img src="https://example.com/hobby1-thumbnail.jpg" alt="Hobby 1">
</a>

CSS Requirements

Create a CSS style block within your HTML document (inside <style> tags) or in an external CSS file (e.g., "styles.css", remember to link it).

Apply the following styles to elements on your webpage:

  • Style the <h1> with a different font size, color, and text alignment.
  • Style the <h2> with a different font size and color.
  • Style the <ul> to have a border of 2 pixels in a gray colour.
  • Style the <li> elements with a different font size, color, and any additional styling you prefer.
Once you are done, print out your webpage and if you used external CSS print that out too.
Provide Feedback

What did you think of this document?

!
-- DragonDocs version 0.9 --

20.08.2017

Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

02.02.2018
Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

19.09.2020
Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

31.09.2021
Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

02.02.2022
Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

06.02.2022
Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

02.03.2022
Once a section has been read or completed, the user can now hide that section

10.10.2022
Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

07.08.2023
Added the Save button and the ability to save 'results' or answers to a Word document

12.01.2024
Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

10.02.2024
Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

11.02.2024
Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

12.02.2024
Added the new step_by_step_mode feature, allowing sections to be viewed individually

22.02.2024
Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

23.02.2024
Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number

25.02.2024
Added the 'matcher' feature to DragonDocs
Fixed an issue in which a closed section would retain it's original height within the document navigation
Added starters and the lesson review to the navigation on the side