https://github.com/mafda/dashboard

Front-end Challenge - Responsive single page dashboard with sliding side nav in pure HTML + CSS + JS (without using any development framework/library).
https://github.com/mafda/dashboard

css css-flexbox css-grid css-grid-layout html html-css-javascript javascript

Last synced: 20 days ago
JSON representation

Front-end Challenge - Responsive single page dashboard with sliding side nav in pure HTML + CSS + JS (without using any development framework/library).

• Host: GitHub
• URL: https://github.com/mafda/dashboard
• Owner: mafda
• Created: 2020-05-27T01:04:04.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-11T17:13:08.000Z (about 6 years ago)
• Last Synced: 2025-01-17T05:09:23.178Z (over 1 year ago)
• Topics: css, css-flexbox, css-grid, css-grid-layout, html, html-css-javascript, javascript
• Language: CSS
• Homepage: http://mafda-dashboard.herokuapp.com/
• Size: 159 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dashboard 

Front-end Challenge - Responsive single page dashboard with sliding side nav in pure HTML + CSS + JS (without using any development framework/library).

## 1. Briefing

The challenge is to develop a single page on a dashboard.

It must contain at least 3 parts: 

* a header with the user ID logged in, 

* a menu, and 

* a form to create an event.

The event form must have the following fields: 

* title, 

* description, 

* location and 

* if the event lasts all day, 

  * if not, request the start and end time.

## 2. Goals

No framework should be used for development (ex: Bootstrap CSS, jQuery, React, Angular, etc.).

What will be evaluated:

- Design (color palette, grid, spacing and typography);

- Responsiveness of the page (automatically adjust to any resolution);

- Operation in the main browsers (Chrome and Firefox);

- Good practices of HTML5 and CSS3 code.

## 3. Initial sketch

![initial sketch](img/initial_sketch.png)

## 4. Final details

### Desktop (Chrome)

  

![desktop dashboard](img/desktop_dashboard.png)

### Tablet

  

![dashboard](img/tablet_dashboard.png)

### Mobile

![dashboard](img/mobile_dashboard.png)

## 5. Interactive prototype

Heroku [link](http://mafda-dashboard-mosyle.herokuapp.com/).

CodePen [link](https://codepen.io/mafda/pen/MWKyjqj).

---

made with 💙 by [mafda](https://mafda.github.io/) feat. [camiloariza](https://camiloarza.github.io/) 🤖