This is the second project from the Jonas Schmedtmann's Advanced CSS and Sass course. Main goal of this project was to build a responsive landing page by using the Flexbox CSS layout method.
Besides flexbox, the course covers the usage of SVG icons, BEM methodology, CSS variables, animations and transitions as well as responsive design, some handy CSS tricks and helpful online tools.
View project live at ed-c137.github.io/trillo.
Here is the list of some cool tools used throughout this course:
- Icomoon: A great library of free vector icons packs. This app allows us to generate icon fonts from icons available on website as well as from custom icons uploaded to the app.
- Cubic Bezier: A tool used to easily generate desired transition values for
cubic-bezier()function. - HTML Glyphs: A list of glyphs and their corresponding codes that can be used in HTML and CSS files.
- BEM Methodology: A CSS methodology that helps us to easier organize our CSS code and prevent headaches caused by thinking about how to name a CSS class.
- Can I Use: A tool which provides us with up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
- Tiny PNG: A tool for smart PNG and JPEG compression
- Screen To Gif: Screen, webcam and sketch-board recorder with an integrated editor
- Photopea: Free online photoshop
- Display a menu with actions when user hovers over user icon
- Display a menu with messages when user hovers over message icon
- Display a menu with bookmarks when user hovers over bookmark icon
- Display a search suggestions menu when typing in search input
- Create captions for gallery images
- Make the page 100% responsive (
< 500px) - Optimize gifs and images
- Divide components.scss to multiple files
- Create separate version of user navigation for smartphones and tablets
- Add preloader
Copyright notice: I am not offering any license! This generally means that you have no permission from the creator of the software to use, modify, or share the software.