WEBD150 Assignment 1

WEBD 150 – Web Tech 2

Assignment 1 CSS  Responsive Grid and Flex box

Overview:

Using HTML and CSS – Flex box and CSS Grid create a responsive webpage.

Learning Objectives:

Use HTML and CSS to create a proper page structure, layout and structured content within and design it to look good on 3 breakpoints using media queries.

Task:

You are to make 1 web page using HTML and style it using CSS.

This webpage will contain 1 media query breakpoint, this media query breakpoint will kick in at 800px and below.

Within the web page’s body tag you are to build the following:

wrapper

header

Just a regular header height and content is up to you.

main content

Within the main content div you are to build the following:

2 individual CSS Grid elements

The first grid will contain the simple grid

The second grid will contain the complex grid:

Both grids will need to convert to a 1 column layout at the mobile breakpoint.

You may use whatever content you wish for the grid cells, background images, text, whatever.

Footer

Within the footer you are to make 3 or more flex items.

The flex items must convert to 1 column at the mobile breakpoint.

Marks:

Total 20%

Grid copies (how close they are to the examples)

HTML formatting (clean code)

Attention to detail (does it look good)

Responsive design (did you make it responsive)

Categorised in: Uncategorized

This post was written by amax