It's satisfying to build this with only CSS, but I don't know if it's simpler with JavaScript.
Latest solutions
Accessible news homepage built with CSS grid
#accessibilityPSubmitted 4 months agoI am not thrilled with the the button on mid sized screens, it's not the right size but I can't seem to set the max height of the button when the screen is around 700px-1000px.
Contact form focused on accessibility
#accessibilityPSubmitted 5 months agoI would love feedback on my JavaScript, and how I can create cleaner, more concise code.
Responsive FAQ Page built with JavaScript
#accessibilityPSubmitted 6 months agoAny feedback is welcome! Overall, I'm pretty happy with the result.
Responsive PW Generator app using utility classes
PSubmitted 10 months agoI would appreciate any help with changing the track fill color from black to green. I've tried using background image, borders, but I haven't been able to make it dynamic.
Responsive Tip Calculator using Flexbox
#accessibility#webflowPSubmitted 10 months agoI always love feedback to improve my work, I'd love feedback on the layout of the app in between the mobile view and desktop view.
Time tracking dashboard using grid
PSubmitted 10 months agoPopulating my HTML with json! I will go back to basics and come back to this project.
Latest comments
- P@Wannika123Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?P@nataliesmythPosted 4 months 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 - P@FixitoSubmitted 5 months agoWhat specific areas of your project would you like help with?
How to style radio and checkboxe with SVG?
P@nataliesmythPosted 5 months 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 6 months 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.
P@nataliesmythPosted 6 months agoGreat job! My only suggestion is to change the background color to make your solution look more similar to the given design :)
0 - @mowzayoSubmitted 6 months 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
P@nataliesmythPosted 6 months 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 9 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...
P@nataliesmythPosted 9 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 11 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
P@nataliesmythPosted 9 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