HTML Exercises 1

These are basic HTML exercises to start with coding. You can use https://codepen.io website to practice these examples. Use google to search if you got struck.

1. Creating Boxes

• Create two boxes as shown below one after another
• Create two div elements in html
• Add a class to each of the div element
• The classes can be used to style the div element

Visual representation of the boxes

Box 1 has following style properties.

1. height of 200px
2. width of 300px
3. background color red
4. border width of 5px
5. border color green
6. Add text inside the box and place it at the center from both sides

Box 2 has similar properties of box 1 with some changes

1. background color blue
2. border color yellow

2. Creating nested boxes

Create two divs and place it inside another div. Nested divs helps to organize the elements and group them.

Nested boxes

Box 3

1. width: 358px;
2. height: 620px;
3. background: #B49999;
4. border: 1px solid #000000;

Box 1

1. width: 278px;
2. height: 243px;
3. background: #ADB499;
4. border: 1px solid #000000;

Box 2

1. width: 278px;
2. height: 243px;
3. background: #ADB499;
4. border: 1px solid #000000;

3. Responsive boxes

Create responsive 8 boxes with following rules. You can think of using CSS flex and grid to achieve this. The responsive boxes auto arranges its width and height based on the width and height of the screen.

Desktop

1. Device width greater than 1024 px
2. 4 boxes per row
3. Margin between each box
4. Total 8 boxes

Desktop Size

Tablet

• 2 boxes in a row
• Device width 768px — 1024px
• Margin between boxes

Tablet

Mobile

• 1 box per row
• Device width range 360px — 640px
• Margin between boxes

Mobile

Use mobile simulators available in Browsers for testing in different devices

Implement below layout,

The layout must fill out the height of the page. There is a header, sidebar, main content and the footer.

This is the notion template for this exercise.

https://quill-walk-152.notion.site/HTML-Exercises-53bf3a8f242a46919b59bdc530601103.

This will help out to create a task list.

HTML exercises 2

1. Table creation

Create a table with following styles. Use the table tag.

sample table

2. Create link

Create a link to the google.com and
1. On click of the link it in the same page
2. On click of the link it should open it in a new page

3. Create List

• Create a list of items using ul and li tags .
• Alternative colors for the backgrounds.
• There is space between each item.

Alternative colors list

4. Nested List

• Created nested list
• Use ul and li tags
• Place ul inside li tags to get nested list

Nested list