@awheelrSubmitted 8 days ago
Yefree Valdez
@yefreescodingAll comments
- @yefreescodingPosted 8 days 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!
1 - P@Carlos-Eduardo-SSubmitted 8 days agoWhat 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.
@yefreescodingPosted 8 days agoThe 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.
1 - @jad58200Submitted 8 days agoWhat 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.
@yefreescodingPosted 8 days agoI noticed something about the width property of your component. It is causing some issues. you should take a closer look.
Marked as helpful1 - @Nikhila-DNSubmitted 9 days ago@yefreescodingPosted 8 days ago
Great work! The code looks exceptionally clean and well-organized. Congratulations!
Marked as helpful0 - P@sophia-seeSubmitted 3 months ago@yefreescodingPosted 3 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 helpful0 - @xaocccSubmitted 3 months ago@yefreescodingPosted 3 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!
0 - @BriuwuSubmitted 3 months agoWhat 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.
@yefreescodingPosted 3 months agoYou’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!
1 - @ClipzoramaSubmitted 7 months agoWhat 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!
@yefreescodingPosted 7 months agoYour solution looks great, I mean is practically identical to the original design. Congratulations, you did a great job!!
1 - @keinermendozaSubmitted 7 months agoWhat 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.
@yefreescodingPosted 7 months agoYour solution looks perfect. Congratulations, keep the great work...
1 - @haquanqSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Hello 👋
What i have done
- No access to design files, use my own judgement to achieve pixel-perfect
- Styling using vanilla CSS and BEM class naming convention
- Override default
outlinefocus effect oninput,buttonelements
Any feedback would be appreciated 🙏
@yefreescodingPosted 9 months agoHey!
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.
1 - @MellTinsSubmitted 9 months agoWhat 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
- It was difficult to make the cards on the left and right stay in the middle.
- good programming practices.
@yefreescodingPosted 9 months agoGreat 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 helpful1 - @Eng-Abdelrhman100Submitted 9 months agoWhat 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
@yefreescodingPosted 9 months agoI 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 helpful1 - Screen Readers: Semantic elements (like
- @JJ-codes-9Submitted 9 months agoWhat 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!
@yefreescodingPosted 9 months agoPerfect, 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 theborder-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;, andgap: 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 withjustify-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 helpful0 - One tip is that you should use more semantic HTML tags for your components, such as
- @JessB74Submitted 9 months agoWhat 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.
@yefreescodingPosted 9 months agoGreat 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 helpful0 - @beqqiSubmitted 9 months agoWhat 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.
@yefreescodingPosted 9 months agoNice 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-colorto the* {}selector, as this will affect the background of every element on your page. - You can style the body with
min-height: 100dvh;anddisplay: grid; place-items: center;to center any div within your body, eliminating the need forposition: absolute;. - If you use
position: absolute;for any component, always remember to addposition: relative;to the parent container. This is very important. <img src="" alt=""/>elements can be tricky to style, but usingdisplay: block; max-width: 100%;can make your coding life easier.- It's essential to learn how to use
display: grid;anddisplay: flex;as they are crucial properties in today's front-end development.
Marked as helpful0 - Do not apply a
- @JJ-codes-9Submitted 9 months agoWhat 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!
@yefreescodingPosted 9 months agoIt 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 helpful0 - @DarioDG91Submitted over 1 year ago@yefreescodingPosted over 1 year 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...
0 - @mouhibeddineSubmitted over 1 year ago@yefreescodingPosted over 1 year 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:
- 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:
- 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.
1
