In this assignment, you are going to build a four-page website. Each page of the website is a new opportunity to explore and apply different elements of HTML and CSS. The theme for your website is “Welcome to the Real World Assignment”, giving you a chance to explore on different ways of applying CSS using inline and internal CSS and external CSS. And also you will get to know different types of selectors in CSS.
Page 1: Home (index.html)
Use inline CSS for styling individual elements in this page and mainly concentrate on CSS properties such as font-size and color.
Instructions
- Title: “Home - Real World Assignment” in the
<title>tag. - Heading: Use
<h1>with “Welcome to the Real World Assignment”. Apply inline CSS forcolorandfont-size. - Paragraph: Add a
<p>tag with “Discover the essentials of web development and design. Start your journey with this practical assignment.” Style with inline CSS. - Navigation Links: Create links to “Profile”, “Dashboard”, “Categories” using
<a>tags. Separate with . Style with inline CSS. One link should open in a new tab usingtarget="_blank".
Page 2: Profile (profile.html)
Use internal CSS for styling individual elements in this page. mainly concentrate on CSS properties such as font-size and color.
Instructions
- Title: Set the title as “Profile - Real World Assignment” in the head section of the page with
<title>tag. - Heading and Paragraph: Use an
<h1>tag for “My Professional Profile” and a<p>tag for a mock biography. Style with internal CSS. - Skills Section: Include an
<h2>tag for “Skills” and list skills in bullet points using<ul>and<li>. The skills content should be React, HTML, CSS, JavaScript, Git. - Hobbies Section: Add an
<h2>tag for “Hobbies” and list hobbies using<ul>and<li>. - Styling: Use a
<style>tag within the<head>section. Style each section with different font styles and colors.
Page 3: Dashboard (dashboard.html)
Use external CSS for styling individual elements in this page. Mainly concentrate on CSS properties such as font-size and color.
Instructions
- Title: Set the title as “Dashboard - Real World Assignment” in the
<head>section of the page with<title>tag. - Heading: Use an
<h1>tag for “Dashboard Overview”. Briefly explain the purpose of the dashboard. - Dashboard Sections: Use
<ul>to display dashboard sections.- Recent Activities
- Statistics
- Upcoming Events:
- Styling: Link an external CSS file. Style the layout using class and ID selectors.
Page 4: Categories (categories.html)
Use External CSS for styling individual elements in this page and style using all different types of selectors. Always use best practices in this page.
Instructions
- Title: set the title as “Categories - Real World Assignment” in the
<title>tag. - Heading: Use
<h1>tag for “Explore Our Categories”. - Categories List: Use
<ul>and<li>for listing categories.The list of categories should be “Frontend”, “Backend”, “Design”, and “Data Science”. - Styling: Use external CSS and selectors to style the layout like class, ID, tag and universal selectors. Include
!importantin some styles to check the priority.
Additional Guidelines
- Ensure all pages are linked together.
- Validate HTML and CSS to ensure standards compliance.
- Encourage creativity in design while adhering to the requirements.
Submission
You should submit the complete website including HTML and CSS files. The HTML files should be linked to the CSS files.