This project is part of the Responsive Web Design Certification on FreeCodeCamp.org.
This project builds a simple, one-page layout using HTML and CSS. It features a left-side navigation bar and a content section on the right side displaying information about a chosen topic.
This project was an opportunity to solidify my understanding of HTML, CSS, and explore media queries for the first time.
- HTML Structure: The HTML utilizes a straightforward structure with a navigation bar containing links and eight sections, each with headers and paragraphs.
- CSS Challenges: The primary challenge involved positioning the navigation bar on the left side using CSS float properties to separate it from the main content.
- Media Queries: This project marked my first venture into using media queries to ensure responsiveness across various screen sizes. Three media queries were implemented, each combining conditions using logical operators to target specific device ranges - cell phones, tablets/medium devices, and laptops/large screens.
Media queries can be a complex concept, but they are an essential tool for modern web development. I found them valuable and plan to incorporate them further in future projects!
🧑💻FreeCodeCamp Technical Documentation Page Project: https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page
👨💻Live Project Demo: https://github.com/FreeCodeCamp-Solutions/Technical-Documentation-Page
🙌🏼Feel free to explore the code and see the project in action!🙌🏼