Skip to content
OverviewSolutions
13
Comments
9

6xg0d

@6xg0dMy laptop:)210 points

Learning to code for fun, even when sometimes it's more stress than fun :)

I’m currently learning...

HTML, CSS

Latest solutions

View more solutions

Latest comments

  • shadazls•200
    @shadazls
    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.

    Four card feature section

    1
    6xg0d•210
    @6xg0d

    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.

  • 6xg0d•210
    @6xg0d

    Qué onda Adrián, muy buena solución! Un consejo a la hora de importar y establecer fonts:

    1. 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.)

    2. 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! 👋

    Marked as helpful
  • 6xg0d•210
    @6xg0d

    Looks great! Only thing i can say about the design it's the size, in a 1024x600 resolution you have to zoom out to see the whole card due to height.

  • amina-refik•80
    @amina-refik
    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?

    a responsive recipe card

    1
    6xg0d•210
    @6xg0d

    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.

  • AbdulHaseebHussainRI•20
    @AbdulHaseebHussainRI
    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?

    QR code component solution

    3
    6xg0d•210
    @6xg0d

    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:

    1. 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>

    2. 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 👋

  • Victor Feitosa Garcia•230
    @VFGarciaDev
    What are you most proud of, and what would you do differently next time?

    I'm proud of how quick i could do it

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    anything that can improve my coding

    Profile card - using CSS Flexbox/Grid & Responsive

    1
    6xg0d•210
    @6xg0d

    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!

    Marked as helpful
View more comments