Git Product home page Git Product logo

extra-flexing's Introduction

EXTRA-FLEXING

A challenge for students looking to push their flexbox skills or try their hand at CSS Grid.

Check assets/design-files for the page that we are looking to mimic.

Notice the gradient header. May want to look up gradients for background images...
There's some text there, might I suggest https://hipsum.co to get some humerous filler text. Come up with your own header.

You can find some images in assets/images. Notice the images are all different sizes but the widths are uniform and the heights maintain the aspect ratio. Hmmmmm..... https://www.w3schools.com/css/css3_images.asp
Feel free to use flex box or grid... grid you say? https://css-tricks.com/snippets/css/complete-guide-grid/
If you choose to use flexbox consider columns over rows.

A row of buttons and one is selected. I will suggest to style all the buttons like the unselected. And then add a class "selected" to the first one and style that class to make it look different. Check stretches after that.

STRETCHES

Add more photos, you can get them from https://unsplash.com

Can you make those buttons work? Like click a different one and move the "selected" class to it and take it off the last one? This is not an easy task, it will require some Javascript you have not seen at Lambda yet https://stackoverflow.com/questions/32979044/move-class-between-elements-with-pure-javascript-without-using-jquery

Have fun, what other features can you add? Can you click that picture and make it bigger in a modal? Click the picture and have it take you to it's image URL? Style it better? Go for it!

extra-flexing's People

Contributors

joe-alfaro avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.