the html structure focus more on the css grid
What challenges did you encounter, and how did you overcome them?adjusting space within the item of the grid
What specific areas of your project would you like help with?css grid
I still didnt take a look at the code, but I think the issue is that the kira container, has alot of line-height. Try to reduce it as grid layout will fill out all other containers in order to make all containers the same height. try it and give it a shot
What I Am Most Proud Of Your code is well-structured, visually appealing, and easy to understand. Here are some highlights:
✅ Use of @font-face for local fonts – This allows for better customization and independence from external services. ✅ Clean and minimalistic design – The card layout is well-organized and aesthetically pleasing. ✅ Effective use of flexbox – The content is properly centered, and elements are aligned efficiently. ✅ Clear separation of sections – Different parts of the layout are neatly structured, making it easy to maintain. ✅ Good use of box-shadow – The subtle shadow effect adds depth and enhances the overall design.
What I Would Do Differently Next Time While the code is well-executed, there are some areas for improvement:
1️⃣ Font-weight definition in @font-face – Both fonts currently have font-weight: normal;, which could cause inconsistencies if you try to use bold text later. Defining appropriate weights would improve flexibility.
2️⃣ Improve responsiveness – The card design looks great, but adding media queries could enhance its adaptability on smaller screens.
3️⃣ Optimize CSS properties – Some styles, like font-family: 'Figtree-Medium';, are repeated multiple times. Using global styles for common elements (e.g., body or p) could reduce redundancy.
4️⃣ Use semantic HTML tags – While the current structure works, using <article> for the blog card instead of a <div> could improve accessibility and SEO.
5️⃣ Use rem instead of vh/vw for some sizes – vh and vw work well for full-screen layouts, but rem is often more scalable and consistent across different devices.
Overall, the code is already strong, and these refinements would make it even better! 🚀
What challenges did you encounter, and how did you overcome them?Challenges Faced and How They Were Overcome Developing this card layout came with some challenges, but each one was tackled effectively. Here are some key difficulties and the solutions implemented:
1️⃣ Font Loading Issues – Initially, ensuring that the custom fonts loaded correctly was a challenge. This was resolved by properly structuring the @font-face rule and confirming that the font files were correctly linked within the project directory.
2️⃣ Aligning Elements Properly with Flexbox – Achieving the right positioning for different sections, such as the avatar and text alignment, required fine-tuning. The solution was to use flexbox with align-items and justify-content to ensure a balanced and responsive layout.
3️⃣ Maintaining Visual Hierarchy – Ensuring that the heading, date, and paragraph text had the correct spacing and contrast for readability was important. Adjustments were made to font sizes, margins, and color contrast to create a visually appealing design.
4️⃣ Handling Box Shadows and Borders – The card’s shadow effect was initially too strong, making it look unnatural. By refining the box-shadow values, a softer and more realistic depth effect was achieved, enhancing the card’s modern appearance.
5️⃣ Making the Layout Scalable – Using absolute values like vh and vw posed a risk of breaking the layout on different screen sizes. To improve scalability, percentages and relative units like rem were considered to ensure better adaptability.
Through careful debugging, testing different CSS properties, and refining design choices, these challenges were successfully overcome, resulting in a polished and functional card layout. 🚀
What specific areas of your project would you like help with?Sendo sincero, estou satisfeito com o que já construí, mas vejo algumas áreas onde posso melhorar e onde gostaria de ajuda:
1️⃣ Otimização da Importação de Fontes – Eu consegui carregar as fontes externas, mas quero garantir que estou fazendo isso da forma mais eficiente possível, evitando problemas de compatibilidade e melhorando o desempenho.
2️⃣ Melhoria da Responsividade – Meu layout funciona bem em telas maiores, mas quero ter certeza de que ele se adapta perfeitamente a dispositivos menores, como smartphones. Acho que poderia usar media queries de forma mais eficiente.
3️⃣ Aprimoramento da Hierarquia Visual – Sinto que algumas partes do design, como os tamanhos de fonte e espaçamentos, poderiam ser mais bem equilibrados para melhorar a leitura e a experiência do usuário.
4️⃣ Refinamento da Sombra e Profundidade – A sombra do cartão funciona, mas quero um efeito mais suave e realista para dar um toque mais profissional ao design.
5️⃣ Uso de Unidades Relativas – Percebo que usei vh e vw em alguns lugares, mas não tenho certeza se essa é a melhor abordagem para garantir que o layout fique flexível e adaptável em diferentes dispositivos. Talvez rem ou % fossem mais adequados.
Se puder me ajudar a melhorar nesses pontos, seria incrível! 🚀
It looks very good but there are some concerns:
The entire div is considered of "div"s which makes it less semantic, try to use article, section, figure for the blog. Figure for the image, article for the text, footer or section for the profile pic area.
The <h2> HTML & CSS foundations</h2> when hovered should be the yellow color, idk if you did that on purpose but if you dont know how to do it just do that code in css: h2:hover { color: "yellow color code" }
other than that really good code and clean. Good job
I could not match the design of the lists in 'Preparation time' and 'Ingredients' in mobile view. Kindly someone assist. Chatgpt only wasted my time, and I couldn't find an article or something that shows how to position the list markers as is in the design.
in order to give space between a list and its market (bullets), you can use this code. In html I assigned a class to the "ul" as "list", in css I targeted .list li { padding-left: 13px; }. This puts some space between the list and its marker. Also I have noticed you've used alot of divs for the sections. You can use "article" instead of "div" to make your code more semantic.
None
I've looked through your code, you are using too much "div"s, this makes your html less semantic. Try to use article, aside, section, figure to make the HTML semantic and more accessible, as it is a very important element for a developer.
I'm very proud of my self for managing to finish de challenge without giving up. Finishing it made me realise that i just need to practice more to become more confident of my habilities. On the next challenge i think i want spend more time organizing my css.
What challenges did you encounter, and how did you overcome them?My biggest challenge was figuring out de width and height of the component and also discovering how i could organize my html in order for it to present the way i wanted it to be.
What specific areas of your project would you like help with?I would like to know if i wrote the css right, and if not what could i have done to make it better and more organized. And i would like know if using an article was semanticly a good ideia.
I like that you've added shadows to the card. Good job
