Git Product home page Git Product logo

lab-html-css-flex-layout's Introduction

Image description

ProGrad Lab | Html & CSS Flex Layout

Learning Goals

In this exercise, the goal is to apply as many as possible of the concepts you've just learned:

  • when and how to use different HTML tags,
  • how to structure HTML page and add the content to it using block and inline elements,
  • how to use flexbox to position elements on the page and
  • how to style the page.

Getting started

  1. Fork this repo
  2. Clone this repo

Whenever you create a first significant change, you should make your first commit.

  1. Follow these guidelines to add, commit and push changes.

In the end of this document, you will find guidelines on how to submit the exercise.

Keep in mind that you don't have to wait to fully finish the exercise to make a pull request. You only have to make a pull request once. After that, every time when you make a commit, it will be automatically added and shown in the pull request.

Instructions

The starter-code contains all the files, images, and text content needed to create the scoreboard. The text is in the index.html, and a css file is created in style.css. Font to be used should be Nunito Sans. Remember to follow the best practices.

Introduction

In this exercise, you will create a flex layout. Our goal is to get as close as this. You already have all the assets for this version in the images folder as well as the necessary text in the index.html. Our goal is to get as close as possible to this: Image description

Progression 1: Where is my head

Your task in this iteration is to create a header.

  • Make the text center justified.
  • use flex to design the layout.

Progression 2: Design Design Design

Your task in this iteration is create the aside bar and article as per the expected output.

  • Use lorem ipsum to generate the paragraph.
  • Use aside and article tag
  • use flex to design the layout.

Progression 3: Where is my foot

Your task in this iteration is to create a footer.

  • use flex to design the layout.

Happy Coding ❤️

lab-html-css-flex-layout's People

Contributors

prograd-org avatar

Watchers

James Cloos 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.