Assignment 4: Intermediate CSS Layout

Assignment 4: Intermediate CSS Layout

The purpose of this assignment is to advance our CSS layout abilities, as well as try out some other CSS design techniques and tools. In particular, we’ll use background images, grid layouts, embedded icons, and special fonts.

As usual, additional resources are at the end of this document and screenshots are in the starter files!

Task 1: Setup

This time, I’ve provided a starter HTML file for you in the assignment start files. Import this into a new project and open it in your code editor.

Task 2: HTML

Most of the HTML code has been written for you. However, there are a few things you’ll have to do:

  • In the <header>:
    • As you can see from the screenshot, the text “Assignment 4” in the <h1> is a different color from the text “Dog Magazine”. You’ll need to somehow mark up this text so that it can be selected and recolored in the CSS code. Figure out how to do this. (hint: you’ll need to do some research to find a generic container tag that behaves as an inline element.)
    • The tagline “Your Source for Information About Good Dogs” currently is not marked up with any tag. Find an appropriate tag to do this, using this resource: https://www.w3.org/TR/2014/REC-html5-20141028/common-idioms.html – sub- head

Hint: this is a bit of a trick question!

Also give this tag a class with the value “tagline”.

  • In the <main>:
    • As you can see, there are three sections within the <main> element. One section has class=”articles”. Within this section, there are several article previews separated by their headings. (Each article preview contains a short section of text with a link to the full article.)

In HTML, while we use the <section> tag to contain a subsection of the parent document, we use the <article> tag to contain content that could potentially stand on its own outside the context of the parent document. It’s also conventional to use the <article> tag to mark up short previews of articles. (Such as the article teasers we see on the front page of a magazine or news website.)

Your job is to use the <article> tag to complete the mark up in the articles section. Each article preview should be contained inside an <article> element.

  • The other two sections within the <main> element are “Article Archive” and “Our Partners”. These two sections represent content that is peripherally related to the site’s main content, but not the primary focus. You can also see that, in the screenshots, this content has been placed in its own sidebar column on the right side of the page. To mark up content like this, we can use the

<aside> element. Go ahead and implement this element.

  • In the <footer>:
    • In the “Contact” section, the links for the email and telephone number don’t currently have hrefs. Figure out how to add href attributes for email and telephone links. When clicked/tapped, these links should launch the default email client or invoke the mobile device’s telephone functionality, respectively.

Task 3: Icons

There are a few services that provide icons for use on the web; we’re going to use one called

Font Awesome. Sign up for a free account here: https://fontawesome.com/start

(As always, you may use fake information in the interest of maintaining your privacy.)

Once you have your free account, you’ll need to set up a so-called “kit” that you’ll use to apply icons to your site. Create a kit here (click the blue New Kit button): https://fontawesome.com/kits

You will then be directed to a page where you will see a “kit code”. It will look something like this (but with a unique alphanumeric component):

<script src=”https://kit.fontawesome.com/39aba2681b.js” crossorigin=”anonymous”></script>

If you don’t see your kit code, try clicking on the kit and then navigating to the “How to Use” tab:

Copy your kit code and paste it into the <head> of your document. Now you can start using icons!

To find the icons you need, visit this page: https://fontawesome.com/icons and use the search functionality. Icons are placed in your layout by copying the appropriate <i> tag and pasting it into your HTML. For example, the dog icon is embedded using this tag:

<i class=”fas fa-dog”></i>

note: The <i> tag is actually meant to do something else and doesn’t officially have anything to do with icons. Font Awesome has appropriated this tag for use with their system. Why do you think they did this? What are the pros and cons of using the <i> tag? What was it originally meant for? What should you do if your CSS code is directing special styles to <i> elements?

In your site, the icons should be implemented as hyperlinks so that one can click on them to be directed to the appropriate social media page.

The use of icons in our design presents special challenges for accessibility. We need to make sure that users with visual disabilities are able to perceive the purpose of the hyperlink when using a screen reader. Therefore, we need to make sure that even though users navigating visually will perceive the purpose by seeing the icon, the HTML also contains some text description of the link that can be converted to audio by a screen reader program. Figure out how to do that here: https://fontawesome.com/how-to-use/on-the-web/other- topics/accessibility#web-fonts-semantic

