0% found this document useful (0 votes)
13 views

html and css exercises

The document provides a series of HTML and CSS exercises aimed at building foundational web development skills. It covers creating basic web page structures, personal profiles, navigation links, forms, tables, and various styling techniques using CSS. Additionally, it includes exercises on responsive design and layout techniques using Flexbox and CSS Grid, culminating in the design of a landing page and portfolio page.

Uploaded by

fredntah01
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views

html and css exercises

The document provides a series of HTML and CSS exercises aimed at building foundational web development skills. It covers creating basic web page structures, personal profiles, navigation links, forms, tables, and various styling techniques using CSS. Additionally, it includes exercises on responsive design and layout techniques using Flexbox and CSS Grid, culminating in the design of a landing page and portfolio page.

Uploaded by

fredntah01
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Exercises

Basic Structure of a Web Page


Create a simple HTML page with the following elements:

A title for the webpage in the <head> section.


A header with a <h1> tag.
A paragraph using the <p> tag.
An unordered list (<ul>) with at least 3 list items (<li>).
A footer with some text.
Create a Personal Profile
Create an HTML page that includes:

An image of yourself (use a placeholder image or real photo).


A heading with your name.
A short description about yourself in a paragraph.
Your social media links in an ordered list.
Links and Navigation
Create a simple webpage with the following:

Create a navigation bar with 3 links.


Make sure the links are clickable, and use href to link to different pages (you can
link to existing pages or other websites).
Include a <div> container for styling purposes.
Form Creation
Create an HTML form that includes:

A text input for the user’s name.


A radio button for selecting gender.
A dropdown for selecting a country.
A submit button.
Style the form using CSS (see below).
Tables and Data
Create a table to display:

A simple table with 3 rows and 2 columns. The table should have a header with
titles for the columns.
Use <thead>, <tbody>, and <tr> tags for structure.
Add borders, padding, and alignment to the table using CSS.
CSS Exercises
Basic Styling
Style the following:

Add background color to the page.


Change the font of the text to something like "Arial" or "Times New Roman."
Set a text color for your headings and paragraphs.
Apply padding and margins to elements.
Text Alignment and Typography

Style your headings and paragraphs to center the text.


Make the text in a paragraph bold and italicized.
Set a font size for your heading to be larger than the body text.
Box Model Exercise

Create a box with a width and height of 200px.


Add padding of 20px, a 2px solid border, and a margin of 30px around the box.
Make sure the box displays the correct spacing based on the box model.
Color and Background

Use CSS to add a background image to your webpage.


Create a gradient background using the background: linear-gradient() property.
Experiment with different background colors for various elements.
CSS Flexbox Layout

Create a simple layout using Flexbox:


Create a container with 3 items inside it.
Align the items horizontally using Flexbox properties like justify-content and
align-items.
Ensure that the items adjust to the screen size (make the layout responsive).
CSS Grid Layout

Create a 2x2 grid layout using CSS Grid:


Add 4 items to the grid.
Control the size of each grid item using grid-template-columns and grid-template-
rows.
Adjust the layout so that it becomes responsive when the screen is resized.
Combining HTML and CSS:
Landing Page Design

Create a simple landing page with a hero section that includes:


A large heading.
A subheading with a brief description.
A call-to-action button.
Style the hero section with background images, text color, and spacing.
Portfolio Page

Create a simple portfolio page that includes:


Your name and a brief description of your skills.
Sections for different projects, each containing an image and a short description.
Style the page using CSS to make it visually appealing (using fonts, borders,
spacing, etc.).
Responsive Design

Create a webpage that looks good on both desktop and mobile screens by using media
queries.
Start by designing a simple webpage with a header, content, and footer.
Add a media query to adjust the layout when the screen width is less than 600px
(e.g., stacking elements vertically).

YOUTUBE COURSE LINK: https://www.youtube.com/watch?v=G3e-cpL7ofc

You might also like