P
@loiccape
Daniel
@DAJ350All comments
- @DAJ350
Hey, well done on completing this challenge. Looks like you've grasped a number of important concepts well.
I noticed you haven't implemented a method of carrying over the inputted email value to the success page and displaying it in the text. This was quite a tricky one.
In my attempt to overcome this, I learnt about
localStorageandsessionStorage. You may want to take a look into these objects and learn of how to use them to store and retrieve data in your code.All the best, Happy coding!
Marked as helpful - @Ejiro-FrancesWhat are you most proud of, and what would you do differently next time?
I have added to my coding vocabulary and I have learnt a lot from this project.
What challenges did you encounter, and how did you overcome them?Writing the javascript was a challenge, I checked google for ways to understand function declarations.
The media query sizing was challenging as a bigger laptop screen meant disaster for the wardrobe image. I set a max width to combat this.
What specific areas of your project would you like help with?I would like feedback on my code.
@DAJ350Well done completing this project!
JavaScript is one of the more difficult languages to learn in comparison to HTML and CSS. To help you get more familiarised with it you can complete the free course provide by Codecademy.
I see you have used Sass which is great! Becoming fluent with a preprocessor can help you reduce your time spent on styling.
Marked as helpful - P@Igorsimic1988@DAJ350
Hey, great job completing this challenge!
If you decide to revisit this challenge for improvement, I recommend attempting to add the active states!
You can add active states by using pseudo classes such as :hover. Check out :hover MDN documentation.
Happy Coding!😃
- @Alingggg@DAJ350
Hey, great job taking this coding challenge on. You done well getting your project to look as close as it does to the design.
If you decide to reattempt this challenge, I urge you to attempt implementing the background pattern in the purple card. You may want to take a look into properties such as the z-index, position and offset properties for it.
Nonetheless, great job and happy coding!
- P@Igorsimic1988@DAJ350
Hey, great work attempting this project!
I was impressed by your approach to recreating the card container layout. Just goes to show just how useful Flex-box can be.
If you were to look into improving this code, I'd suggest revisiting the dimensions of the card as well as the passive white space around the text in the header. You want to try and get it to match as closely as you can to the design. To give yourself a challenge, perhaps reattempt creating the card container layout with CSS Grids.
Well done, once again. Happy Coding!
- @rehmali@DAJ350
Hey, great job attempting this challenge! You have shown a great understanding of the fundamentals of structuring content with HTML and adding styling with CSS.
I noticed that when viewing the project on a desktop, the dimensions of the preview card seemed better suited for mobile screen sizes. Perhaps taking another look into the styles you have added to your media queries and the media features you have set could help you better optimise the responsive design of your project.
If you would like to brush up on media queries, here is a great resource for it.
Happy Coding!
- @Luka-998What are you most proud of, and what would you do differently next time?
I learned displaying flex more efficiently and learning how to center child elements more properly, with less code. Also proud of using much less thank in previous project.
What challenges did you encounter, and how did you overcome them?Biggest challenge was organizing last part of this page, which is nutrition info. Because i used more than it is necessary and that complicated my solution.
What specific areas of your project would you like help with?With table organizations, inline elements.
@DAJ350Well done learning about how to use flex to center child elements! You will find that's going to be a very convenient tool for positioning and sizing elements in a responsive manner moving forward.
I great step to improving this project would be looking into how to better match the font to the design file provided. There are a fews ways to do this. I'd advise taking a look into how to use websites like Google Fonts or Adobe Fonts or even how to use the @font-face property in CSS.
MDN @font-face documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Marked as helpful - @arpan62825@DAJ350
Hey, great work getting your page as close as you did to the inital design! I also noticed your use of box shadow and transitions which gives the buttons a nice feel to them 👍.
I did notice however that the size of the card does not respond to the screen / viewport width. I'd recommend using a responsive design technique such as media queries or clamp to achieve such a responsive design.
Here is a resource you can use to learn about responsive design:
URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Why It's Great: MDN provides thorough, well-documented guides on the fundamentals of responsive web design. It covers the core concepts such as media queries, flexible grid layouts, and responsive images.
Marked as helpful - @44437@DAJ350
Hey! Great job with the designing of the preview card. When viewing it on the site, I noticed that you can not see hover/focus states for the interactive elements on the page.
I'd recommend looking into the transition property and the cursor property to help you with implementing these states on your page. Happy coding!
- @ayx234What are you most proud of, and what would you do differently next time?
I'm proud of deploying my first website using Github.
What challenges did you encounter, and how did you overcome them?Matching the design's measurements was not straight forward. I used trial and error to approximate the solution.
What specific areas of your project would you like help with?I'm not planning on using Figma. Are there tools or ways to measure margin, letter spacing, etc... from the design images?
I would also appreciate some feedback on mistakes I might have and what can I do to improve my code?
@DAJ350Hey, great work on this project! You have used Semantic HTML quite well. I am also impressed by the use of the custom CSS properties. I plan to try this out on my next project.
To answer your question about measuring margins, letter spacing etc...
You can use design software like Photoshop, GIMP, or Paint.NET, which have built-in rulers, grids, and measurement tools to get pixel-perfect distances between elements.
How to Use:
- Import the JPG file.
- Use the built-in ruler or grid tools to measure margins, padding, letter spacing, etc.
Many tools allow you to drag guide lines to measure pixel-perfect distances.
Hope that helps.
Happy Coding!
Marked as helpful
