@Stephanie0905
Latest solutions
Time Tracking Dashboard using CSS Grid and local JSON data
Submitted 11 months agoI think my code is "okay". I attempted to match the design specs. I imagine I could have made better use of Grid, such as Grid Areas, to control more of the UI display.
Newsletter sign-up form with JS error checking & modal success message
Submitted 12 months agoI think I got fairly close to the design expectations... other than my decision to place the desktop modal visibly over the Newsletter, ie. instead of placing the modal over a dark-color background (visually by itself).
Article Preview Component
Submitted about 1 year agoI'm wondering if I should have created variation is HTML code (between mobile and desktop designs) in the JS file and inserted what was needed based on view width.
Responsive Meet Landing Page
Submitted about 1 year agoThe one thing I could not figure out what how to control (remove?) the opacity on the second divider (that partially covered the last section) and, similarly, how to control the opacity of the button in the last section.
Latest comments
- @ePaulo
I like how you made the UI responsive to mid-size widths... looks better than mine. The only suggestion I have is to include some code to adjust the "hrs" text displayed after the number of hours for current and previous times. For example, this is the code I used: const abbrHours = hours => (hours < 1 ? " " : hours > 1 ? "hrs" : "hr") // if hours is less than 1 (ie. 0)... then add nothing // if hours are more than 1... then add "hrs" // finally (default) if the time is 1... then add "hr"
Marked as helpful - @Vanillatte68What are you most proud of, and what would you do differently next time?
I'm happy i can get the styling as close to the design including the mobile design. I was able to make this using single page HTML. making the form validation was also pretty easy.
What challenges did you encounter, and how did you overcome them?I was thinking about whether to make this as a single page or make another page for success message. but i decided to make it single page by changing the form and success message display on CSS.
What specific areas of your project would you like help with?I wonder if you can use backend like php to display the success message and how to do it.
@ePauloLooks very good. Both desktop and mobile designs are very similar to the designs provided... well done.
Only one suggestion: you could have set the newletter image in your mobile-first CSS styling (instead of in your HTML) then reset the link to the desktop image in the media query for the desktop styling updates.
This is my CSS code for the newsletter image in my mobile styling: img.main-image { content: url('./assets/images/illustration-sign-up-mobile.svg'); width: 375px; height: 284px; object-fit: cover; }
Marked as helpful - P@AStombaughWhat are you most proud of, and what would you do differently next time?
I think I kept the code simple and got close on the design. I don't know that I would have done anything differently, I felt like I had a good flow going with this project.
What challenges did you encounter, and how did you overcome them?The image swap. I couldn't remember how to do that, but I ended up using CSS and
What specific areas of your project would you like help with?content: url()and that worked for me and made it easy enough to control.Ensuring that my HTML is clean and I kept the CSS simple. I tried hard not to "over code" this time.
@ePauloI think you succeeded in making your code simple, "clean" and easy to understand... very well done. :-)
- @Anni-123-arc@ePaulo
Suggestions:
- try using Semantic HTML in future projects... it's fairly easy to implement and (I think) makes coding HTML more interesting.
- try using margin to control spacing about inner-containers.
- try using line-height to add some spacing between lines in the paragraph.
Marked as helpful - @lucieheliasWhat are you most proud of, and what would you do differently next time?
Everything because I start to be more efficient and more faster.
What challenges did you encounter, and how did you overcome them?On this one I didn't encounter any issue.
What specific areas of your project would you like help with?Everything that can be help to improve my code and my way to do it.
@ePauloYour HTML and CSS look good. So does your UI based on the design files. I did notice the spacing between the lines is different from the provided design. I've been using the CSS styling "line-height" [https://developer.mozilla.org/en-US/docs/Web/CSS/line-height] to control spacing between lines. Give it a try... I find setting line-height very useful. :-)
- @gilangr1440What are you most proud of, and what would you do differently next time?
I can copy the design almost the same
What challenges did you encounter, and how did you overcome them?set class naming and determine css specificity
@ePauloClass naming is excellent. Responsiveness is very good. A couple of suggestions:
- Consider using a CSS universal selector (*) to match elements of any type when resetting margin, padding, border, and so at the top of your CSS code. See the MDN Web Doc... https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
- Consider adding line-height settings to content (i.e. the space between lines in a paragraph) to match the design a bit closer. See the MDN Web Doc... https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Marked as helpful
