FreeCodeCamp - Documentation Page

This is a solution to the "Documentation Page" task on FreeCodeCamp "Responsive Web Design" course.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• Scrollable side menu

Screenshot

Links

• Live Site URL: https://yazdrahobycha.github.io/Fake-Documentation-Project/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow

What I learned

The objective of this project was to design a visually appealing and responsive web page with a scrolling side menu. To achieve this, the "overflow" properties were utilized:

Implementation of oveflow side menu

<nav id="navbar">
            <header>JS Documentation</header>
            <ul>
                <li><a class="nav-link" href="#introduction">Introduction</a></li>
                ...
                <li><a class="nav-link" href="#reference">Reference</a></li>
            </ul>
        </nav>

#navbar ul {
    margin: 1rem 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 207px;
    border: 1px solid;
}

Continued development

• Write more consice semantic HTML

Author

• Instagram - @yazdrahobycha
• Telegram - Орсен