Skip to content

Hachikoi-the-creator/FlexboxDisplay

Repository files navigation

Table of contents

Overview

Objective

vUsers should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Screenshot

1st Option Prev 2nd Option Prev 3rd Option Prev 4th Option Prev

Links

My process

  • Since it was pretty much from scratch I had to do a couple of drafts in paint, and get feedback from friends and parents
  • Then I once again tried to find a way to add code snippets, and got it!
  • Then the Styling was just a back and forth from html to css & sass

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • SASS
  • Fonts-used

What I learned

  1. If you think you'll make a small project and there's no need to use SASS, you MUST use SASS
  2. I finally know how to add code snippets in my pages!

SASS

  • Got a better understanding on how to use flex on childrens
.container .seven > div { 
  &:nth-child(1) { order: 3; }
  &:nth-child(2) { order: 1; }
  &:nth-child(3) { order: 4; }
  &:nth-child(4) { order: 2; } 
}
  • Got some practice on resizable elements and used them to make live examples of Flex
/* this is a div that surrounds the div I want to resize */
.resize-it {
  border: 3px solid rgb(0, 14, 143);
  width: 96%;
  resize: horizontal;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
  }
.resize-it .container {
  border-radius: 7px;
}
  • Saw how big a html whit html inside can become...

Continued development

I want to keep working on:

  • a
  • Work whit more JS
  • Understand better Media Queries

Useful resources

  • There's nothing here

Author

Acknowledgments

I got the idea of the resize property from a Short of Kevin Powell or WebDevSimplfied, can't remember lol

About

Code templates based on flexbox w/dynamic examples

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published