Introduction
So far, we have been focused on HTML — using the markup to create the structure of webpages. For this assessment, you will be provided with some raw HTML, an image and a little CSS, and will need to complete the styling to develop a page that looks like a wanted poster.
Objectives
To test comprehension of HTML tables and associated features.
At the end of the skills check, your page will look similar to:
Instructions
To get started
In your local GitHub repository, create a new sub-directory (folder) named wanted-poster. Next, download the wanted-poster.zip Download wanted-poster.zipsupport files. The compressed file contains:
an HTML file
a folder with a style sheet
a folder with images
a folder with typeface files
Extract the compressed files to your wanted-poster sub-directory in your local GitHub repository; then, open the HTML file in your web browser. Notice that the page displays without the style information being applied – there’s no reference for it in the code!
Open the wanted-poster index.html file in Visual Studio Code (or your preferred text editor) and carefully examine the existing code. Make note of the comments provided.
Lastly, edit the code so
your name is given as the author
the web browser knows what external file to reference for style information
From this point forward, you will complete the remaining work in the .css document; and, as long as the appropriate code is used, the page will display as intended.
Add selectors
In Brackets (or your preferred text editor), open the style.css file from the wanted-poster sub-directory’s css folder.
Examine the existing code carefully; then, test your site in a web browser to make sure the existing CSS is being applied to the HTML. While the CSS is incomplete, you should now see some style on the page.
Using the comments in the .css document as a guide, add the style selectorsyou will need to complete the code and include the curly brackets that will contain the declarations.
Hint: For this assessment, you will be using HTML element names as the style selectors.
To get a better idea of what your CSS will look like at this point, the example below shows some of the code without declarations.
Add declarations
Once the CSS selectors are in place, add the appropriate declarations (CSS properties and values) to complete the style rules.
headings
Heading levels 1 through 4 should have the same text shadow, foreground color, font family, margin and text alignment, and use uppercase letters. Additionally:
the level 2 headings should have a font size of 48px and letter spacing of 4px – both expressed in rem units – and a normal font weight.
the level 3 headings should have a font size of 32px – expressed in remunits – and a normal font weight.
the level 4 heading should have a font size of 24px, letter spacing of 4pxand bottom padding of 18px – all expressed in rem units – and a normalfont weight.
The level 5 heading should be styled with:
a font size of 16px, top margin of 4px, padding (top, bottom, left, and right) of 8px – all expressed in rem units.
a background color of #333 and foreground color of #FFF.
a normal font weight, and a text alignment that matches the other headings.
If you decide that you would like to use a different foreground color for the headings, you are more than welcome to change it; just make sure that it is suitable for display on the Web and easy to read.
section & paragraph
The sections should be styled with a top margin of 8px, expressed in remunits, while the paragraphs should have:
a top and bottom margin of 16px, expressed in rem units, and a left and right margin set to auto.
padding top and bottom of 0 and padding left and right of 16px, expressed in rem units.
a width of 90% and left-aligned text.
figure, image, & footer
The figure must be styled with a bottom margin of 32px, expressed in remunits. Additionally:
give the figcaption a top padding of 8px, expressed in rem units, and text that is right aligned.
We also want to make the image somewhat responsive to the size of the browser window, and prevent it from exceeding its actual pixel size. In this case, give the image:
a width of 100%.
a top and bottom margin of 0, and a left and right margin set to auto.
a maximum width of 800px, expressed in rem units.
For the footer, apply a padding (top, bottom, left, and right) of 16px, expressed in rem units, and give it a top border with:
a width of 32px, expressed in rem units
a solid style and a color of #333.
One more thing
The two symbols in the level 4 heading don’t quite display with enough space next to the text. To adjust it, use a child selector to create a new style rule that targets the span element within the heading.
Style the symbols with:
a top and bottom padding of 0
a left and right padding of 8px, expressed in rem units.
Post to the discussion
Are you stuck? Is it 1:00 a.m. and you’ve been staring at your code for hours trying to figure out why your page won’t display correctly? Don’t panic; there is help!
Post your questions to the Skills Check 5 Discussion forum for assistance. Code samples and/or screen shots are optional; but, could be useful. The forum is a great resource for assistance on the coursework; your peers often have the same questions and/or may be able to provide helpful insight.
How to Submit
Complete all steps below to successfully submit your work for review.
Publish your page
In GitHub Desktop:
commit all local changes to the master
push all local commits to GitHub
Once you have pushed your commits, you will need to allow a little bit of time for the remote server to refresh before your changes are live on the Web.
Submit to Canvas
To submit your URL in Canvas:
Click Submit Assignment at the top.
Using only lowercase letters:
Add your URL in the provided text box, following the format https://durhamj.github.io/
make sure to replace my username with yours
Click Submit Assignment
Backup your file in Canvas:
Click Submission Details at the top-right of the assignment window in Canvas.
Attach both the index.html and style.css files to the Comments.
Under Add a Comment, click Attach File
Click Choose File and select the file you want to attach.
Click Save to finish.
Reminder
The content for this course is presented in an online, module format. Students should:
review and complete items sequentially
access course material through the Home link in the course menu
follow all instructions, including submission and formatting requirements
contact the instructor via CWU Outlook email with any questions or concerns
Note: Re-submissions, late submissions, and make-up work are only considered in extreme circumstances.
Rubric
Skills Check 5 Rubric
Skills Check 5 Rubric
Criteria Ratings Pts
This criterion is linked to a Learning OutcomeApplication of CSS Code
The submission successfully demonstrates the comprehension and application of basic CSS theory, syntax, and mechanics.
15 to >13.0 pts
Above Average
13 to >11.0 pts
Average
11 to >0.0 pts
Needs Work
0 pts
Assignment Not Submitted by Deadline
15 pts
Total Points: 15