@poissonfouSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
...
What challenges did you encounter, and how did you overcome them?...
What specific areas of your project would you like help with?...
P
Nate Valline
@nvallineAll comments
- P@nvallinePosted 5 months ago
Hi Emerson,
Good job with this challenge. I like how you created the responsiveness for tablet size devices as well.
One suggestion is that I am on an ultra-wide monitor and when viewing your solution on devices that are greater than 1440px your content is no centered and some of the elements extend beyond the design specifications.
There are a couple of ways to control this. 1) Implement a max-width on the header and main elements, 2) Implement either margin and padding to align the content where you want, or implement flexbox to center the content on the screen.
I hope this is helpful.
Cheers!
0 - @hangtime319Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
What I'm most proud of about this project is having done it faster than others and being able to apply the techniques I learned.
What challenges did you encounter, and how did you overcome them?My biggest challenge was aligning the form elements and validating the fields. With a lot of research in the documentation I was able to validate them all.
What specific areas of your project would you like help with?Any tips or suggestions are welcome
P@nvallinePosted 6 months agoGood job with this challenge!
Looking over your code, it looks pretty solid to me. Maybe to continue to stretch yourself, you could look at adding some animations with the success toast is displayed and then have it close out automatically.
0 - @hangtime319Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
This project made me practice accessibility and also some CSS features like the accordion.
What challenges did you encounter, and how did you overcome them?The challenge was to perform the accordion without using JavaScript. CSS only.
What specific areas of your project would you like help with?I would like more accordion styling tips.
P@nvallinePosted 6 months agoGood job with this challenge! I am able to tab and navigate the app with my keyboard and everything is well labeled for accessibility.
My only suggestion is that the sizing of the typography and spacing is a little small. It would be a better user experience and more accessible if you were to enlarge the type and spacing to an appropriate size for each device size.
Cheers!
0 - @marcfrancissSubmitted 10 months agoP@nvallinePosted 7 months ago
Hi! Good job with this challenge. The live site is very similar to the design file and it functions as you would expect it. I like the additional animations you added to spice it up.
Marked as helpful0 - P@kaamiikSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
- I learned how to work with a multi step form in a multi page challenge.
- I learned how to build a toggle button that is accessible and using for light/dark toggle.
Using a framework like react to code java script
What challenges did you encounter, and how did you overcome them?Multi page app was challenging. Make an accessible toggle button was challenging too.
What specific areas of your project would you like help with?Please look at my page and If you see any bugs or error please tell me to work on it. and If you see any mistake in my code please let me know to prevent doing it in the future challenges. Thank you very much
P@nvallinePosted 8 months agoHi Kamran,
Good job with this project! There were some tricky elements and you seem to have implemented them well.
When I toggle the dark/light switch it only functions when I click on the icons, but not when I click on the 'switch'. For a better user experience, adding the functionality to the 'switch' would be an improvement as most people will click there first.
You may be able to achieve this by adding an event listener to the class, 'c-toggle__wrapper' and when it is clicked it toggles between the dark & light themes.
I hope this is helpful.
0 - P@TorHammSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
My first time using react its turn out pretty good.
What challenges did you encounter, and how did you overcome them?Encounter a lot of react issue because it is my first time chatGPT and Youtube help me out.
What specific areas of your project would you like help with?Open for any suggestion. :D
P@nvallinePosted 10 months agoHi,
Great job on this challenge! I would have not guessed that it was your first time using React. I don't see any issues that are jumping out at me and your app works well.
Cheers!
0 - @jrgenwebSubmitted 12 months agoWhat are you most proud of, and what would you do differently next time?
managed to do it
What challenges did you encounter, and how did you overcome them?fetchapi, but then I read it on mdn
What specific areas of your project would you like help with?overall, how it turned out, what I should change
P@nvallinePosted 10 months agoHi,
Great job on the challenge! I have a couple of things to think about for further user improvements.
First, the responsiveness is good but for an even better user experience additional breakpoints or sizing considerations could be used so that items don't get over stretched or squished.
Second, implementing a tabbed interface for the 'filter' tabs will add to the accessibility of the app. This article is very helpful, https://inclusive-components.design/tabbed-interfaces/.
I hope this is helpful.
1 - @josh-condeSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of the JavaScript for this
What challenges did you encounter, and how did you overcome them?Challenges were figuring out the styling for the popup and how to get them correctly
What specific areas of your project would you like help with?None I am very proud of this
P@nvallinePosted 11 months agoHi,
Good job on this challenge! The form validation functions as it should based on the guidelines of this challenge.
Looking at your mobile view, the sizing is a bit off and creates a horizontal scroll. It looks like your '.left-container' has a fixed width set to 400px and is the main culprit. It looks like if you were to exclude that for mobile screen sizes and then include it on desktop screen sizes within your media queries that should take care of it.
Cheers!
0 - @taiwogbadamosiSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
Learnt basic dom manipulation
What challenges did you encounter, and how did you overcome them?this code was really poor, i was trying to rush through it, even the relatively simple css layout portions. the share thing is also horrific, I will improve as I continue this learning path.
What specific areas of your project would you like help with?Sighhh
P@nvallinePosted 11 months agoHi! Good job on this challenge. One thing you could do to improve the usability of the component is to add an event listener onto the icon in the nav to close the nav. This will provide the user with a way to close it out without having to refresh the page.
Also, changing the breakpoint to a smaller unit will provide the user with a better experience. As it is now, the image sizing and spacing of the component gets a little difficult to view when it nears the breakpoint.
I hope this is helpful.
0 - @PeterBachman100Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
Happiest with the last section. Next time I would do more planning and outline work to understand the system and spacing.
What challenges did you encounter, and how did you overcome them?The spacing with the last section and marker was difficult at first because I had put the marker inside of the div with the image background and then adjusted the position up.
Instead, I create a larger surrounding section with the marker inside and adjusted down, with negative top-margin adjusted the same amount. This helped me keep consistent spacing between the major page sections.
What specific areas of your project would you like help with?Always open to feedback and ideas!
P@nvallinePosted 11 months agoHi Peter,
Great job on the challenge! I just have a couple small aesthetic suggestions. The paragraph text in the intro section and section 2 gets pretty wide before the site hits the 1200px breakpoint. I would set a max-width on them that is equal to the widest width in the design. That way it retains a similar look and feel for the user.
The other tip is to remember to use img alts. If the image is purely decorative with no real purpose, you should use empty alts, alt="", otherwise include proper alt text for the image. This helps with accessibility and SEO.
I hope this is helpful.
0 - @KolodziejczykTomaszSubmitted 11 months agoP@nvallinePosted 11 months ago
Good job on this challenge! Based on the screenshot and live site I don't really have any feedback for you other than, maybe you could add in some additional breakpoints to make it a little more user friendly at different device sizes.
Obviously, in the style guide that is not required but it is a good way to practice for the real world.
1 - @Mustypro137Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P@nvallinePosted 11 months agoGreat job on the challenge! One suggestion that could help the user experience is adding some max-widths on some of the element containers so that they don't overstretch as the device screen changes.
For example the H1 title and the p desc stretch to an awkward width before the media query is reached at 768px. Adding a max-width and text-align center will help with the aesthetics.
Hope that is helpful.
Marked as helpful0 - @RohanIVSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
Got it to be responsive
What challenges did you encounter, and how did you overcome them?Getting the desktop picture to one side. I put it in its own div
What specific areas of your project would you like help with?Nothing specific. Any feedback /tips.
P@nvallinePosted 11 months agoHi,
Good job with this challenge! Using Flexbox is one way to make the card responsive, but another easy solution is using Grid.
In your media query for the .card-container you can using the following code to create two even columns.
display: grid; grid-template-columns: 1fr 1fr;
Flexbox and Grid are two powerful features that make layouts much easier. I hope this is helpful.
Marked as helpful0 - @sportif7Submitted 11 months agoP@nvallinePosted 11 months ago
Hi,
Good job on this challenge, it looks good!
One small thing that I see is in the mobile view (375px side) the title H1 stacks the three words on top of each other. If you play around with reducing the font size of the H1 you'll be able to match up the sizing to that of the mobile design.
Other than that, nothing else jumps out at me.
0 - @mdimranpashaSubmitted 11 months agoP@nvallinePosted 11 months ago
Hi,
Good job on the challenge. When I pull up your live site, it doesn't look like the correct font is being utilized.
When I completed the challenge, I found that the filename for the font contained a ',' between slnt & wght. I replaced that with an '_' and used this code in my CSS.
@font-face { font-family: 'Inter'; src: url(./assets/fonts/Inter-VariableFont_slnt_wght.ttf); }
I also used the fallback sans-serif when declaring my font-family.
font-family: 'Inter', sans-serif;
This way if there is an issue with the 'Inter' font, it will fallback to a similar looking font.
I hope this helps.
Marked as helpful1 - P@superszoSubmitted 11 months agoP@nvallinePosted 11 months ago
Hi,
Good job on the challenge. One thing that I see in your HTML is that for the category, I would use one of these tags (h1, h2, h3, h4, h5, h6, p) instead of using a div and/or span. Semantically this is better for accessibility and you can still style the element as shown in the design.
Hope this helps,
Nate
Marked as helpful1 - P@cgebSubmitted 12 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that it looks exactly the same as the design as far as I can tell. Next time, I hope I can finish it faster.
What challenges did you encounter, and how did you overcome them?I always have difficulty coming up with class names
What specific areas of your project would you like help with?If my HTML is correct and I'm using best practices
P@nvallinePosted 12 months agoHi,
Good job on the challenge. I did notice that the box shadow isn't quite the same as the design. You can fix it by updating your CSS with the following:
box-shadow: 0 25px 25px 0 hsl(0, 0%, 0%, 0.0477)
If you are able to access the Figma file, I was able to find the values here: Desktop > Group 3 > Rectangle. Using HSL also stays inline with the other colors.
I hope that helps.
Marked as helpful1
