What are you most proud of, and what would you do differently next time?
I am proud of my use of grid, it was my first time and I think I did pretty well. However, next time I hope to get better at using grid because it's still messy.
What challenges did you encounter, and how did you overcome them?
I had trouble positioning the 4 cards as I wanted, and I also had trouble reproducing the shadows of the cards exactly as they appear on the design. I solved the positioning problem by experimenting with my code and rereading a course on css grid.
What specific areas of your project would you like help with?
I would like help mainly with grid, but also with the quality of my code. Generally speaking, I would not say no to any help to improve.
Hi! in the case of the shadows, i think "box-shadow: 0px 5px 15px rgb(0 0 0 / 10%);" would look much closer to the shadows in the final design. making the shadows lighter in this case so isn't too dark. Also, you can use tools like boxshadow cssmatic. Hope this helps.
Qué onda Adrián, muy buena solución!
Un consejo a la hora de importar y establecer fonts:
Siempre coloca un fallback, de ésta forma, si por alguna razón no se puede cargar la fuente, el navegador cargará otra de respaldo. Trasladando eso a tu código, en lugar de: font-family: "Outfit"; --> font-family: "Outfit", sans-serif (puedes colocar tantas de respaldo como quieras, pero es recomendable que la lista termine con una fuente por default como sans-serif, por ejemplo.)
Siempre que puedas usa link en lugar de import. En tu solución usaste import para importar la fuente. Y si bien en éste caso no afecta demasiado, acostúmbrate a usar link para enlazar recursos siempre que se pueda en lugar de import. Esto es así porque al enlazar recursos con link, el navegador puede descargar los recursos de manera simultánea, al contrario de import que lo hace de manera secuencial, y esto supone una pérdida de rendimiento.
Te recomiendo éste artículo para entenderlo más a fondo: avoid css import
Suerte, y éxitos en futuras soluciones y proyectos! 👋
What are you most proud of, and what would you do differently next time?
The design is somewhat clumsily patched. I would like to find a way to make it easily modifiable and correctable.
What challenges did you encounter, and how did you overcome them?
I initially encountered an issue with the font size and spacing when switching between mobile and desktop designs. It resolved itself when I switched from absolute units to relative units.
What specific areas of your project would you like help with?
How can I enhance the quality and readability of my code?
Hey! I think your solution to this challenge it's great! Even helped me to analyze my code even more. The only thing i noticed was that you used some <h3> in text like "Total:", "Preparation:", "Cooking:", "Beat the eggs:", etc. When you can use a <strong> tag to point out that the text is important without using a header tag and get the same visual results.
What are you most proud of, and what would you do differently next time?
I'm pleased with the overall outcome, but I'd focus more on refining font sizes and component layouts for better consistency. Additionally, I recognize the need to enhance accessibility for improved user experience.
What challenges did you encounter, and how did you overcome them?
I initially struggled with getting started and setting appropriate font sizes. Fortunately, I sought guidance from discussions on Discord and stumbled upon a helpful blog post by Grace Snow, which provided me with the insights needed to overcome these hurdles.
What specific areas of your project would you like help with?
Simplification of HTML and CSS: I'm wondering if there are further opportunities to streamline my code. Any suggestions on areas where I could reduce complexity would be greatly appreciated.
Accessibility and Semantic HTML: Are there additional HTML tags I could have utilized to enhance accessibility and improve the semantic structure of my code? Any specific recommendations in this regard would be helpful.
Font and Div Sizing: I'm unsure about the sizing of fonts and the overall div. Can you point out where I might have made errors in these aspects and offer guidance on how to correct them for better design consistency?
Hi! The result looks good in general, that's a great job! The font weight of the h2 should be a little bit higher in order to be more bold, but even with that, your card looks great!
Talking about the areas you want help:
If you want to write semantic code, keep in mind tags like section, header, footer, main, etc. For example, in your HTML, instead of using a <div> inside the <main>, you could use a <section> tag to do the same job. Also, you can put the <img> inside a <figure>
Talking about simplify your code. In your CSS there are a lot of rules for tags that aren't even in your code, so your basically applying properties to non-existing elements. Less is more, so if you can get the results you want with the minimum amount of lines of code, much better.
I recommend you to search for semantic html tags and accessibility practices in webs like MDN and W3schools. Hope this helps you, and keep going 👋
Your card looks great! The only thing i notice was the size. On my mini laptop (1024x600) i had to zoom out to 50% to can view the full card without scrolling! Reducing the padding and sizes would help in the case of smaller screens. I'm not an expert, but your code looks good to me, and even learn a few things of it!
Hey! That's a great start. Glad you decided to start learning Web Development Adeniyi! I'm not an expert, but after review your code i'd like to give you a couple tips that help me to code and to keep in mind:
Write CSS in a separate file: It's quiet common to write a few CSS styles in the HTML element while learning our first steps in HTML, but it's highly recommended to start writing your CSS rules in a separate stylesheet instead of the HTML document itself. More organize and easy to read especially in projects with a significative amount of lines of code.
Get used to write semantic code: It's important to give our content a semantic meaning, not just for good practices, but for accesibility too. Try to deconstructure your projects in smaller pieces, and start to section every part you think necessary to build you solution. In this case, think about the card: It has a header? A footer? What it's the semantic structure of this card? There's no one "correct" way to define a semantic structure, but a good semantic structure has to make senses to every developer who review your code!
Talking about fear: Everybody had the same feeling at the beginning, and it's ok! Trying to learn something new can be hard, stressful, but at the same time rewarding and joyful! Just keep in mind that you're not going to know everything, but you need to be willing to learn as much as you can about this world :)
Here are some sources that i'm currently using to learn and hope it helps you too:
I like your solution. One of the things i'd say will make this solution even better would be semantic HTML, instead of using just divs, it's better use tags like <section>, <footer>, <header> to create a meaningful and more accesible code.
I recommend you to check out this source: https://www.w3schools.com/html/html5_semantic_elements.asp and try to structure old (or make new projects) using mostly semantic HTML elements.
The solution in general looks good to me! The only thing i noticed is the font-size of the h1 it's a little bit smaller than the one on the design. It was my first time using Figma, and this video helped me a little bit to explore the UI and understand the basic to work with figma files, hope it helps you too!:
Figma Tutorial: A Crash Course For Beginners
