@Wannika123Submitted 10 days ago
What are you most proud of, and what would you do differently next time?
It's satisfying to build this with only CSS, but I don't know if it's simpler with JavaScript.
P
Natalie Smyth
@nataliesmythAll comments
- @nataliesmythPosted 6 days ago
Wow, you did an amazing job! I think this is the most precise solution I've seen. The only small adjustment I would make is changing pixels to rems or ems for more flexibility.
1 - @FixitoSubmitted 25 days agoWhat specific areas of your project would you like help with?
How to style radio and checkboxe with SVG?
@nataliesmythPosted 24 days agoGreat job! your solution looks exactly like the design we were given, very impressive. The only thing I would fix is the email validation. Your form validates if the email is filled out, regardless of if it's a valid email. You can use regex to check for certain requirements, and use that every time someone enters an email:
const emailIsValid = email => { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }something like that. Great job again!
0 - @poissonfouSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud to have not struggled with the challenge and to have been able to do it without any majors issues appearing.
What challenges did you encounter, and how did you overcome them?I didn't encounter any challenges in this project.
What specific areas of your project would you like help with?I don't have any questions or issues that I'd like help with.
@nataliesmythPosted about 1 month agoGreat job! My only suggestion is to change the background color to make your solution look more similar to the given design :)
0 - @mowzayoSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
my js , giving background color to html
What challenges did you encounter, and how did you overcome them?when i use media query, my cursor stops working
What specific areas of your project would you like help with?media query area
@nataliesmythPosted about 1 month agoNice job! I have a few suggestions to get your solution as close to the design as possible. First, the background color for the body is set to a different color than the design, which is an easy fix.
body { background-color: #e9f5f0; // change this color }Second, if you add border: none; to your button element, the outline will go away.
I'm not sure what you mean about your media queries, but this is a good project to practice on because there are only two sizes. My advice is to start with the one size, get it looking the way you want at that set size, and then add a media query to adjust the width and whatever else needs to be adjusted. I would start with mobile, and once that's done create a media query for the larger container, like this:
.container { code: here; } @media (min-width: 500px) { .container { changes: here; } }in the above example, the changes would take place when the screen is larger than 500px. Hope that helps!
0 - @toni500madmaxSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I have many points to improve, especially the begin the project, it's very strange and hard to think in a solution rapdly and efficiently.
What challenges did you encounter, and how did you overcome them?I figured out that gotta to study much more styled components and prop types through it.
What specific areas of your project would you like help with?At this time i need how to start a project, how to define architeturies of archives and other things, and where should i start for in a new project...
@nataliesmythPosted 5 months agoGreat job, your app looks just like the design given.
I have some suggestions from my own experience learning to program
- I highly recommend understanding CSS and vanilla JavaScript before trying to learn frameworks like react. JavaScript frameworks and libraries are built with vanilla JavaScript, and learning react without understanding JavaScript is like building a house with no foundation; the smallest obstacle will make the whole thing fall.
- Frameworks like react are unnecessary for projects using HTML and CSS without JavaScript, and implementing react here added a lot of unnecessary code. So for this project, you may be better served to focus on getting comfortable with html and css, then add JavaScript, and then later in your journey add frameworks.
All the best! Great Work!
Marked as helpful0 - @AcharaChisomSolomonSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Whewww!!! . . . . This looked deceptively simple at first, definitely worthy of being an intermediate ranked project!!!
getting the strength display was fun and is what I am most proud of.
What challenges did you encounter, and how did you overcome them?A lot like figuring out how copying to the clipboard works, determining the strength of a password using regex and the css tricks involves, and also overriding the default styling for html input elements.
loads of googling and chatgpt helped.
What specific areas of your project would you like help with?nothing for now!!!
Any tips to improve is welcome
@nataliesmythPosted 5 months agoGreat job!
I just finished this project as well, it was definitely more intricate than it seems on first glance.
The functionality is great, my only suggestion would be to make the slider thumb in css using the -webkit-slider-thumb and -moz-range-thumb properties, and remove the white border from the strength meter by setting it to transparent.
Great job!
0 - @KrishnaPoddar1Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Working with forms in conjunction with JavaScript for the first time.
Slowly but surely improving my front end skills
What challenges did you encounter, and how did you overcome them?Had a doubt with the structure of the element and took a lot of time deciding the structure.
What specific areas of your project would you like help with?I would like someone to go through the code and let me know whether the solution is correct or not as I am not sure about it.
Any Ideas or suggestion would be welcomed!
@nataliesmythPosted 6 months agoCongrats on your submission!
The inputs work great and your layout looks similar to the given design, here are a few suggestions
- Form elements don't inherit font family from parent elements, so you have to specify that you want the font family inherited for those elements ex: input { font-family: inherit; }
- There is also text that is black, I'd just add styling to that text so it's the correct color
- The calculator results aren't showing up in the UI. I would use innerText instead of textContent because the innerText property returns content as rendered on screen, while textContent returns content as it is in the HTML markup, ignoring formatting.
Good job again!
0 - @iamporrrrrrrrrSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
None
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
@nataliesmythPosted 6 months agoGreat job! Your solution works perfectly and looks almost identical to the original design. The only thing I would say is that using a footer for each card may be a bit confusing for people using screen readers, and should maybe be changed to a different name that isn't designated for one piece of content on the bottom of the page.
Awesome job again!
0 - @Islandstone89Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
No comment.
What challenges did you encounter, and how did you overcome them?No comment.
What specific areas of your project would you like help with?No comment.
@nataliesmythPosted 7 months agoGreat job!
One suggestion I have for this project is to have the user go back to the sign up page after clicking the dismiss message button after subscribing.
Other than that it looks great!
Marked as helpful1 - @iamporrrrrrrrrSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
None
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
@nataliesmythPosted 7 months agoHey hey! Congrats on completing this challenge!
I have a few suggestions that may interest you.
• The footer HTML element is typically reserved for content that is below and not part of the main body content. Since the social media section is part of the main content and wouldn't be at the bottom of every page of the website this component is part of, it is less confusing to use a class name that differentiates it from the footer element.
• If you design the mobile view first and then use a media query for a minimum width to switch to the desktop view, you can preserve the structure at all screen sizes from small to large.
Great job!
Marked as helpful1
