Giter VIP home page Giter VIP logo

ui-ii-flexbox's Introduction

User Interface Project II: Great Idea Web Page With Flexbox

Now that you have experienced building a layout using inline-block. Lets revisit the same HTML structure and refactor our first page with flexbox. If you didn't finish yesterday's assignment, just start from scratch.

Once you have finished the home page using flexbox, go build the services page based on the design file provided to you. This time you will need to structure your own HTML in addition to using flexbox. You have been provided all the necessary images in the img folder.

Useful Resource: CSS Tricks Flexbox Guide

Objectives:

  • Refactor the home page with flexbox where inline was used before
  • Link the services navigation item out to the services.html page
  • Make the Great Idea logo clickable and point it back to the index.html page
  • Using the provided design file, create the services page layout using flexbox and all your box model skills you have been practicing with!
  • Try to make your styles match the design as closely as you can

Stretch Goal:

  • Create another page based on one of the navigation items in addition to services. Try to create a layout that follows the patterns of the first two designs but with your own creative twist. Use lorem ipsum text for all your content.

To Get Started

  • Fork / Clone this project into a directory on your machine.
  • Pull up the code into your preffered text editor.
  • Start coding!

ui-ii-flexbox's People

Contributors

bigknell 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.