Code Monkey home page Code Monkey logo

ga-journal's Introduction

My GA Journey

You have decided to pen down your amazing journey with GA, from the start to graduation. There's just one problem - your diary is not exactly the nicest looking at this point!

Don't worry, you're going to fix this.

The contents for the diary are provided for you in index.html. Your goal is to fix the CSS in styles.css with media queries to make the page nice and responsive.

The end results should look like these (or as close as possible): gallery

Deliverables

1. The main view for laptop:

  • All 3 posts are aligned in 3 columns on the same row.

2. The responsive view for tablet (eg. breakpoint at 1024px)

  • All posts are aligned in 1 column.
  • The latest post should be displayed on the top.
  • The first and second posts are divided into 2 sub-columns on the second row.

3. Mobile (eg. breakpoint at 667px)

  • All posts are aligned in 1 column.
  • The latest post should be displayed on the top.
  • The second post should be displayed in the middle.
  • the first post should be displayed at the bottom.

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.