CSS

Exercises

CSS Exercises

1. Online newspaper design

1.1 Main Style

We will start by designing the main components of the main page without worrying about the positioning of any elements (style.css). The final result should be this .

Some helper values:

Tip: You may have noticed that the nav section contains an input and a label. These are just to be used in exercise 1.3 You can start by hiding them using CSS for now.

1.2 Positioning

Then we will position the elements in their proper places (layout.css). The final result should be this .

Some helper values:

Tip: Use a flexbox for the menu and a grid to position the elements in the page.

1.3 Responsive Design

We will now make the design responsive by establishing two break points (responsive.css):

Some helper values:

Tip: Start by making the menu without any animations (using display to hide and show the menu items). After that, try using transitions to change the height of each menu item instead.

1.4 Comments Design

Add CSS rules (comments.css) to create the design for the comment section that can be seen in the item.html page. The final result should be this .

Some helper values:

1.5 Forms Design

Add CSS rules (forms.css) to create the design for the register and login forms that can be seen in the register.html and login.html pages. The final result should be this .

Make sure that in smaller screens, the form fills the content area like this .

2. No flexbox/grid design

Without using the flexbox and grid CSS layouts, try to recreate some designs.

Extra: Now try the same exercises, this time using flexbox and grid layouts.

3. Blocks

3.1

Tips:

3.2

3.3

Tips:

3.4

Tips:

Solutions

Solutions for these CSS exercises.