Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions28Comments7

All comments

  • P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi developercris7, Great job on completing this challenge !

    Here are my feedback about your project:

    1. I'd suggest writing and adding a README file on your project. It's a good practice to include a README in all your project because it serves as the gateway to your project and offering essential information. This practice explaining what you mean clearly and having a reference for yourself and others, If you want to know more about the benefits of writing a good challenge README check out this article by Vanza Setia

    2. I'd suggest to update the bg-pattern quotation on your first section to a background-property, It's because the quotation is purely a decorative images that do not convey essential content. This helps separate content from presentation and keeps your HTML cleaner.

    3. Try practicing use of REM and EM to your project this will make your project more flexibility, scalability, and accessibility, becuase REM and EM depend on the used font-size of the user.

    **HAPPY CODING 🧑‍💻 ! CODE UP ☕☕!

    0
  • jaiden-lee• 40

    @jaiden-lee

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am most proud of actually getting the four card system to work properly. This was the first time that I had used CSS grid successfully.

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

    I struggled with the position of the image. I struggled with getting the image to align with the bottom. Normally, in the mobile layout, since it was vertical, the height was determined completely by the content/where the image was, so the image was at the bottom. However, when I used a media query and changed the grid layout, the heights of all the cards were equal, rather than auto. So, to make everything at the bottom, I used margin-top: auto.

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

    There isn't anything I would like help in.

    Four Card Feature Section Layout

    2

    P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi Jaiden Lee, Great job on completing this challenge!

    Here are my feedbacks to your challenge:

    1. It's not a good practice to have two <h1></h1> tag element in your HTML, I'd suggest making the other heading a <h2></h2>

    2. If your struggling on positioning the image, I'd suggest wrap the image in the div element, set a align-self property with a value of flex-end to the div selector.

    3. Try using rem or em for your max-width and media-query. This will improve responsiveness of the page because rem and em are relative units they scale with the user's font size settings.

    4. I'd suggest to remove the property text-align in your .site-container and move it to each content that you want to have the text centered. Setting a text-align: center in the parent div will cause everything to be centered. That's the reason that the text in your card are also centered.

    ** HAPPY CODING 🧑‍💻🧑‍💻 CODE UP ☕☕☕**

    0
  • Duy Anh Le• 120

    @leanhduy

    Submitted

    What are you most proud of, and what would you do differently next time?

    In the next update, I would try to write styles using a pre-processor (Sass)

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

    Challenges

    1. The difference of element position between mobile (image on top of content) vs desktop (side by side) Overcame by using a wrapper div and applying display:flex in the desktop mode
    2. Conditional loading different size of image for different screen size by using html only. Overcame by self-research and found out the `` tag.

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

    Nothing for now.

    Product Preview card with HTML, CSS only

    1

    P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi Duy Anh Le, Good job on doing this challenge 🙌🙌🙌

    These are my suggestions to your project:

    • I'd like to suggest, creating a README.md for your project. Even though this is a small project writing README on every project will set your awareness as a developer if the project has a README file. This is important because README communicate important information about a project. Check out this article to learn more about README Check out this article to learn the benefits of writing a good README

    • Try also refactoring your HTML code to semantic HTML. Writing Semantic HTML will improve your websites Accessibility, SEO, Readability Check out this article to learn Semantic HTML and it's importance for accessibility

    • It is also not a good practice to have two <h1></h1> tag element in your code. I'd suggest to update <h1></h1> tag element of the discount price to <p></p> tag element, you can create a label for both prices and then set the class of the labels to visually-hidden this will hide the labels on the UI but when a screen reader reads your this website it will mention the price labels, Here is a sample code

    <div class="product-price">
      <div class="product-price__discount-container">
           <span class="visually-hidden">Discounted Price</span>
            <p class="product-price__discounted">
                $149.99
             </p>
         </div>
        <div class="product-price__original-container">
           <span class="visually-hidden">Original Price</span>
            <p class="product-price__original
             price">
                $169.99
            </p>
       </div>
