INF3014F Tutorial 4

Uploaded by

khmaponya

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

11 views

INF3014F Tutorial 4

Uploaded by

khmaponya

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 4

INF3014F: Responsive Web Design

Tutorial 4

Due Date: Friday 15th March 2024 @ 23:59 PM.

Total = 50 marks

Instructions
In this tutorial, you will use Responsive Web Design. This means creating designs that
adapt to different screen sizes and devices, such as mobile phones and tablets. A
responsive design uses CSS media queries to adjust the layout and content of a
webpage based on the screen size of the device being used. Apply the below tasks to
your newly minted Fashion and Retail Store website in Tutorial 3.

On Windows OS, use Notepad (or Notepad++) to code the web pages and TextEdit
for those with MacOS, and use any browser to view and test your web pages. To
start, create a new text document on your desktop and rename it to home.html. You
can also use other IDEs like Visual Studio, Sublime or VS Code. However, do follow
the instructions below when submitting.

Tasks:
Responsive Web Design

1. Open and review the existing Fashion and Retail Store website that you
created in Tutorial 3.
2. Add a meta viewport tag to your HTML file. This tag tells the browser how to
adjust the page's dimensions and scaling to match the screen size of the
device. Add this code to the head section of your HTML file:
<meta name="viewport" content="width=device-width, initial-
scale=1">
3. Add CSS media queries to adjust the layout and content of your webpage for
different screen sizes. You can specify different CSS rules for different screen
widths, using the ‘media’ rule. For example, to adjust the layout for smaller
screens, you might add a rule like this:
@media only screen and (max-width: 600px) {
/* CSS rules for screens smaller than 600px */
}
4. Use relative units for sizing, such as percentages or ems, rather than fixed
pixels. This allows the design to adapt to different screen sizes.
5. Test your website across different devices and browsers to ensure that it
displays correctly and is user-friendly. Use the Google Chrome Inspector Tool
to test and simulate 3 different devices (Mobile device, Tablet, Desktop). See
link:
https://docs.inductiveautomation.com/display/DOC80/Test+Your+Responsive
+Design+Using+Chrome%27s+Developer+Tools

Submit this Tutorial under Assignments (Tutorial 4) on Vula.

Finished!

Grading Rubric (Evaluation Criteria):

Responsive Web Design

Criteria Marks

All HTML and CSS elements are converted and displayed correctly on mobile and desktop
devices 10

Errors in HTML and CSS conversion 5

Responsive Web Design Implementation 5

Website layout and content is responsive and adjusts to different screen sizes 15

Proper use of CSS media queries 5

Criteria Marks

Navigation menu is responsive and easy to use and the use of Use of custom CSS styles and/or
images that enhance the design 5

Font sizes and spacing are adjusted for optimal readability on mobile devices 5

Total 50

PLEASE NOTE THAT YOU ARE REQUIRED TO USE YOUR OWN DESIGN HENCE THERE
ARE NO DESIGN TEMPLATES. MAKE SURE TO BE CREATIVE.

• Add consistent comments in your code. It helps clarify the purpose and
functionality of the code for both yourself and the tutors who will review the
code.
• Make sure all HTML files and images should be within one main folder.
• Save your files (i.e., images, etc.) with the correct file extensions, and zip your
folder before submission!
• Zip all files into one folder and submit them on Vula.

Plagiarism Declaration

Disclaimer: AI code generation and completion

We acknowledge the existence of numerous AI code generation and completion tools that
are currently available. However, we strongly advise against using these tools due to their
potential negative impact on the learning experience. These tools tend to diminish the
opportunity for individuals to develop their coding skills and problem-solving abilities.
Therefore, it is highly recommended to avoid relying on AI code generation and completion
tools, especially for those who are just starting to learn how to code. It is crucial to take the
time to understand coding concepts and principles and practice writing code from scratch to
develop one's coding skills fully.

YOU ARE WARNED TO TAKE PLAGIARISM VERY SERIOUSLY – WE DEFINITELY WILL!

A mark of 0 will be given for any submission, including copying from other resources without
referencing it.
INF3014F Tutorial 4

INF3014F Tutorial 4

2024
K.H Maponya 15 03

Kabelo Maponya

Additional Resources:
• How to use Chrome Inspector Tool:
• Chrome Inspector Tool is a powerful tool that can be used to test the user-
friendliness of a website across different devices. Here's how you can use it:
• Open your website in Google Chrome and right-click on any element on the
page.
• Select "Inspect" from the menu that appears. This will open the Chrome
Inspector Tool.
• Click on the device icon in the top left corner of the Inspector Tool. This will
open the Device Toolbar.
• From the Device Toolbar, you can select different devices and orientations to
test how your website looks and behaves on those devices.
• You can also simulate different network conditions and user locations to test
the website's performance under different circumstances.
• As you make changes to your website's design and layout, you can use the
Device Toolbar to test how those changes look and function on different
devices.
• You can also use the Inspector Tool to debug any issues that arise during
testing.
• See W3Schools for more information:
https://www.w3schools.com/html/html_responsive.asp
https://www.w3schools.com/css/css_rwd_intro.asp
-------oo000oo--------