Now that you have created your HTML Personal Portfolio Page, it's time to bring it to life with CSS styling. This exercise will help you practice basic styling, layout techniques, and responsive design for web pages.
- Set a background color for the entire page
- Apply different background colors for the header, navigation menu, and footer sections
- Choose and apply a font style for the entire page using a web font (e.g., from Google Fonts)
- Style headings (e.g.,
<h1>,<h2>,<h3>) with different font sizes, colors, and weights - Style paragraphs and list items with appropriate font sizes and line heights
- Style the navigation menu as a horizontal bar
- Add padding and margin to each menu item
- Change the appearance of links (e.g., color, text-decoration) on hover
- Use a grid or flexbox layout to arrange the projects in a responsive grid
- Add border, padding, and margin to each project item
- Add hover effects to project links (e.g., change color or background)
- Style form elements (input, textarea, button) with padding, borders, and focus effects
- Ensure the form is responsive and adapts well to different screen sizes
- Use media queries to adapt the layout and styles for different screen sizes (e.g., mobile, tablet, desktop)
- Ensure the navigation menu switches to a vertical layout on smaller screens
- Save your CSS file as
styles.css - Link the CSS file to your
index.htmlfile by adding the<link>tag inside the<head>section - Submit both
index.htmlandstyles.cssfiles for review
In this exercise, you will create a personal portfolio webpage using HTML. This task will help you practice structuring HTML documents, using semantic tags, and including various elements like images, links, lists, and forms.
- Use a proper DOCTYPE declaration.
- Include the necessary tags:
<html>,<head>, and<body>. - Use semantic HTML tags like
<header>,<nav>,<main>,<section>, and<footer>.
- Header: Include your name and a navigation menu with links to different sections of the page.
- About Me: A section with a brief introduction about yourself.
- Portfolio: A section showcasing your projects. Each project should have a title, a brief description, and a link to the project (can be a placeholder link).
- Contact: A section with a contact form that includes fields for name, email, and message.
- Footer: A footer with your social media links.
- Images: Add at least one image (e.g., a profile picture).
- Links: Use both internal links (navigation menu) and external links (social media, project links).
- Lists: Use an unordered list for the navigation menu and an ordered or unordered list for listing your projects.
- Forms: Include a contact form with appropriate input fields and labels.
- Use comments to explain the different sections of your HTML code.
- Ensure proper indentation and formatting for readability.
- Validate your HTML file using an online validator (e.g., FreeFormatter HTML Validator).