</div>

    If you want to learn more about visually hidden, try checking out this article

    • Try also setting a reset for your CSS this will remove inconsistent margins, paddings, line-heights and other attributes that can cause your web pages to look differently across various browsers Check out this article if you want to learn more about CSS reset

    • If you want to center your card, You can set a min-height property to your body selector with a 100vh value and set a display property with a value of flex then center everything out. I'd suggest resetting your CSS first before doing this.

    I like the card-links to your different challenges ! !

    CODE UP 🧑‍💻🧑‍💻!*

    Marked as helpful

    1
  • P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi Joaquín Zúñiga, Great job on doing this challenge

    I would like to suggest some tips in here:

    • Try using Semantic HTML for your HTML code. You can try inspecting this website using your chrome dev tools for your HTML reference website to be inspect. This will help search engine and other user devices to determine the importance and context of your website.

    • Try a mobile-first approach for this challenge. It will amaze you how easy to style at mobile-first approach

    • For more spacing, I suggest put a padding-inline in each section and set the value to your desire choice.

    • Your value for the font-family in the body selector will not work because you didn't set any font links in your HTML code. These are the fonts to be use for this challenge Young Serif and Outfit

    • For your README, I recommend writing more information in your README try looking at the README-template.md when you first unzip the challenge to give you an idea. If you like to learn the benefits of writing a good README try looking at this article.

    CODE UP 🤲🤲🤲 !

    Marked as helpful

    0
  • P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi Ronx28 ,Great job on this challenge

    • If you want you can set a reset css to your stylesheet this will normalize the default styles and behaviors of HTML elements across different web browsers. Try checking out this articles CSS Tools: Reset CSS and Modern CSS reset by Josh Comeau

    • I'd like to suggest that your HTML code could be improved by refactoring it to a semantic HTML, It's a good practice to always consider using Semantic HTML in your projects because its help the search engines and other user devices to determine the importance and context of web pages. This will make it more easier to read, greater accessibility and better user experience. If you want to learn more about semantic HTML elements you can check this article out

    • I'd like to suggest taking another look at the responsiveness of your project. Currently, it looks good in the desktop layout, but in the mobile size or if you make the size smaller the card's content is overflowing. You might want to use rems, em for this and you might to remove the height in your container. If you want to learn more about best practices for size units in CSS you can check this article out

    • This code <a href=""><div class="tombol">Frontend Mentor</div></a> could be improved by removing the div element and moving the class to the anchor element it will look like this <a href="" class="tombol">Frontend Mentor</a>. if you are worrying the width and height will not work you can set the value of the display property to block.

    • If you want to have a font to be like in the provided design you can put a font-family to the body selector and set it's value to "Inter", sans-serif.

    • If you want to implement the active state you can set a a:hover then put a background-color and color property to the specific requirement. You can check this out on styling the links or anchor element.

    • I'd suggest also updating README-template.md this will provide more information about your project

    **Overall you did great on completing this challenge, Let me know if you have questions. CODE UP 🙌 🙌 🙌 ! ! ! **

    Marked as helpful

    1
  • David• 60

    @Dav1dGP

    Submitted

    What are you most proud of, and what would you do differently next time?

    What I am most proud of is the time and ease of doing this project.

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

    As with the QR project, the biggest challenge has been to center the container and make it responsive.

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

    Tips related to responsive are welcome.

    BLOG-PREVIEW-CARD with HTML and CSS

    3

    P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi David,

    Nice job on completing this challenge !!

    Suggestions to your CSS.

    • Remove the text-align: justify in the body element and text-align: center in the h1 element.
    • Try using a CSS reset you can read more about in this link: https://www.joshwcomeau.com/css/custom-css-reset/
    • Consider using max-width for more fluid container you can this link : https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
    • If you want to know more about the max-width and width you can read this article out: https://css-tricks.com/tale-width-max-width/

    For accessibility:

    • For the alt of the image, try more descriptive for the image, for example the avatar you can use Profile of Greg Hopper.

    so far you did great on completing this challenge

    CODE UP !

    Marked as helpful

    1
  • P
    Ralph Virtucio• 500

    @ralphvirtucio

    Posted

    Hi manav-sharma69,

    Good job on completing this challenge !

    For your 3 moderate level warnings, I'd suggest refactor your HTML code to a semantic HTML this will make your website more accessible to different users !

    Try checking out this article of MDN about Semantic HTML: https://developer.mozilla.org/en-US/curriculum/core/semantic-html/

    CODE UP !

    Marked as helpful

    1