Giter VIP home page Giter VIP logo

ux-challenge's Introduction

UI/UX Challenge

A developer challenge focusing around UI/UX needs. This component will focus on an applicant's technical skills with CSS and web development.

For the challenge, please fork this repository to your GitHub account and do all of your work on that fork.

The Website

The challenge here is to vet your technical skills at vanilla CSS. Therefore, your focus should remain mostly within CSS. The HTML has been written for you, and should not be modified. The only exceptions are to create containers or groupings and add HTML id or class attributes to elements to accomodate your CSS needs.

The demo for this challenge is a single, static page prepopulated with dummy content. You do not need to work in any support for dynamic content. There is no navigation to other views or pages. Just focus on making this one page responsive, well styled, clean, and fun to view. In the base directory you will find a file called index.html that defines the layout and structure of the page, along with a file located in css/style.css where your CSS should reside.

As this challenge is not meant to test your skills as a developer, you are not tasked with standing up a server for this (but if you'd like to feel free to do so as long as you supply the documentation for running that setup!). Instead, feel free to simply use a local Python SimpleHTTPServer.

Requirements

We have been approached by a client that wants to make InstaCat, the next big image sharing app, but specifically for sharing and rating cat pictures. Prior to spending developer time on the project, a minimal, unstyled HTML mockup for the site was made to present as a proof of concept to the client. Now it's your job to apply your awesome design skills by taking the mockup and making it sleek and satisfy the design requirements listed below:

Tone

The feel of this site is meant to being playful and fun. At the end of the day, the focus is on the content itself, so while the layout and design should be light-hearted and cheery, we do not want it to be so overpowering that it becomes more attentive than the cat photos being shared.

Audience

Cat owners and cat lovers will be visiting this site. These people can range from the single cat owner to a cat horder, so personality types will vary. However, you can count on all of them being passionate about their furry friends. They want an experience on this site that rewarding and encourages them to visit on a consistent basis.

(Specifically for this challenge, design it from the perspective of an anonymous visitor to the page, who can only view the content. This removes any urge to create dynamic content!)

Purpose

Finally, the absolute critical purpose behind this site is to entertain and be fun. This means an interface that is easy to navigate and incredibly responsive.

Hints

Consider looking at CSS3 and Flexbox for your styling needs!

ux-challenge's People

Contributors

bsboiko avatar klufkin avatar milt avatar

Watchers

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