Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
38
Yefree Valdez
@yefreescoding

All comments

  • Austin Wheeler•40
    @awheelr
    Submitted 4 months ago

    Social Links Profile built with Next and Tailwind

    #next#tailwind-css
    1
    Yefree Valdez•940
    @yefreescoding
    Posted 4 months ago

    The component looks awesome, and the code is super clean and organized. I really like it! I think you built it using NextJS to practice and learn the framework, because it’s a bit too much for too little 😅, but you definitely did a great job!

  • P
    Carlos Eduardo Santos Oliveira•180
    @Carlos-Eduardo-S
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm very happy to have completed this project, especially with the two responsiveness features (for tablet and mobile). There's definitely a lot of code that I can optimize, but knowing that I can do it is very exciting.

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

    The challenge I faced was definitely responsiveness. Tablet devices were easy, but mobile devices were much harder than I thought they would be. I overcame this challenge through sheer persistence, trying and trying again, even though it took longer than I expected.

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

    Responsiveness, I would like to know if I did anything that could be optimized to try in the next attempts.

    Html, CSS e @media

    2
    Yefree Valdez•940
    @yefreescoding
    Posted 4 months ago

    The website looks just like the original design! If you want to get some great feedback on your code, check out the link for your GitHub solution.

  • jad alromhein•100
    @jad58200
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of the simplicity and clarity I achieved by solving the problem with basic HTML and CSS. It’s satisfying to create a clean, functional layout with minimal code. The focus was on organizing the social links in a way that’s easy to understand and visually appealing. If I were to do things differently next time, I would explore using Flexbox or Grid to create a more responsive design, ensuring it adapts to various screen sizes. I’d also consider adding subtle hover effects to make the project more interactive and accessible. Additionally, enhancing mobile responsiveness and improving accessibility by adding aria-label attributes could make the project more inclusive. Overall, I’d look for ways to refine the design and add extra polish while keeping the simplicity intact.

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

    Nothing.

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

    Please feedback me with any missed points.

    Simple Social links profile solved using basic HTML & CSS code.

    #bootstrap
    3
    Yefree Valdez•940
    @yefreescoding
    Posted 4 months ago

    I noticed something about the width property of your component. It is causing some issues. you should take a closer look.

    Marked as helpful
  • Nikhila D•610
    @Nikhila-DN
    Submitted 4 months ago

    Easybank landing page

    1
    Yefree Valdez•940
    @yefreescoding
    Posted 4 months ago

    Great work! The code looks exceptionally clean and well-organized. Congratulations!

    Marked as helpful
  • P
    sophia-see•590
    @sophia-see
    Submitted 7 months ago

    Bookmark landing page using React

    1
    Yefree Valdez•940
    @yefreescoding
    Posted 7 months ago

    You’ve done a great job with this challenge! In my opinion, everything looks perfect and matches the original design flawlessly.

    Using React for this project might be a bit overkill, but if it’s for practice purposes, it totally makes sense.

    I also really liked how you organized your directories and folders—it’s super easy to navigate and debug.

    Marked as helpful
  • Georgi Tashev•820
    @xaoccc
    Submitted 7 months ago

    Ticket generator

    1
    Yefree Valdez•940
    @yefreescoding
    Posted 7 months ago

    This challenge looks amazing! I think you’ve done a fantastic job coding it.

    The only issue I noticed is with the error messages above each <input> element—they appear as soon as the page loads. I think those messages should only show after the user submits the form, and one or more <input> fields are left blank.

    Other than that, everything looks perfect!

  • Briuwu•840
    @Briuwu
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm really proud of creating a user-friendly note-taking app with features like real-time feedback, customization options, and user authentication. Next time, I'd focus on optimizing the app's performance and improving the user interface for an even better experience.

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

    One of the main challenges I faced was making the app adapt dynamically to different themes and fonts. To overcome this, I implemented a flexible theming system that allowed users to switch between themes and fonts seamlessly.

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

    I could use some assistance with improving keyboard navigation and finding a more efficient way to implement dynamic font and theme changes. Any suggestions or best practices in these areas would be greatly appreciated.

    Note Taking App Full Stack (built using Next.js, NeonDb, Clerk, etc.)

    #next#react#tailwind-css
    2
    Yefree Valdez•940
    @yefreescoding
    Posted 7 months ago

    You’ve done a fantastic job with this website! The login form is seamless and incredibly easy to use—I didn’t encounter any issues while creating or logging into my account.

    Creating and editing notes is also very well-optimized and smooth.

    Congratulations on this amazing work!

  • Chrision Wynaar•340
    @Clipzorama
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to finish this solution at a time shorter than expected. Even though this is not part of the solution, it would be cool to add animations around the card that displays all the information. Maybe something that shines the container or a light that traverses around it.

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

    Honestly, didn't have much problems with this one but feedback is always welcome. There is always a more optimal solution and if anyone can find one, please send!

    Blog Preview Card Solution

    1
    Yefree Valdez•940
    @yefreescoding
    Posted 10 months ago

    Your solution looks great, I mean is practically identical to the original design. Congratulations, you did a great job!!

  • Keiner Mendoza•240
    @keinermendoza
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of having completed the challenge.

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

    My first instinct was to create the card decoration using a before element. However, I quickly realized that this was a mistake because that technique doesn't work well inside a grid. Then, I realized that the card elements are simply boxes inside other boxes. It's something very simple, but I think this is a very useful technique.

    Time Tracking Dahsboard made with React + Tailwindcss

    #react#tailwind-css
    1
    Yefree Valdez•940
    @yefreescoding
    Posted 10 months ago

    Your solution looks perfect. Congratulations, keep the great work...

  • haquanq•1,855
    @haquanq
    Submitted about 1 year ago

    Mobile-first responsive, accessible rating component

    #accessibility#bem
    1
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    Hey!

    I was checking your solution, the live preview, and the GitHub repo code, and I have to say that I'm amazed by how well you made this component. It is really impressive!

    The code is clean and readable, with excellent use of HTML semantic tags, well-named classes, and organized main.css file.

    Congratulations! I'll keep an eye on your work.

  • Melissa Martins•150
    @MellTins
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    • Proud to make the design almost identical
    • I would like to be faster at understanding the grid positions
    What challenges did you encounter, and how did you overcome them?
    • It was difficult to make the cards on the left and right stay in the middle.
    What specific areas of your project would you like help with?
    • good programming practices.

    four-card-feature-section-master

    2
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    Great job with this challenge! I really like the final result; it is practically identical to the original design.

    One thing I want to point out is your use of semantic HTML tags. This adds a lot of value if you want to pursue a career in front-end development. Knowing when and how to use different HTML tags like <header>, <nav>, <section>, <article>, etc., is very important. Congrats, and keep up the great work!

    + Here is some advice for good programming practices:

    • Instead of using the id selector in your CSS, you should add a different class to the element, like <section id="green" class="service-card color-green">. This is just an example to help you understand what I'm trying to say. You can add as many classes as you need.
    • Something that can help you a lot with naming your classes is the BEM methodology, which is super useful.

    I hope this helps you with your next challenges. I think you're doing amazing so far.

    Marked as helpful
  • Abdelrhman Yasser Ali•80
    @Eng-Abdelrhman100
    Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    making the shadow appear on hover

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

    please check and tell me where can i improve and thank you

    blog preview card

    #tailwind-css
    1
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    I believe that you did a really good job, everything is pixel perfect and identical to the original design.

    Maybe the only thing I can say to you is to try to learn about semantic html. Writing semantic HTML is essential for several reasons, each contributing to the overall effectiveness, accessibility, and maintainability of a website.

    Improved Accessibility

    • Screen Readers: Semantic elements (like <header>, <nav>, <article>, <section>, etc.) provide meaningful context to screen readers, helping visually impaired users navigate the content more effectively.

    Better SEO

    • Search Engine Crawlers: Search engines use semantic HTML to understand the structure and content of a webpage better. Properly used elements can enhance how search engines index and rank your site.
    • Rich Snippets: Elements like <article>, <time>, <address>, and others can contribute to rich snippets in search results, improving click-through rates.

    Enhanced Readability and Maintainability

    • Human Readability: Semantic tags clearly describe their purpose, making the HTML code easier to read and understand for developers.
    • Maintaining Code: With a clear structure provided by semantic tags, it’s easier to maintain and update code. This reduces the risk of introducing errors when making changes.

    Consistent Styling

    • CSS Targeting: Semantic elements can be targeted directly in CSS, leading to more organized and maintainable stylesheets. This helps in creating a consistent style across similar types of content.

    Enhanced User Experience

    • Navigability: Semantic elements can improve keyboard navigation, allowing users to tab through sections more logically.
    • Responsive Design: Clear structure aids in the implementation of responsive design techniques, making it easier to manage layouts for different screen sizes.

    Standards Compliance

    • Web Standards: Writing semantic HTML aligns with web standards and best practices recommended by the World Wide Web Consortium (W3C), ensuring that your site is future-proof and compatible with a wide range of devices and browsers.

    Example of Semantic HTML vs. Non-Semantic HTML

    • Non-Semantic HTML:
    <div id="header">
      <div class="nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </div>
    </div>
    <div id="main-content">
      <div class="post">
        <div class="post-title">My First Post</div>
        <div class="post-body">This is the content of my first post.</div>
      </div>
    </div>
    
    • Semantic HTML:
    <header>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h1>My First Post</h1>
        <p>This is the content of my first post.</p>
      </article>
    </main>
    
    Marked as helpful
  • JJ-codes-9•110
    @JJ-codes-9
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I struggled with the CSS properties but with researching and going through some previous codes that I wrote, finally managed to do the gradients and all the background colors.

    I still have to practice/work on Flexbox as my knowledge needs sinking in:)

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

    Flexbox and styling as well as media query sections were challenging but with patience and research I made it happen.

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

    I'd like to know if there was a simpler way to write the CSS as I sometimes felt it took longer than I expected.

    I love constructive feedback!

    Results summary component solution using CSS FlexBox

    2
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    Perfect, now I can see what you've done 😁.

    You did a pretty good job, and I really like how you build and organize your HTML file.

    • One tip is that you should use more semantic HTML tags for your components, such as <main>, <section>, <header>, <footer>, etc. There are semantic HTML tags for almost any use case. Remember that <div> means division and shouldn't be used for everything.

    Your styles are great as well, just a couple of things:

    • The <div class="your-result column-1"> does not have the border-radius: 20px; you applied it to the parent container <div class="flex-box"/>. Take a look at the original design, and you will see how the border is curved on the left side.

    The last thing I've noticed is your table on the left side, where you decided to put the data:

    • Use these properties: display: flex;, flex-direction: column;, and gap: 16px;. These will help you control the components inside your <tbody> element using flex.
    • You can also use the same property, display: flex;, on the <tr class="reaction-background"/> elements. The flex property, combined with justify-content: space-between;, can fix the position of the data inside the <tr class="reaction-background"/>.

    Overall, you're doing a great job so far. Keep practicing; you're on the right path. I hope this helps you improve. If you need anything, feel free to ask me.

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

    I am proud of being able to write the whole code by myself for the first time. I will take time to research more about things I'm not familiar with before beginning the project next time.

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

    There were properties I didn't know and it was my first time inserting a SVG file. I came across hsl for the first time as well. I googled and used MDN docs and W3 schools to find answers to things I didn't know. I also had a bit of trouble centering the box and making it responsive. I believe my main focus was my solution to look identical to the result however there's room for improvement so I'm ready to try more projects.

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

    I need help with CSS positioning or putting a div in the exact position I want it to be. I would also appreciate any feedback as well. As a self-taught individual aspiring to be a web developer, I can use all the resources and feedback I can get to help me do better.

    Blog Preview card using HTML and CSS

    3
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    Great job on this component.

    It seems that you have a problem with the position of your <div id="main-box">. I fixed it by adding the following style to the body element: min-height: 100dvh;. This will ensure that your body has a height equal to 100% of the viewport, which is super useful.

    Try it and let me know how it goes 😉. Good luck with your future projects!

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

    I am proud of the fact that I didn't procrastinate until I get everything right where I wanted them to be.

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

    I was having a problem with the positioning, which I am currently working on.

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

    It would be nice if I had understood how the layout works and how parent-child relationship works.

    Static Web QR Code Component using HTML & CSS

    1
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    Nice job on this component, and congratulations on not procrastinating xd.

    Here are some tips to improve your styles with CSS and make the design stand out 😁:

    • Do not apply a background-color to the * {} selector, as this will affect the background of every element on your page.
    • You can style the body with min-height: 100dvh; and display: grid; place-items: center; to center any div within your body, eliminating the need for position: absolute;.
    • If you use position: absolute; for any component, always remember to add position: relative; to the parent container. This is very important.
    • <img src="" alt=""/> elements can be tricky to style, but using display: block; max-width: 100%; can make your coding life easier.
    • It's essential to learn how to use display: grid; and display: flex; as they are crucial properties in today's front-end development.
    Marked as helpful
  • JJ-codes-9•110
    @JJ-codes-9
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I struggled with the CSS properties but with researching and going through some previous codes that I wrote, finally managed to do the gradients and all the background colors.

    I still have to practice/work on Flexbox as my knowledge needs sinking in:)

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

    Flexbox and styling as well as media query sections were challenging but with patience and research I made it happen.

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

    I'd like to know if there was a simpler way to write the CSS as I sometimes felt it took longer than I expected.

    I love constructive feedback!

    Results summary component solution using CSS FlexBox

    2
    Yefree Valdez•940
    @yefreescoding
    Posted about 1 year ago

    It appears that there’s an issue with the live site. The CSS stylesheet might not be linked correctly, as there is no styling applied. You should check this.

    Marked as helpful
  • DarioDG91•330
    @DarioDG91
    Submitted almost 2 years ago

    Responsive form with HTML, CSS and JS

    1
    Yefree Valdez•940
    @yefreescoding
    Posted almost 2 years ago

    👋After checking your solution I've gotta say that you did a great job with all the validations, congrats! Your code looks well structured and you seem to check every point of the task given...

  • Mouhib Eddine Zakaria•160
    @mouhibeddine
    Submitted almost 2 years ago

    Responsive Landing Page using CSS

    #itcss#sass/scss#less
    1
    Yefree Valdez•940
    @yefreescoding
    Posted almost 2 years ago

    👋Eyy...

    Being your first time working with a responsive design, I have to say that you did a good job. I'd like to share some tips and advice for you to keep learning, and become a better front end developer.

    Semantic HTML is the way to go:

    1. When coding the structure of your webpage try to use as more semantic html tags as posible. Using <div> containers for everything is considered a bad practice. <header>, <main>, <section>, <aside>, <quote>, <footer>, <article>, <picture>, etc.
    • You can check this article Link here.
    • This video will help you too Semantic HTML

    Responsive layouts:

    1. The key to develop layouts that are responsive, is using the correct media queries, understand relative units, the advantages of Flexbox and Grid.
    • This is a old article but will help you understand media queries link
    • Check this video Responsive design No media queries

    I hope this resources can help you. You're going for the right path, and I believe you could become a great front end developer.

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

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