@Top-Trekx-Im-gvp-98Submitted 16 days ago
P
Radu Petre Tarean
@2XG-DEVAll comments
- @2XG-DEVPosted 16 days 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 - @miedzygalaktycznygitSubmitted 24 days 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
@2XG-DEVPosted 20 days 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 24 days 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.
@2XG-DEVPosted 23 days agoVery clean and beautiful solution. You are definitely ready for tackling more difficult challenges.
1 - @Manisha3196Submitted 24 days 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.
@2XG-DEVPosted 23 days 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 24 days 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.
@2XG-DEVPosted 24 days 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 24 days 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.
@2XG-DEVPosted 24 days 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 28 days ago@2XG-DEVPosted 26 days ago
Very nice Job! Your work seems clean and pixel perfect to the design!
0 - @CamiloBeltran24Submitted 26 days ago
- @webdevsumanSubmitted 28 days 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.
@2XG-DEVPosted 28 days 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
