Skip to content

Latest commit

 

History

History
68 lines (51 loc) · 2.28 KB

File metadata and controls

68 lines (51 loc) · 2.28 KB

holberton-headphones

Author Description

  • I'm a software engineering student at Holberton School, with 2 years of experience in Javascript web technologies.
  • I'm mostly confident with JavaScript (MERN Stack) and Python and I'm looking for a full time software engineering job.
  • You can reach me out on:

Project Description

  • This is a fullstack web specialization project at Holberton school.
  • The goal of this project is a implement a Figma design template in HTML and CSS only.
  • The project has no guiding instructions.
  • There are 3 different layout (desktop, tablet and mobile).
  • The template should be fully responsive.

Technologies and Concepts

  • HTML.
  • CSS.
  • Responsive design for web, tablet and mobile.

Features

  • All the required features for this project are implemented.

Challenges

  • The most challenging part is the responsive design part.
  • How to write good reusable CSS classes.
  • Creating web HTML & CSS componenets without external libraries.

Usage and Installation

  • There's no installation needed to use this project. You just have to download the zip file of the project or clone the project and open it on the browser.

Clone

git clone https://github.com/Edin93/holberton-headphones.git

Requirements

  • We must work only with pure HTML and CSS.
  • We are not allowed to import external CSS framework (like Bootstrap, MUI...).
  • We are not to use Javascript.
  • The web page has to be responsive.

Best practices to follow

  • reset CSS styling
  • use variables
  • simple/“as generic as you can” CSS selectors
  • avoid as more as you can super specific CSS selector
  • simple HTML structure - div containers are your friend!

Design informations

  • max width of the content: 1000px centered in the page
  • the web page must switch to the mobile version when the screen width is 480px or less.
  • links hover/active: #FF6565
  • button hover/active: opacity: 0.9

Screenshots

Desktop design

Desktop UI design

Tablet design

Tablet UI design

Mobile design

Mobile UI design