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

All comments

  • deezjason• 20

    @deezjason

    Submitted

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

    I was able to fulfill the main part of the code without too much issue

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

    I couldn't figure out how to add the background image properly so that it fitted on the page

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

    I would like some guidance on how to properly place an svg image as a background of the code without it affecting the entire code

    Music app Summary page

    1

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hi deezjason, good job on completing the challenge 🎉

    To address your question about the background image, the issue here is that you didn't actually set the pattern background image as your page's background. Instead of creating a separate div for it, you can set it as your body's background. Check out this resource to learn more ☺️

    Other quick feedback —

    • You should practice incorporating HTML landmarks (main, footer) in your code to make sure that your webpage is accessible; check out this resource for HTML landmarks
    • You are using a lot of divs in this solution — it is good practice to use the appropriate semantic HTML tags instead (note that div tags do not convey any meaning about the content that's inside of it)
    • Practice using responsive units for your CSS properties instead of using px for everything

    I hope you found these feedback to be helpful! There are more HTML and CSS best practices that I'm sure you'll learn as you do more challenges — happy coding!

    Marked as helpful

    1
  • P
    Srishti Chaudhary• 110

    @itsmesrishti

    Submitted

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

    Completing the project.

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

    I found using calc(rem + vw) with clamp challenging. Like what would be the apt value for the calc was a bit tricky to figure out. I just went with instict then and just played around with diff values until i liked the font size on the 320px mobile and 1440px desktop screens.

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

    Whether my use of picture element was correct or I should have used srcset. And any help with fluid typography or any other areas of the project.

    I would also like help with google fonts. Earlier they used to have a feature where you could download only font weight that you need now it seems like you have to download the whole family even though you might need only 2-3 font weights. How can I choose the specific font weights only?

    Product Preview Card

    1

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey Srishti, good job on completing the challenge!

    To address your last question about the font weights, you're going to have to replace some parts of your base URL — after the font family name, you will have to use wght (axis property for weight) and then use '@' afterward, followed by your preferred font weights (separated by semi-colon) like so ⬇️

    (for example you want Fraunces in 400 and 600, and Monsterrat in 300 and 700)

    <link
      href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600&family=Montserrat:wght@300;700&display=swap"
      rel="stylesheet"
    />

    They also explained this and more in their API docs ☺️

    1
  • P
    Margaux• 120

    @margaux-works

    Submitted

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

    coding the blog preview card in mobile first

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

    There is an unwanted marge between the .illustration image and the .card-container that I could not manage to understand where it comes from and how to get rid of it.

    Note that I have used CSS reset (normalize.css).

    According to the design, there should only be 24px between both elements, but right now there are 24px (margin set-up on class .content) + an additional 10px (unsure where they come from).

    Any idea why there is this extra space?

    Blog Preview Card

    2

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey, Margaux 👋 It could be from the gap property in your card container. Lmk if that helped!

    Marked as helpful

    0
  • zhansayatazhibayeva• 280

    @zhansayatazhibayeva

    Submitted

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

    Learned overflow:hidden feature why we needed it)

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

    Image borders)

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

    Any feedback would be helpful

    Responsive order summary component

    1

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hi there! Congratulations on completing the challenge 🎉

    Unfortunately, the size of the background image during the desktop view does not fit the viewport, you may want to add a background-size property in order to fix this.

    0
  • Kaustubhya Shukla• 50

    @kaustubhya

    Submitted

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

    Responsiveness

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

    Was not able to tackle the image overlay effect.

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

    Ideas on how to build on top from this??

    NFT CardComponent by KSD (HTML, CSS only)

    2

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey Kaustubhya, good job on completing the challenge 🎉

    For your future projects, it would be good practice to incorporate semantic HTML such as the header, main, and footer elements to your solution to improve its accessibility ☺️ I found this read/resource to be helpful in learning more about this topic!

    Lastly, don't forget to add a title to your solution! ☺️

    0
  • khabunny• 40

    @khabunny

    Submitted

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

    This website is a simple css, html combined application , where i was created a social linking profile card of a woman.

    feedbacks are welcomed.

    social - link profile card using flex

    2

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey there, good job on completing the challenge! 🎉 For your future projects, it would be good to incorporate semantic HTML in your code such as using the header, main, and footer elements.

    0
  • Guilherme Pereira Pinto• 20

    @dz03vc

    Submitted

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

    1. First of all I'm proud that I simply did it!
    2. This, since is my first challenge, motivated me to keep going at my bootcamp and showed me that I am really learning what I'm studying.
    3. I'm also glad that now I'm understanding how this challenge community works.

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

    1. The first challenge was to understand what Frontend Mentor Challenge wanted from me, and that was overcome by the readme files that comes in the download package and also with the resources at the Discord server.
    2. The second challenge was to write down the codes itself, this was my first "big" blank file that I had to structure and style, but I overcame that remembering everything that I had learn at Colt's Bootcamp and also by using my study notes.
    3. Flex, it looks like that this will be a challenge for a while.
    4. Definitely, the hardest challenge was SVG. At first I thought SVG would be easy peasy, but that required a lot of googling and help from study friends. And I still not sure if I did it correctly.

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

    • A feedback on the general structure of the file would be highly appreciated.
    • At the body I used an encoded version of the svg as a background (Encoded at Meyerweb) (Is it ok to work this way?)
    body {
      background-color: hsl(225, 100%, 94%);
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22437%22%3E%3Cpath%20fill%3D%22%23D6E1FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%20349.974c218.558%20116.035%20460.05%20116.035%20724.475%200s502.933-116.035%20715.525%200V0H0v349.974z%22%2F%3E%3C%2Fsvg%3E");
      background-position: top;
      background-repeat: no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    • I also tried to use a encoded svg for the top image of a person dancing, but it didn't work, maybe because it was too long. So I googled for that svg url on a third-party website and used that as an external url:
    • At the music note svg I could work with the inline without problems, but I feel that if I had to scale it I would have problems. That's why I didn't use inline svg for that "person dancing" image, because I couldn't scale it when it was styled inline with .
    
      
        
          
          
        
      
      
        Annual Plan
        $59.99/year
      
      Change
    • A feedback on the flex structure would help a lot. I feel that I may have added some extra codes that I wouldn't need to.
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    main {
      width: 450px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: column;
    }

    .woman {
      overflow: hidden;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    .description {
      text-align: center;
      text-size-adjust: auto;
      line-height: 24px;
    }

    .planContainer {
      display: flex;
    }

    .planColumn {
      display: flex;
      flex-direction: column;
    }

    .attribution {
      text-align: center;
    }
    • And finally, @media I basically copied all the css styles and removed what I didn't need to resize when the screen got smaller.

    Order Summary Card - HTML and CSS (Internal CSS code |

    2

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey Guilherme, good job on completing the challenge 🎉

    I have a couple of suggestions for you for your next project—

    • When we finally deploy our projects online, one other thing that we want it to be is SEO-friendly; to achieve this, it would be helpful to store your CSS styles in another file instead so that your HTML file is easier to read for search engines

    • As for the alignment of your card, I see that it can be 'more' vertically centered, you can do this by adding min-height: 100vh to your flex container/flex parent element (this sets the flex container's minimum height into 100% of the viewport)

    • For your future projects, I also recommend you implement a mobile-first approach when setting your CSS rules (mobile designs tend to be simpler compared to desktop designs which makes it easier to start here); I see in your README file that you are familiar with Kevin Powell so I suggest this helpful read from him about the use of mobile-first approach!

    (I am not very well-versed with SVGs so I do not have any feedback about it)

    Marked as helpful

    2
  • Oscar• 70

    @O-Marin

    Submitted

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

    tips on responsiveness would be appreciated, maybe a particular workflow that would be intereseting to explore in this regard

    Qr Code challenge

    1

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey Oscar, good job on completing the challenge 🎉

    One tip, I see in your code that you used a media query to style the mobile view, but since you are already following the mobile-first approach per your readme file, you can put these styles outside the media query (so that you'll have them as your default styles) and then you can just override some of these style rules with the media queries for larger viewports.

    I found this resource to be helpful!

    1
  • Riska997• 110

    @Riska997

    Submitted

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

    I am not proud of anything as I feel like I still have a long way to learn web development.

    Next time, I will try to use another web development language to complete this web.

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

    It was my first time using a CSS grid. I was confused as I was uncertain of a few things about using grids. I had to read on W3school how to properly use grid.

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

    Areas for Feedback

    I would greatly appreciate feedback on my project, particularly in the following areas:

    1. CSS Grid Usage: This was my first time using CSS Grid, and I'm unsure if I've implemented it correctly. I'd like someone to review my grid layout and point out any errors or areas for improvement.

    2. Responsiveness: While I've tried to make my project responsive, I'm not entirely confident that it displays optimally on all screen sizes. I would appreciate feedback on how I can improve the responsiveness of my design, especially for smaller screens.

    3. Code Structure and Organization: I want to ensure that my HTML and CSS code is well-organized and follows best practices. If there are any areas where I could improve the structure or organization of my code, I'd like to know.

    4. Accessibility: Accessibility is essential, and I want to make sure my project is accessible to all users. If there are any accessibility issues in my code or design, I would appreciate feedback on how to address them.

    Any guidance or suggestions on these specific areas would be incredibly helpful for me to complete this challenge successfully. Thank you in advance for your assistance!

    Product preview card component solution using CSS grid and CSS Flex

    2

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey there! Good job on completing the challenge 🎉

    RE — accessibility, I suggest checking out sr-only classes, they are helpful for visually impaired users

    RE — best practices, one cute tip, I like using prettier as my code formatter to make sure that my code looks clean and easy to read

    Also, even with the use of media queries, it's still good practice to use for your font-size, paddings, and margins ☺️

    0
  • konji85• 80

    @konji85

    Submitted

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

    I used CSS grid with flexbox

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

    setting the image to take the whole area. also switching between the two images according to the page resolution

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

    any advice for design updating would be greatly appreciated

    ProductPreviewCardusingGridandFlexbox

    1

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey there! Good job on completing the project 🎉

    May I ask why you added a value for your margin in your universal selector? Also, to vertically center your card, you can try adding a height of 100vh to your body selector ☺️

    Marked as helpful

    0
  • thetinyelephant85• 30

    @thetinyelephant85

    Submitted

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

    I'm most proud of completing the project in a shorter time than expected. However, reflecting on it, I am not sure about how I used the grid property and img.

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

    Throughout the process, I encountered challenges such as aligning images and text for the author element, which I resolved by declaring "display: inline-block". Additionally, I initially struggled with grid due missing properties, which I quickly corrected.

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

    Moving forward, for the next iteration of my project, I would appreciate assistance in resolving different font-size in mobile view without using media queries, as suggested during the challenge

    Grid Blog preview card

    2

    Denisse Joyce• 220

    @denissejoyce

    Posted

    Hey there! Good job on completing the project 🎉 You can try using clamp() to modify a text's font size without the use of media queries.

    Marked as helpful

    1
  • Denisse Joyce• 220

    @denissejoyce

    Posted

    Hi there, good job finishing the challenge! Just a few suggestions to improve your code —

    • instead of assigning a specific width for the body (#hero1), you may instead just use 100% (if needed, you may also just not set a width value), that way there wouldn't be a horizontal scrollbar when the viewport is smaller;
    • i'm not totally sure why there was a specified height for #hero2, but if you remove that, that should help fix the height problem of the container;
    • make sure to add your font style to your css file
    • also just like what was mentioned in the other replies, you have the wrong path for your img
    0