They provide a few different choices for making your icons accessible; my opinion is that the best option is the one that involves using the aria-label and aria-hidden attributes.

Optional task: figure out what ARIA stands for, and what the ARIA specification is meant to do.

Task 4: Google Fonts:

So far, we’ve been using boring fonts that are guaranteed to work in every browser. This has been necessary because there’s no way to know which fonts will be available on a user’s system. However, there’s another way: Google Fonts (and other similar services) which allow us to embed fonts that can be automatically downloaded onto the user’s system when they view the page.

Spend a bit of time exploring the fonts available at https://fonts.google.com/. Be sure to experiment with the search and filter options.

Figure out how to select font families and add them to your shopping cart of fonts. (They actually call it Selected Families, not shopping cart.) Figure out how to view your selected fonts and add and remove different styles.

Then, do the following:

  • Add the Jost font family with the following styles:
    • Regular 400
    • Regular 400 italic
    • Regular 600
  • Add the Crimson Text font family with the following styles:
    • Regular 400

(note that numbers such as 400, 600 etc. correspond to the font-weight.)

From the Selected Family menu, figure out how to get the line of CSS code that you will paste in your CSS stylesheet to embed these fonts in your site. Hint: the relevant CSS code will involve the @import rule. Warning: don’t copy the <style> tags if you intend to place this code in your CSS file!

Paste this @import rule at the top of your stylesheet. You can now use these fonts on the page the way you would use any font: with the font-family CSS property! Note that font family names that have spaces in them (like “Crimson Text”) will have to be surrounded by double string quotes.

Set the default font family for the whole page to “Crimson Text” with serif as the fallback. Have the font family for all headings set to Jost with sans-serif as the fallback. Have the tagline also set to Jost, but using the italic style. (figure out how to do this.)

Task 5: Basic Styles

Using CSS, implement the following:

  • Set the width of all images to 100% so that they fill their containers.
  • Change the color of “Assignment 4” in the <h1> to steelblue.
  • In the starter files, I’ve given you an image called dog_and_cat_pattern-11.jpg. Using the background-image property, apply this image to the <body>: https://www.w3schools.com/cssref/pr_background-image.asp
    • Since the image is too large for the page, we need to make it smaller using the

background-size property. Figure out how to do this.

  • Set the background color of the wrapper <div> to white. Set an appropriate padding, box shadow and maximum width (1000px). Center the element in the window. The wrapper should not get larger than 1000px, but should shrink appropriately when the browser window is made narrower than 1000px.

What does the “a” stand for in rgba()?

Task 6: Grid Layout For Navigation Menu

By default, our HTML container elements (such as footer, main, nav, section, article, etc.) will stack on top of each other vertically. (As block elements do.) However, we’re often going to need to create layouts that are a bit more complex than that. For example, we may need to create multi-column layouts, sidebars, grid layouts, etc.

To do this, we’re going to use a new display property called grid. Let’s start by using this property to align the elements of our navigation menu horizontally. While we previously did this by using display:inline-block, the CSS grid system gives us the advantage of creating a responsive system in which the nav elements resize themselves to fit the window, regardless of the window or device size.

Properties that affect the whole grid layout are always applied to the parent element in which the grid cells are contained as children. In the case of the navigation menu on this page, figure out which element is the parent, and which elements are the children that will become the grid cells.

In the CSS code, select the parent element and add the following property:

display: grid;

The parent is now a grid container. We now need to set up a column template for the grid. In the parent style declaration block, set the following CSS property:

grid-template-columns: 1fr 1fr 1fr 1fr;

The above code is setting up four columns (since our navigation menu has four items). The fr unit is used for the flexible length value. What we’re doing here is dividing the free space inside the grid parent into four equal parts. We know they’re equal because each column has the same value: 1fr. If we wanted one column to be larger than the others, we could give it a larger value, like 2fr, for example.

In order to add some space between the grid columns, use the grid-gap property:

gap: 1rem;

Optional challenge: try reducing the number of columns in the grid. What happens? What happens if you add additional columns?

A few other things you should do:

  • Remove the bullet points from the list;
  • Figure out how to remove the empty space on the left side of the grid. Where is this coming from? Hint: the inspector tool will be helpful for this.

