css-layout

responsive web design with float, flexbox and grid

this is a summary to the CSS Layouts: From Float to Flexbox and Grid.

Table of contents

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

Overview

The course

• have a thorough knowledge of the handling of items and containers
• put into practice the knowledge already acquired in float, flexbox and grid

Users should be able to:

• Get better

Screenshot

Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.

Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Float
• Flexbox
• Grid
• Styled Components - For styles

What I learned

 <nav>
        <h2>nav</h2>
        <a href="#main-content">skip navigation</a>
        <ul>
          <li>nav item</li>
          <li>nav item</li>
          <li>nav item</li>
          <li>nav item</li>
        </ul>
 </nav>
<main id="main-content">
        ...
</main>

#####Float
.proud-of-these-css {
   aside {
        width: 25%;
        clear: none;
        /* so that the item can go on the right side */
        float: right;
    }
    
#####Flexbox
    .container {
    color: white;
    font-family: helvetica, arial, sans-serif;
    display: flex;
    flex-wrap: wrap;
}
header {
    background: skyblue;
    order: 1;
    flex: 1 0 100%;
}
}

set max-width for flexibility mobile first befor min- and max-width

Continued development

• responsive web design with css

Author

• LinkedIn - Christ Watat
• Frontend Mentor - @Christ-Kevin
• Twitter - @WatatK