digital-uplift

HTML Tasks

1. Create a Basic HTML Page Build a simple webpage with a title, a heading, a paragraph, and an image.
2. Navigation Menu Create a horizontal navigation bar with links to "Home," "About," "Services," and "Contact."
3. Forms and Inputs Design a form with inputs for name, email, password, a dropdown, checkboxes, radio and a submit button.
4. Table Design Create a table with rows and columns to display data like a product list with names, prices, and quantities.
5. Embedding Media Add a YouTube video and an audio, image file to a webpage.
6. HTML Lists Create an ordered and unordered list for your "To-Do List" and "Shopping List."
7. Links and Anchor Tags Add links that navigate to different sections of the same page and to external websites.
8. Semantic HTML Build a webpage structure using semantic elements like , , , , and
   .

CSS Tasks

9. Apply Basic Styling (inline, internal, external) use external styling Style your headings, paragraphs, and links with colors, fonts, and text alignment.
10. Background Styling Add a gradient background or an image as the background of a webpage.
11. Box Model Practice Create a box with padding, border, and margin to understand the box model concept.
12. Flexbox Layout Build a responsive layout with Flexbox, such as a card layout with images and text.
13. CSS Grid Layout Use CSS Grid to create a 3x3 layout for an image gallery.
14. Hover Effects Add hover effects to buttons and links using the :hover pseudo-class.
15. Responsive Design Use media queries to make a webpage responsive for mobile, tablet, and desktop views. Font Awesome Tasks Set Up Font Awesome Task: Add Font Awesome to your project via a CDN Ok kit. Include at least three icons (e.g., social media, navigation, and action icons). Steps: Create a kit for those that Newly joined or explore the link below Include the Font Awesome CDN in your section:

Google Fonts Tasks Add Google Fonts Task: Include a Google Font in your project and apply it to your headings and paragraphs and any other elements of your choice. Steps: Go to Google Fonts website, select a font, and copy the tag or @import rule. Add it to your HTML or CSS. Multiple Fonts Task: Use two Google Fonts for different parts of the page (e.g., one for headings and another for paragraphs). Font Pairing Task: Explore font pairing using Google Fonts and create a page with complementary fonts for headings, subheadings, and body text. Steps: Use Google Fonts’ pairing suggestions. Apply distinct fonts for headers, subheaders, and content.