Task 7: Other Grid Layouts

Using CSS grid, do the following:

  • Figure out how to split the <main> element into two columns with the left column being three times wider than the right column. The left column should contain the “articles” section (with “Today’s Headlines”) and the right column should contain the <aside> content (with “Article Archive” and “Our Partners”).

Make sure the <main> element has only two direct children, which will be arranged as the left and right column. If you have more than two children in the <main> element, you may need to revisit the code you wrote in Task 2.

  • Figure out how to split the <footer> into three columns of equal width.
  • Figure out how to split the “articles” section into a grid with two columns and multiple rows. This section should have, in the HTML mark up, five children: one heading and four articles. (You may need to revisit your solution for Task 2 if this is not currently the case.)

This property allows us to have an element stretch across multiple columns by specifying a start column and end column. (or a start column and the number of columns to stretch across.)

  • Note that you don’t have to do anything special to set up multiple rows; the grid cells will automatically flow into new rows once the first row is filled.

Task 8: Remaining Styles

The hard part is done; now we just need to add a few additional styles:

  • The two theme colors for this page are brown and steelblue; apply these colors to the appropriate elements.
  • Use the inline-block display property to horizontally align the social media icons. Remove the list bullets. Try to match the size and spacing from the screenshots.
  • Match the colors and approximate size of the headings to the screenshots.
  • Add borders, padding and margin to match the screenshots.
    • Remember that the gap property can be used to add space between grid cells.
  • Set the background color of the right column to be a partially transparent version of steelblue using the rgba() function. To do this, get the RGB value of steelblue from here: https://www.rapidtables.com/web/color/html-color-codes.html
  • Implement any other styles necessary to approximately match the screenshots.

Check Your Work

  • Validate your HTML and CSS code. Don’t forget to save screenshots to hand in.
    • Embedding the Google fonts in your HTML code may cause validation errors; try embedding them using CSS instead.

Hand In

Rename your working folder to a4-firstname-lastname. (with your own first and last name, of course!) Create a new folder called validation that contains your validation screenshots and add it to this folder. Make sure the work you’re submitting does not contain any unnecessary files, such as the screenshots from the starter files. Create a Zip archive from the a4-firstname- lastname folder and hand it in to D2L. (Do not use some other archive format like Rar or 7z. If you’re having trouble creating a Zip archive, please let me know.)

Grading

  • [5] HTML markup
  • [2] Accessible icons
  • [2] Google fonts applied
  • [4] Grids
  • [2] Misc. styles (colors, borders, box model, etc.) Total: 15

Note that up to -2 may be deducted for improper hand in, misnamed files, disorganized workspace, etc. Please ask me if in doubt.

Resources:

Order Now
No Fields Found.
Universal Assignment (June 21, 2025) Assignment 4: Intermediate CSS Layout. Retrieved from https://universalassignment.com/assignment-4-intermediate-css-layout/.
"Assignment 4: Intermediate CSS Layout." Universal Assignment - June 21, 2025, https://universalassignment.com/assignment-4-intermediate-css-layout/
Universal Assignment July 6, 2022 Assignment 4: Intermediate CSS Layout., viewed June 21, 2025,<https://universalassignment.com/assignment-4-intermediate-css-layout/>
Universal Assignment - Assignment 4: Intermediate CSS Layout. [Internet]. [Accessed June 21, 2025]. Available from: https://universalassignment.com/assignment-4-intermediate-css-layout/
"Assignment 4: Intermediate CSS Layout." Universal Assignment - Accessed June 21, 2025. https://universalassignment.com/assignment-4-intermediate-css-layout/
"Assignment 4: Intermediate CSS Layout." Universal Assignment [Online]. Available: https://universalassignment.com/assignment-4-intermediate-css-layout/. [Accessed: June 21, 2025]

Please note along with our service, we will provide you with the following deliverables:

Please do not hesitate to put forward any queries regarding the service provision.

We look forward to having you on board with us.

Most Frequent Questions & Answers

Universal Assignment Services is the best place to get help in your all kind of assignment help. We have 172+ experts available, who can help you to get HD+ grades. We also provide Free Plag report, Free Revisions,Best Price in the industry guaranteed.

