In this project, we implemented from scratch, without any library, a web page based on a design model given on Figma
Have a fully functional web page that looks the same as the designer file.
In this project:
- We used all HTML/CSS/Accessibility/Responsive design knowledges that we have learned previously.
- No instructions. We are free to implement it the way we want.
- The web page must be responsive in order to target: Desktop, Tablet and Mobile users
- We are not allowed to import any external CSS framework (like bootstrap)
- We are not allowed to use Javascript
- reset CSS styling: Normalize your CSS file using necolas’ normalize.css with this version
- 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!
- build a web page from outside to inside and from top to bottom.
- 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
Atef Mechken : LinkedIn | GitHub | Twitter
Since my early years, I have been pretty active in social activity such as my 2 years as a member of Electronic Tunisian Legends one of the more popular organisation in media and vidéo game community in Tunisia. Also my experience as a Co-Marketing Manager in Hult Prize University of Souse helped me a lot enlarging my knowledge in the marketing field, combined with my computer skills I managed to be the winner team of the Hult Prize 2019 local competition and qualified me to reach the regional of that year.