Embedded Files
Learning Goal - To learn how to use media queries to adapt a webpage to the screen size the page is being shown in, such as a PC or phone.
TASK 3a - Use media queries to change the background colour of a webpage at common breakpoints.
1) Start by watching the video to introduce how media queries are used.
2) Open the Replit project to complete this
3) Follow the activities in the Google Slide to the right to learn how to practice using basic media queries at common breakpoints to change the background colour for different screen sizes.
TASK 2b - Use media queries to alter the layout of a webpage
1) Open the project in Replit to complete this .
2) Using your knowledge from the previous tasks use media queries to alter the layout of a page you should have three different breakpoints, there is an idea of what this should look like in the Google Slide.
You may find w3schools.com useful to help you complete this activity.
Page updated
Report abuse