Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
2

Twilight Silver

@twilight-silver120 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

  • HTML and CSS Crowd funding page


    Twilight Silver•120
    Submitted about 1 month ago

    I need help making this responsive


    1 comment
  • html and css


    Twilight Silver•120
    Submitted about 1 month ago

    0 comments
  • News Page


    Twilight Silver•120
    Submitted about 1 month ago

    0 comments
  • Responsive Recipe Page


    Twilight Silver•120
    Submitted about 1 month ago

    1 comment
  • Responsive Social Links Profile


    Twilight Silver•120
    Submitted about 1 month ago

    The @media query side and then how do you use the keyboard to navigate the links


    1 comment
  • Responsive Blog Preview Page


    Twilight Silver•120
    Submitted about 1 month ago

    One issue is trying to get the right size But there is still this issue of what i thought i designed and what this page ends up showing me is my result I wish i could put down a screenshot

    My work


    1 comment
View more solutions

Latest comments

  • Ayokanmi Adejola•1,110
    @Ayokanmi-Adejola
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    What I'm proud of:

    I'm particularly proud of the responsive design implementation in this project. I created a clean, readable recipe page that adapts well to different screen sizes (desktop, tablet, and mobile) while maintaining visual hierarchy and readability. The use of CSS custom properties for colors made the styling consistent and easier to maintain. I'm also pleased with how I structured the HTML semantically, which improves accessibility and SEO.

    What I'd do differently:

    If I were to approach this project again, I would: Implement a CSS Grid layout for some sections instead of relying solely on Flexbox Add more accessibility features like ARIA labels and better focus states Include subtle animations for interactive elements to enhance the user experience Use a CSS preprocessor like SASS to better organize my styles Add more comprehensive testing across different browsers and devices

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

    During this recipe page project, I encountered several challenges that pushed me to improve my skills:

    Challenge 1: Typography and Spacing Precision Matching the exact typography and spacing from the design was more difficult than expected. The JPG designs required careful judgment for font sizes, line heights, and margins.

    How I overcame it: I used browser developer tools extensively to fine-tune measurements and compare my implementation with the design. I created a systematic approach to spacing using consistent rem values and created a typography scale that maintained proportions across different screen sizes.

    Challenge 2: Responsive Table Layout The nutrition table was particularly challenging to make responsive while maintaining its visual structure on smaller screens.

    How I overcame it: Instead of using a traditional HTML table approach that might break on mobile, I structured the table with careful CSS that maintains alignment between the nutrition values and their measurements. I used flexbox properties to ensure the content stayed properly aligned at all viewport widths.

    Challenge 3: Custom Bullet Points and List Styling Creating the custom-styled lists for ingredients and preparation time required overriding default browser styles.

    How I overcame it: I researched CSS list styling techniques and learned how to customize list markers. For the preparation time section, I removed default bullets and used custom styling with spans for the bold text, which gave me more control over the appearance.

    Challenge 4: Cross-Browser Compatibility Ensuring consistent rendering across different browsers presented some unexpected issues, particularly with font rendering.

    How I overcame it: I tested the page in multiple browsers and created specific fallbacks where needed. Using local font files with proper @font-face declarations helped ensure consistent typography across platforms. I also learned to use more universal CSS properties that have better browser support.

    Recipe Page

    1
    Twilight Silver•120
    @twilight-silver
    Posted about 1 month ago

    U have done really well... me has no feedback except for when dealing with accuracy.. the photo isnt padded so it doesnt have that white border as in the given example

    Marked as helpful
  • WillMoro•20
    @WillMoro
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am proud that i could think of the solution by myself, without using chat gpt or google. It made me feel confident on my basic skills.

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

    The responsivity part is always challenging, i took a few minutes to come up with a solution. I Overcame it by testing many possibilites until i found one that fit.

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

    None

    Site estático responsivo, desenvolvido com HTML5 e CSS3.

    #pure-css
    1
    Twilight Silver•120
    @twilight-silver
    Posted about 1 month ago

    One thing to add is the shadow element for the card

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