This is a solution to the Typemaster pre-launch landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
- Solution URL: https://www.frontendmentor.io/solutions/typemaster-landing-page-with-css-grids-layout-VRBfeKY1k
- Live Site URL: https://jaymit-typemaster.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
- img tag does not support ::Befor and ::after pesudo elements in some browser: https://lildude.co.uk/after-css-property-for-img-tag
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
THings to work on: Improve CSS Grid logic, try to make it responsive by using css grid to make it more fluid
- Graduating to Grid by Rachel Andrews - I used this link to understand Intrinsinc and Extrinisic Sizing using CSS Grids and Flexbox, helped me out a lot even in other projects I am working on.
- Layout Land - Layout Land is a youtube channel that has great content about CSS Grids and Its properties.
- Colors in Design Systems - How to organize colors in your project using Design Systems
- Typography in Design Systems - Good guide on how to manage typography.
- BEM CSS Patten - Avoiding Common Mistakes - Teaches how to use BEM that makes sense and avoids too large class names.
- Website - Jaymit Desai
- Frontend Mentor - @jaymitd
- Github - @jaymit123