Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
13
P

Denisse Joyce

@denissejoyce290 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Interactive rating component main (SASS, VanillaJS)

    #accessibility#sass/scss

    P
    Denisse Joyce•290
    Submitted 5 months ago

    Hi! RE: the number rating, is this the best practice (for accessibility) with the number buttons? Do you have better alternatives?

    Thank you! Also any kind of feedback is welcome


    1 comment
  • Notifications page main (SASS + VanillaJS)

    #accessibility#sass/scss#bem

    P
    Denisse Joyce•290
    Submitted 5 months ago

    Any kind of feedback is appreciated!


    0 comments
  • Results summary component main (data dynamically populated)

    #accessibility#sass/scss#bem

    P
    Denisse Joyce•290
    Submitted 5 months ago

    For the sake of learning, I wanted to ask for help RE: using local font via font-face. I tried doing that for this challenge but it didn't work for me (code is left commented in typography partial).

    Any feedback regarding my code is highly appreciated too!


    1 comment
  • Testimonials Grid Section Main (CSS grid, mobile-first)

    #accessibility#sass/scss#bem

    P
    Denisse Joyce•290
    Submitted 6 months ago

    Regarding the review cards, I was not sure which tag to use at first (I was thinking either blockquote or article), but I decided to use article instead since there was no hover state for the review cards in the design which in my understanding, should go to the source of the quotation (if it was only a quotation).

    Can somebody please provide any feedback/insight on how to better approach review cards next time?

    Thank you ☺️


    0 comments
  • Social links profile main (gradient bg, day/night mode available)

    #accessibility#sass/scss#bem

    P
    Denisse Joyce•290
    Submitted 6 months ago

    Any review of my code would be helpful! I'm still trying to get used to using BEM so I'd be grateful for any comments/tips about that.


    1 comment
  • Responsive single price grid component solution (SASS, BEM)

    #accessibility#sass/scss#bem

    P
    Denisse Joyce•290
    Submitted 11 months ago

    I'd be so thankful to anyone who can review my use of BEM and semantic HTML (I'm trying to focus on accessibility also)!

    Oh, and lastly, any tips on how you guys name your CSS/SASS variables, please? I understand that you have to be descriptive, but with projects that have lots of colors, for example, how do you name your variables?

    Thank you 🫡


    1 comment
View more solutions

Latest comments

  • deezjason•20
    @deezjason
    Submitted 11 months ago
    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
    P
    Denisse Joyce•290
    @denissejoyce
    Posted 11 months ago

    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
  • P
    Srishti Chaudhary•250
    @itsmesrishti
    Submitted 11 months ago
    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

    #sass/scss
    1
    P
    Denisse Joyce•290
    @denissejoyce
    Posted 11 months ago

    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 ☺️

  • P
    Margaux•200
    @margaux-works
    Submitted 11 months ago
    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
    P
    Denisse Joyce•290
    @denissejoyce
    Posted 11 months ago

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

    Marked as helpful
  • P
    zhansayatazhibayeva•640
    @zhansayatazhibayeva
    Submitted 12 months ago
    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

    #accessibility
    1
    P
    Denisse Joyce•290
    @denissejoyce
    Posted 12 months ago

    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.

  • Kaustubhya Shukla•50
    @kaustubhya
    Submitted about 1 year ago
    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
    P
    Denisse Joyce•290
    @denissejoyce
    Posted about 1 year ago

    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! ☺️

  • khabunny•40
    @khabunny
    Submitted about 1 year ago
    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

    #accessibility
    2
    P
    Denisse Joyce•290
    @denissejoyce
    Posted about 1 year ago

    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.

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub