Flexbox Guide Website

A modern, responsive website that demonstrates and explains the key features of CSS Flexbox layout module. The site serves as both a practical example and an educational resource for learning Flexbox concepts.

Features

• Interactive Layout Examples: Demonstrates various Flexbox properties and their effects
• Responsive Design: Built entirely with Flexbox, showcasing responsive layouts without media queries
• Educational Content: Clear explanations of Flexbox concepts and properties
• Modern UI: Clean and professional design with consistent styling
• Interactive elements with smooth animations and transitions

Structure

• index.html - Main HTML file containing the website structure
• css/
  • styles.css - Main stylesheet with Flexbox implementations
  • styles_zeroing.css - CSS reset/normalize file

Key Sections

1. Introduction - Overview of Flexbox benefits
2. What is Flexbox? - Detailed explanation of Flexbox technology
3. Flexbox Features - Four key aspects of Flexbox:
   • Flex Container
   • Element Direction
   • Axis Alignment
   • Cross-axis Alignment
4. Benefits - Three main advantages of using Flexbox:
   • Ease of Use
   • Responsiveness
   • Efficient Alignment

Technologies Used

• HTML5 — semantic markup
• CSS3 — styling and animations
• Flexbox — main layout tool
• CSS Media Queries — responsive design
• SVG graphics — vector images
• Modern CSS naming — BEM methodology

Getting Started

1. Clone this repository git clone https://github.com/Dmitr15/My-course-site.git
2. Open index.html in your browser
3. Or use Live Server in VS Code (configured port: 5501)

Browser Support

The website works in all modern browsers that support CSS Flexbox:

• Chrome
• Firefox
• Safari
• Edge

Screen forms