P
@Mustafa-AbdishakurSubmitted 6 months ago
P
Radu Petre Tarean
@2XG-DEVAll comments
- P@2XG-DEVPosted 2 months ago
Interesting solution!
Nice thought using different html files for the different pages.
Pages are responsive and it seems to work.
You do seem to have an issue when reaching the end of the quiz and pressing the play again button. It seems to lead to home at / but I think it should actually lead to /quiz or something similar
Overall good job!
0 - P@MattPahutaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Overall, I'm pleased with the look and feel of my solution. I decided to keep to a straightforward approach with much of the JavaScript, hopefully resulting in something that's fairly easy to understand.
What challenges did you encounter, and how did you overcome them?Styling the form, particularly the range slide, was a challenge. A lot of trial and error mixed with taking inspiration by others (as noted in the project README) helped get me over the finish line.
P@2XG-DEVPosted 2 months agoVery nice solution, style is very nice and you have paid a lot of attention to detail. Functionality wise, the code is clean, altough it does not guarantee that all of the selected users inputs are present in the password
Marked as helpful0 - @jonathanudehSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
For some weird reason the javascript parts of these projects comes easy, even easier than the css.
What challenges did you encounter, and how did you overcome them?The challenges i encountered where the layout which took me extra ours than i had planned and the cases in my javascript calculaion where the calculations where reading 'infinity' or NaN both i fixed all that. T
P@2XG-DEVPosted 4 months agoReally nice job!
In my solution i just focused on the validations a lot and that made sure that i did not have to handle those cases where the results would be weird values because the user cannot input invalid numbers such negative ones or zero.
I see your solution does not do validations at all and still outputs infinity and such, should add those form validations in.
You can checkout mine for help, overall very nice solution, styling is very good, did not know you could nest classes like that.
Marked as helpful1 - P@arfath-aliSubmitted 4 months agoP@2XG-DEVPosted 4 months ago
Very good job! Looks perfect and works! Javascript is a little bit messy but you did use an interesting strategy to build the UI at runtime. When I was doing it, I was afraid that would not show up in the preview thing but it works really well for you.
1 - P@ysm0706gleeSubmitted 4 months agoP@2XG-DEVPosted 4 months ago
Your solution seems a bit incomplete but nice job!
You should try to follow the design closer and use the button:hover attributes to add that nice hover effect with the gradient and colored box shadow in.
You can try to use javascript to get the form and not show the default browser overlay and show your own error like this
const form = document.getElementById("emailForm"); const emailInput = document.getElementById("email"); const errorMessage = document.getElementById("emailError"); form.addEventListener("submit", (event) => { event.preventDefault(); if (!emailInput.validity.valid) { emailInput.classList.add("invalid"); errorMessage.style.display = "block"; } else { emailInput.classList.remove("invalid"); errorMessage.style.display = "none"; // Proceed with form submission or further logic console.log("Form submitted successfully."); isSuccess = true; email = emailInput.value; updateUI(); } });0 - @Top-Trekx-Im-gvp-98Submitted 5 months agoP@2XG-DEVPosted 5 months ago
Nice attempt!
But you do not seem to be using the colors from the design, next time try to use a color picker from photoshop or from a chrome extension like colorzilla to get the actual colors from the design. The colors are also available in the style guide.
Also try to use better tools to measure how large they should be and try to use max-width instead of fixed widths
Marked as helpful0 - P@miedzygalaktycznygitSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Finishing first that big project
What challenges did you encounter, and how did you overcome them?Making all "media-queries" for this project. I had some hard time solving this.
What specific areas of your project would you like help with?Some advices for making websites of size of full screen, I had some troubles with positioning things on screen so they dont get totally misplaced when someone resizes his screan
P@2XG-DEVPosted 5 months agoI feel like overall you made it work.
The thing with figuring out how to layout things, is you should start with the mobile layout as that is the easiest one. From there on you need a good understanding of using both flexbox and grid. Flexbox might be "easier" but it can give you headaches.
For example with the images section that is way easier in grid, just a display grid and grid-template-column: repeat(2,1fr) for mobile and a media query with repeat(4,1fr) for tablet/desktop
Try using
img { display: block; max-width: 100%; }as part of your CSS reset in every project to make images easier to work with.
Always use the inspector tools in the browser and make sure everything fits in its little square. Always think of layouts in term of squares.
Also always use variable properties like max-width instead of fixed widths
Marked as helpful0 - @lank81Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
CSS Grid. Using Grid although a little daunting at first, especially since I've only been working with flex, quickly became clearer in how easily you can layout/design a page. I can see myself using Grid more often than not for projects.
What challenges did you encounter, and how did you overcome them?Not particularly a challenge for this project but media queries. As time goes on I get more comfortable and am able to more quickly breakout my solutions for table and mobile screens.
P@2XG-DEVPosted 5 months agoVery clean and beautiful solution. You are definitely ready for tackling more difficult challenges.
1 - @Manisha3196Submitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
I didn't encounter any major problems but i had a little bit of problem adjust the box-shadow.By trial and error i adjusted it.
What specific areas of your project would you like help with?Full code on review.Let me know what can be cleaned up, better organized, and just all around any detailed suggestions you can possibly leave me with to help make me a better programmer. Thank you for your feedback.
P@2XG-DEVPosted 5 months agoYour code is very clean and there is little to really adjust. You are using a lot of classes but in the scope of these challenges that is not really relevant. Nice use of grid. Overall very good job, think you should start doing more difficult challenges. These type of challenges are too short in scope to properly see how you handle pages with many elements, complex layouts with multiple breakpoints and such. You are ready for the next level.
Marked as helpful0 - @Jaypo16Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of my page looking similar to the example that was given to me because I was struggling with responsive design before this, but I am understanding as I practice. What I would do differently next time is slowing down and taking my time.
What challenges did you encounter, and how did you overcome them?Challenges I encountered was trying to get the correct font and colors, but I remembered about google fonts and the read.me file that's where you get the styles from and colors
What specific areas of your project would you like help with?Getting the responsiveness of the site to look more like example that was given to me I could work on that, but other than that just practice and I will continue to get better.
P@2XG-DEVPosted 5 months agoLooks nice, but always remember to use properties such as max-width to keep your content the same size as the design.
Reseting defaults like button borders with border: 0 and using display flex, align-items:center and justify-content:center on the body to center your card.
Marked as helpful0 - @PamlifaSubmitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
The first time, the omelette picture would not load after I launched it with github. I had to redo again, this time with the help .
I wonder if my network connection had anything to do with it. It was frustrating....I spent days just coding this recipe page and trying to publish it.
P@2XG-DEVPosted 5 months agoNice job but you seem to be missing some colors and not using the proper font weights. Try using a color picker from photoshop / gimp or a chrome extension like colorzilla to get the right colors if you do not have the figma design.
The text is also in another color, not black.
Also in your code, you do not need to use two img tags. You should use mobile first development. Open up dev tools ( the console) and click on the phone like icon on the top left and set the width to the mobile M (375px) and implement the mobile design first then use media queries with min-width to add the desktop layout and stylings
Marked as helpful0 - @pabl-cruzSubmitted 5 months agoP@2XG-DEVPosted 5 months ago
Very nice Job! Your work seems clean and pixel perfect to the design!
0 - @CamiloBeltran24Submitted 5 months ago
- @webdevsumanSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I shall first set the size of the object and then try to center it.
What challenges did you encounter, and how did you overcome them?I have learnt to center an object by using width and flexbox. I was previously doing that using margin. But that was not responsive.
What specific areas of your project would you like help with?In mobile when I turn screen to landscape mode, footer gets in the middle. Please help me getting it at the bottom of the page.
P@2XG-DEVPosted 5 months agoNice Attempt!
But your content is not centered, you can use display flex and align items center and justify center on a div surrounding all of the content.
Also you did not use the right font, you can see all that if you open the design in figma, and you can use a simple @import in your css to get the font from google fonts.
Marked as helpful0