We provide all kinds of assignmednt help, Report writing, Essay Writing, Dissertations, Thesis writing, Research Proposal, Research Report, Home work help, Question Answers help, Case studies, mathematical and Statistical tasks, Website development, Android application, Resume/CV writing, SOP(Statement of Purpose) Writing, Blog/Article, Poster making and so on.

We are available round the clock, 24X7, 365 days. You can appach us to our Whatsapp number +1 (613)778 8542 or email to info@universalassignment.com . We provide Free revision policy, if you need and revisions to be done on the task, we will do the same for you as soon as possible.

We provide services mainly to all major institutes and Universities in Australia, Canada, China, Malaysia, India, South Africa, New Zealand, Singapore, the United Arab Emirates, the United Kingdom, and the United States.

We provide lucrative discounts from 28% to 70% as per the wordcount, Technicality, Deadline and the number of your previous assignments done with us.

After your assignment request our team will check and update you the best suitable service for you alongwith the charges for the task. After confirmation and payment team will start the work and provide the task as per the deadline.

Yes, we will provide Plagirism free task and a free turnitin report along with the task without any extra cost.

No, if the main requirement is same, you don’t have to pay any additional amount. But it there is a additional requirement, then you have to pay the balance amount in order to get the revised solution.

The Fees are as minimum as $10 per page(1 page=250 words) and in case of a big task, we provide huge discounts.

We accept all the major Credit and Debit Cards for the payment. We do accept Paypal also.

Popular Assignments

Evidence to Inform Nursing Practice Assignment Help

Unit Code:   NURS12165 Unit Title:    Evidence to Inform Nursing Practice Assessment Three Type:                               Written Assessment Due date:                         Week 11: Wednesday, 28 May 2025 at 1600 (AEST) Extensions:                     Available as per policy Return date:                    Results for this assessment will be made available on Wednesday, 18 June 2025 Weighting:                       50% Length:                           

Read More »

NUR1120 | Burden of Disease and Health Equity

Assessment Item Task SheetCourse code andnameNUR1120 | Burden of Disease and Health Equity Assessment itemand nameAssessment Three | ReportDue date and time Week 11 | 22/04/2025 at 2359 hours AESTLength 1400 words (+/- 10% in each section) – includes in-text references, but not reference list.Marks out of:Weighting:80 Marks50%Assessed CourseLearning Outcomes(CLO)CLO1,

Read More »

PSY1040 Portfolio: Cultural Responsiveness & Self-Awareness

Course Code and NamePSY1040: An Introduction to Cultural Safety in PracticeAssessment Item Number and NameAssessment 2: PortfolioAssessment Item TypePortfolio PSY1040 Portfolio: Cultural Responsiveness & Self-AwarenessDue Date & TimeTuesday, 29 April 2025 (Week 12), 11:59pmLength2000 words – an average of 400 words per task.Marks and WeightingMarked out of: 100Weighting: 50%Assessed Course

Read More »

Innovative Digital App Development Report

OVERALL DESCRIPTION OF TYPE OF ASSIGNMENT Assessment 1- Type of Assignment Individual Written Report Details Individual Written Report 3,000 words (500 words of the Report is Contextualisation) Weighting of Assessment : 70% INDIVIDUAL MARK Learning outcomes assessed by Assessment: 1, 2, 3 and 4 – See Module Listings of Learning

Read More »

Tourism Trends and Investment Decisions: A Comparative Study

