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
