@asbhogal
Posted
Hi Kanishka,
Great work! In answer to your question, flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)
Also I've had a look at your code and semantically you could change this to just have the child elements as div and img inside the main tag, you don't necessarily need the article as this serves a different purpose Link
Another thing - make sure to always locally host your fonts for privacy and performance reasons. Here's another good video which shows how to practically do this Link You can also download your typeface using Fontsource npm packages, then import the weights you require and reference them in your elements. Super easy and convenient Link
Hope this helps!
Marked as helpful
@kanishkasubash
Posted
Hi Aman,
Seems very helpful, will definitely check it out. Thanks a lot.
@kanishkasubash
Posted
When I consider self-hosting fonts, I made some changes to my source code bellow.
$fonts: (
"OutfitRegular": "../assets/fonts/Outfit-Regular",
"OutfitBold": "../assets/fonts/Outfit-Bold"
);
@mixin font($font-family, $font-file, $font-weight) {
@font-face {
font-family: $font-family;
font-weight: $font-weight;
font-style: normal;
src: url(map-get($fonts, $font-file) + '.woff') format('woff'),
url(map-get($fonts, $font-file) + '.woff2') format('woff2');
}
}
@include font('Outfit', OutfitRegular, 400);
@include font('Outfit', OutfitBold, 700);
:root {
--font-outfit: 'Outfit', sans-serif;
}
p {
font-family: var(--font-outfit);
font-size: 1rem;
font-weight: 400;
}
