Title: Exploring History: Creating a Stylish Navigation Bar
Objective: The objective of this exercise is to build upon the previous HTML assignment by incorporating
basic CSS to style the navigation bar header and enhance the visual appeal of the webpage while
focusing on historical topics.
Instructions:
1. Start with the HTML file you created for the previous assignment ("history.html").
2. Open your HTML file and create a new section within the <head> tag to link an external CSS file.
Use the <link> tag and specify the location of your CSS file (e.g., "styles.css").
3. Create a new CSS file named "styles.css" in the same directory as your HTML file.
4. Begin styling the navigation bar header by targeting the <nav> and <ul> elements. Use CSS
properties such as background-color, padding, list-style-type, display, float, and text-align to
customize the appearance of the navigation bar.
5. Style the <li> elements within the navigation bar to control their appearance when hovered over
or clicked. You can use properties like background-color, color, padding, border-radius,
transition, etc.
6. Experiment with different font styles, sizes, and colors for the navigation items and their hover
effects.
7. Ensure that the navigation bar remains responsive and adjusts its layout appropriately for
different screen sizes using CSS media queries. You can change the layout, font sizes, or any
other properties to make it more user-friendly on smaller screens.
8. Save your CSS file and ensure that your HTML file correctly links to it.
9. Test your webpage in a web browser to ensure that the navigation bar is styled as expected and
remains functional.
Evaluation Criteria:
Integration of CSS styles into the HTML document (5 points)
Creativity and visual appeal of the navigation bar design (10 points)
Consistency in styling across different screen sizes (5 points)
Proper use of CSS selectors and properties (10 points)
Overall organization and clarity of the webpage (5 points)
Submission: Submit your updated "history.html" file along with the newly created "styles.css" file in zip
folder. Ensure all files are neatly organized in a single folder.
Note: While styling the navigation bar, consider using historical themes or imagery to complement the
topic of history. Experiment with different color schemes and layout designs to create an engaging and
visually appealing webpage.
0
