Skip to content
OverviewSolutions
3
Comments
6
João Rodrigues
@joaotfrodrigues

All comments

  • chelsea-here•160
    @chelsea-hereSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of getting the font percentage decrease to work, while maintaining accessibility using rem's for font-size. Also, proud of using javascript to access the color variable from css and script hover color change effect.

    // accessing the color variables from my css file
const style = getComputedStyle(document.body);
const yellow = style.getPropertyValue("--primary-color-yellow");

// creating mouseover effect
title.addEventListener("mouseover", function (e) {
  this.style.color = yellow;
});

// now i need a mouseout event listener so its only active during my hover
title.addEventListener("mouseout", function (e) {
  this.style.color = "";
});
    What challenges did you encounter, and how did you overcome them?

    Getting the font to work was the hardest part. I learned how to use clamp to achieve the desired effect.

    h1 {
  font-size: clamp(1rem, 5.333333vw, 1.5rem);
}
    What specific areas of your project would you like help with?

    Any best practice advice is welcome!

    Responsive Preview Card using HTML, CSS, and Javascript

    2
    João Rodrigues•70
    @joaotfrodriguesPosted 4 months ago

    Hi Chelsea,

    First of all, great job on your project! I loved the use of the CSS clamp property, it adds a nice touch to the responsiveness of your design.

    Now, the HTML semantic structure needs some changes. The card content should not be directly inside the <main> tag, but instead wrapped in an <article> tag within the <main>.

    Inside the <article> tag, you could have a <header>, <section>, and <footer>. The <header> would be for the image, the <section> for the content, and the <footer> for the author details.

    Regarding the hover animation, it's best practice to use the CSS pseudo-class :hover for styling hover effects.

    Overall, you’re doing a fantastic job! Keep up the great work and consider these adjustments to further enhance your project.

    Best regards,
    João Rodrigues

    0
  • Abdirahim Ali Mahamoud•380
    @asad102Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am waiting feedback of the developer to rate my project

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

    sizing is the challenge

    blog preview card

    1
    João Rodrigues•70
    @joaotfrodriguesPosted 4 months ago

    Hi Abdirahim,

    First of all, great job on your project! I loved the use of Tailwind CSS, it makes your design clean and efficient.

    Your use of semantic HTML is excellent. However, instead of giving classes directly to the <body> tag, I would suggest creating a <main> element for better structure and organization.

    In the <article>, I would recommend creating a <header> for the image and a <footer> for the author details. This will improve the semantic structure of your content.

    One area that I think needs some change is the proportions. Since the challenge is FREE+, you can use the free Figma file to get the correct dimensions and ensure everything is well-proportioned.

    Overall, you’re doing a fantastic job! Keep up the great work and consider these adjustments to further enhance your project.

    Best regards,
    João Rodrigues

    Marked as helpful
    1
  • João Rodrigues•70
    @joaotfrodriguesPosted 4 months ago

    Hi Shine,

    First of all, great job on your project! I loved the animation that you added to the avatar image. It adds a nice touch to the overall design.

    Your use of semantic HTML is excellent. However, I would suggest putting the <ul> inside a <nav> element since it represents a navigation menu. Also, the <main> is not supposed to be a card container. Instead, you should wrap all the card children inside a <section> element within the <main>.

    The colors aren't matching the design. Try using a color picker to get the correct colors from the design image to ensure consistency.

    Additionally, the padding of the card needs to be bigger to make the content more readable and visually appealing.

    Lastly, avoid using `

    0
  • Zeref1028•10
    @Zeref1028Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    I have a little knowledge of media queries thats why im having a problem in that part where the container is not at the center eventhough i used, display: flex; justify-content: center; align-items: center; Although I wanted it to work with this code but it wont budge thats why I tried a different solution which is margin-top.

    Mobile-first solution using CSS Grid and Flexbox

    3
    João Rodrigues•70
    @joaotfrodriguesPosted 4 months ago

    Hi @Zeref1028,

    Great job on your project! I noticed you had some challenges, especially with media queries and centering your container. Here’s a detailed response to your question:

    The issue you encountered is because the body element doesn’t have a defined height. It currently has height: auto;, which means its height is determined by its content.

    Solution: You can improve this by adding min-height: 100vh; to the container. This ensures that the body takes at least the full height of the viewport, which will allow flexbox centering to work as intended.

    Always use min-height instead of setting a fixed height for responsive purposes.

    Additionally, here are a few points for further improvement:

    • Figma File: This project is a FREE+, so you get a Figma file for free. Use it to ensure your measurements are accurate.
    • Semantic HTML: Start using semantic HTML elements instead of just divs. Try to use: header, footer, main, section, article, etc. This improves accessibility and makes your code more readable.
    • Reset.css: Start using a reset.css file. This helps to normalize styles across different browsers, ensuring a more consistent look and reducing the need for extensive CSS resets within your main stylesheet.

    By addressing these points, you’ll enhance both the functionality and maintainability of your project.

    Best regards, João Rodrigues

    0
  • Ahmed Abu Qahf•130
    @ahmedsomaaSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of trying out @property, @media for a responsive screen and developing for mobile-first.

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

    Making the website responsive, need to do more practice on this topic.

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

    Responsive web-site design.

    Responsive Blog Preview Card Solution using CSS Flexbox & BEM

    1
    João Rodrigues•70
    @joaotfrodriguesPosted 4 months ago

    Hi @ahmedsomaa,

    I'm really impressed with how you've applied BEM methodology to your class naming. It's clean and organized, making the code very readable and maintainable.

    However, I noticed a couple of areas where some adjustments could be beneficial:

    • The line-height of your text blocks seems a bit tight, which makes the lines appear crowded. Consider increasing it slightly to improve readability.
    • Also, the shadow size seems a little big, and does not have the transition. which can be with hover.

    In terms of your code structure, it would be great to start incorporating more semantic HTML elements. Instead of relying heavily on div elements, try using header, footer, section, article, etc... This will not only improve accessibility but also help in better understanding the content structure.

    Additionally, consider optimizing your CSS file by minifying it before import. This will improve loading times and overall performance.

    Lastly, having a reset.css file included can significantly ease cross-browser inconsistencies. It's a good practice to include one in your projects.

    Overall, great job on your project! These adjustments will further enhance the quality and maintainability of your codebase.

    Best regards, João Rodrigues

    Marked as helpful
    0
  • João Rodrigues•70
    @joaotfrodriguesPosted 4 months ago

    Hi @deyorz,

    Great job on your project! I have a few suggestions to improve accessibility and responsiveness:

    • Accessibility: Avoid using px for font-size. Instead, use relative units like em or rem to enhance accessibility.

    • Responsive Design: Instead of height: 100vh in the .container, use min-height: 100vh. This ensures better responsiveness on smaller devices.

    • Semantic HTML: To improve accessibility, consider using semantic HTML elements such as <main>, <section>, <article>, and others instead of relying solely on <div> elements.

    Hope this helps!

    Best, João Rodrigues

    0