This project implements a design from scratch using HTML and pure CSS. It duplicates the visual design of a fully functional website that can be seen as a Figma designer file here.
The project_docs/ folder contains all documentation describing my goals, results, and thoughts on the project. Check out an overview of the final project including screenshots and my review here. This was a school project with a specific structure. I've outlined it here but 101-index.html contains all of the code from the previous tasks and would be the ideal entry point.
Full desktop, tablet, and mobile examples are shown here:
A detailed look at desktop is shown here:
A detailed look at mobile is shown here:
Clone the repository into your system with the command:
git clone git@github.com:RLewis11769/holberton-headphones.git
Choose an HTML file. I recommend 101-index.html! Install "Live Server" or another server preview extension, run it, and navigate to the open port.
"Holberton Headphones" is now ready to view!
- You won’t have a lot of instruction, so you are free to implement it the way that you want. The objective is simple: Create a fully functional web page that looks the same as the designer file.
- You are not allowed to import external CSS framework (like Bootstrap)
- You are not allowed to use Javascript.
- The web page must switch to the mobile version when the screen width is 480px or less.
- Personally, I always start to build a web page from outside to inside and from top to bottom. You can try another way - but you should structure in a way so you can implement a component and not get lost with HTML tags
- Reset CSS styling (aka normalize)
- Use variables
- Use simple/generic CSS selectors. Avoid using super specific CSS selectors as much as possible
- Use a simple HTML structure - div containers are your friend!
- If your computer has missing fonts, you can find them here: source-sans-pro and Spin-Cycle-OT
- An attempt was made at accessability. No axe Dev Tools issues except "Elements must have sufficient color contrast" which is a design element I have no control over.
- Pentagons in the "results" section were drawn as an svg image rather than using the png image provided.
- Navigation menu links work to navigate to different sections of page. Social media links do not work.
- I personally think it's very cleanly written and laid out :)
- These webpages look best at widths of 1000px+, 767px, and 480px as shown in the Figma designer file.
- Heights of sections are hard-coded and do not adjust based on elements within, especially when based on overflow.
- Elements in "what we do" and "results" sections should be on a grid that adjusts 1x4, then 2x2, then 4x1. Instead, it is on a flex-wrap that causes elements to overflow onto the next line. At 767px as shown in the Figma designer file, instead of a 2x2 grid, elements are shown 3 across, then 1. This adjusts differently for the "what we do" and "results" sections. I just cannot get it to work.
- The background of the "results" section does not match exactly in either tablet or mobile views.
- Some elements are not perfectly centered.
- Some elements do not have proper spacing between.
- Social media icons do not contain links although technically I was not asked to add them.
- I did not find anywhere else to use the Spin-Cycle-OT font besides where it already exists embedded in the logo image.
- I only implemented the designs I noticed. It is possible small details were overlooked.
This webpage was designed by Nicolas Philippot, UI/UX designer. This HTML/CSS replica was implemented by Rachel Lewis.