Assignment TaskYou are a strategist working for a major hospitality group based in Australia. The company is planninginternational expansion, and the board has asked you to compile a report to identify the most suitablelocation for the project. The board has shortlisted two international locations (which will be allocatedto you by

Read More »

EC502 Language and Literacy in the Early Years

EC502 Language and Literacy in the Early Years Unit Code/Description EC502 Language and Literacy in the Early Years Course/Subject Bachelor of Early Childhood Education Semester March 2025 Assessment Overview   Unit Learning Outcomes Addressed 1, 2, 3 Assessment Objective Assessment 1: Poster Including an Invigilated stage in Week 3. Due

Read More »

EC501 Early Childhood Learning and Development

Unit Code/Description EC501 Early Childhood Learning and Development Course/Subject Graduate Diploma in Education (early childhood) Semester S 1, 2025 Assessment Overview   Unit Learning Outcomes Addressed 1, 2, 3 Assessment Objective In this assessment, student are required to select one of the case studies provided and critically analyze the child’s

Read More »

JSB172: Professional Academic Skills

JSB172: Professional Academic SkillsAssessment: Workplace Report and Presentation Weight: 50%Due date: Friday 30th May 11:59pm Length: 1,750 words (+/- 10 %) / 5minutesPurpose/Learning Objectives:This assessment relates to Learning Outcomes 1, 2, 3, and 4: Task:Your task is to write a Workplace Report identifying how to address the topic/issue chosen or

Read More »

2015PSY Developmental Psychology Assignment

2015PSY Developmental Psychology Assignment 2025 2015PSY Developmental Psychology Assignment Assignment MaterialsAssignment Information Sheet & Marking Criteria.pdf (this document)Assignment Template.docx (template)Example Assignment.pdf (HD exemplar)Due Date: Friday 16 May, 11:59PM (Week 10)Weighting: Marked out of 100 (worth 30% of course grade)Word Count: 1,500 words maximum(inclusive of main text, headings, in-text citations; excluding

Read More »

Principles of Economics Federal Budget

Principles of Economics Short-answer Assignment V1 (20% of final mark) The assignment consists of four questions.  You should allocate at least half a page (or 250 words) to each answer or 1000 words for all four answers depending on the nature of and/or marks allocated for the question/s. You may

Read More »

LML6003 – AUSTRALIA’S VISA SYSTEM 1 (FAMILY AND OTHERVISAS)

Graduate Diploma in Migration Law LML6003 – AUSTRALIA’S VISA SYSTEM 1 (FAMILY AND OTHER VISAS) Assessment Task 2 – Semester 1, 2025 LML6003 – AUSTRALIA’S VISA SYSTEM 1 (FAMILY AND OTHERVISAS) Instructions: 1. Students must answer all questions as indicated. Make certain all answers are clearly labelled. 2. Make certain

Read More »

Construction Cadetships in the Australian Construction Industry

REPORT TOPICPrepare an Academic Report on the following:‘Construction Cadetships in the Australian Construction Industry’.The report should encompass the following: Your personal evaluation and critique of the key findings in your report including your evaluation of construction cadetships, yourfindings in relation to potential issues/problems with cadetships and your recommendations to improve

Read More »

Assessing Corporate Governance and its Significance

Assessing Corporate Governance and its Significance: A Case Study Analysis Overview: Accounting irregularities have cost investors millions of dollars and, most importantly, adversely impacted their confidence in the financial system. While there have been remarkable improvements in regulatory supervision, auditing framework and reporting transparency, young graduates must assess major corporate

Read More »

Master of Professional Accounting and Accounting Advanced

Assessment 2 – Business Case (CVP) AnalysisUnit Code/Description ACC901 Accounting for Managerial DecisionsCourse/Subject Master of Professional Accounting and Master of Professional Accounting AdvancedSemester S1 2025 Assessment Overview Unit Learning OutcomesAddressed1,2,3,4 and 5Assessment Objective The primary objective of this assessment is to assess the students’ ability to apply CVPanalysis and relevant

Read More »

Urban Design Theory Essay writing

Essays are a major form of assessment at university. Through essays, you develop your understanding of discipline-specific content, strengthen your critical thinking, and develop your ability to translate that thinking into a persuasive written form. This assignment assesses your understanding of the following Unit Learning Outcomes: 1) understand the historic

Read More »

Statutory Interpretation of Disability Discrimination in NSW Law

Foundations of Law 70102 – Assessment Task 3 – Autumn 2025Statutory Interpretation and Research ExerciseDue: Thursday 22 May 2025 by 23.59Length: 2000 words (excluding the headings Part A, Part B and Part C, footnotes andbibliography. Any additional headings that you decide to use will be included in the wordcount)Weighting: 40%Task

Read More »

Engineering Career Readiness: Sustainability & Reflection

Objectives: The purpose of this assignment is to: Apply your learning in this unit to your development as an engineering graduate and your future career.Develop the ability to communicate yourself professionally.Develop an ability to reflect on your professional development, and identify any gaps in your capabilities.Unit Learning Outcomes: This task

Read More »

Child Study Report: Saif’s Development Across Key Domains

Child Study Report: Saif’s Development Across Key Domains Introduction This Child Study Report focuses on Saif, a 4-year and 6-month-old boy attending our childcare centre. Saif is an active, curious, and sociable child who engages enthusiastically in various activities. Over three weeks, multiple observations were conducted in different settings—such as

Read More »

2500 Words Insurance Case Study Analysis

Assessing Corporate Governance and its Significance: A Case Study Analysis Overview: Accounting irregularities have cost investors millions of dollars and, most importantly, adversely impacted their confidence in the financial system. While there have been remarkable improvements in regulatory supervision, auditing framework and reporting transparency, young graduates must assess major corporate

Read More »

Critical Reflections: Arts, Play & Mental Health

Peer Learning and DiscussionTask type Discussion Contribution Task description Contribute constructively to the formal weekly online discussions under the guidance of your moderator, in peer-to-peer learning. The purpose of the discussions is for students to explore and share ideas linked to the material being studied that week, and develop skills

Read More »

Indo-Pacific Health Challenge: Community Practice in Kiribati

Task type Indo-Pacific health challenge scenario Task description You will be presented with a real-world case scenario of a health challenge confronting an Indo-Pacific community that directly relates to the current climate emergency. You will analyse the scenario, exploring how community practice principles are being applied. You will then provide

Read More »

Assessment Task 1– SQL Report – Individual Assessment

MIS202 –Managing Data and Information – Trimester 1 2025Assessment Task 1– SQL Report – Individual AssessmentDUE DATE: Friday, 4 April, by 8:00pm (Melbourne time)PERCENTAGE OF FINAL GRADE: 30%WORD COUNT: Maximum 2000 wordsDescriptionPurposeThis task provides you with opportunities to learn the knowledge (GLO1 & ULO1) and skills (GLO 3 & ULO2;GLO4

Read More »

Assessment Category Infographic

Assessment # Title Assessment 1Assessment Category InfographicWeight 50%Length / Duration 500 words (excluding reference list)Individual / Group IndividualLearning OutcomesThis assessment evaluates your achievement of the following Unit Learning Outcomes:

Read More »

STM1001: Assignment 3 for Science/Health Stream Students

STM1001: Assignment 3 Science/Health Stream Students Only Academic Integrity Information In submitting your work, you are consenting that it may be copied and transmitted by the University for the detection of plagiarism. If you are unsure of your academic integrity responsibilities, please check the information provided in the Assessment Overview

Read More »

ACCG1000 Accounting for Decision Making Xero Assignment

1ACCG1000Accounting for Decision MakingXero AssignmentInformation packSession 2 2024Due Date: Friday 18th October 2024 at 11.55pm2Xero AssignmentIntroductionThe Xero assignment is designed to provide introductory accounting students with an overview of the Xero Accounting Software by completing a one-month accounting cycle for a fictional business. This is an online assignment worth 20%

Read More »

WRIT1001 Assessment Notification 2

6Final Essay: Rhetorical analysisDue: Friday 18 October 2024 at 23:59 (Sydney time)Length: 1500 words, worth 40% of the overall grade for the unitSubmit: as a Word document or PDF, via Canvas AssignmentMain question:● Present a scholarly essay that analyses the rhetoric used in arguments about thecontentious topic you have been

Read More »

WRIT1000 Assessment Four

Title: Self-ReflectionDue: Friday October 18 by 11:59PM.Length: 500 words (+/- 10%)Weight: 10% of the total gradeFormat: Times New Roman, double-spaced, 12pt. Your project should have the title“WRIT1000 Assessment Four – Self Reflection for xxxxxxx” where “xxxxxxxx” is yourstudent number. Please only submit Word documents (.doc or .docx). Turnitin doesnot recognise

Read More »

Written Assessment – Psychosocial Research Perspectives

Written Assessment – Psychosocial Research Perspectives TRIGGER WARNING: This is a case study of a real person. Katherine Knight was the first woman in Australia to receive a life sentence without parole after she decapitated and cooked her lover. If you think that you will have problems reading about this

Read More »

Can't Find Your Assignment?