ChristianM• 110
@DevXtianM
Submitted
P
Srishti Chaudhary
@itsmesrishti
All comments
- PSrishti Chaudhary• 110
@itsmesrishti
Posted
Hi,
Great work on getting the design so close to the original!!!
Here are few things you might want to consider while working on your next project or if you want to improve this one:
-
$Light-Grayish-Blue; avoid naming your variables on the basis of color names use names like primary-color or heading-color because what if you change the colors then you'd have to change the variable name as well.
-
There are still places where you have used px values consider using rem (even for media queries). It is considered good practise to use rem for media queries.
Again, great job on the project!
0 -
- PSrishti Chaudhary• 110
@itsmesrishti
Submitted
What are you most proud of, and what would you do differently next time?
I'm happy about the banner images and how I used background properties to deal with them. Not sure if it was the best approach or I should have added them using html.
I would like to write better css next time and have a proper arrangement for scss.
What challenges did you encounter, and how did you overcome them?
I was struggling with finding out the best approach to add the banner images. I thought maybe I should add them using or maybe image-set but I wasn't sure and I wasn't able to achieve what I wanted so I just went with adding them using url() with background-image and then using media query to replace the image.
What specific areas of your project would you like help with?
I would like help with this banner project thing what would have been the best apprach. Like should i have added them in html and then used media queries or maybe use or srcset or image-set?!
PSrishti Chaudhary• 110@itsmesrishti
Posted
@rupali317 Thank you for the feedback!
You're right if I used em it would have scaled better and I wouldn't have to use this many media queries!
I do use a very basic three line reset but maybe I should look into it more!
Thank you for the thorough feedback! I'll apply the tips you gave in my next project! And thank you for sharing the resources as well!
1 What are you most proud of, and what would you do differently next time?
This is my first landing page so im so proud that i finished it
What challenges did you encounter, and how did you overcome them?
A lot of challeges i found here but i still make it
What specific areas of your project would you like help with?
Open for suggestion!
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hey, great work on the landing page and kudos for finishing it!
The only tip I have is maybe consider using <section> tags for grouping together a section. It would help with semantics.
Again great work on the page!
0- Carsten Körner• 170
@carstenkoerner
Submitted
What are you most proud of, and what would you do differently next time?
The actual realization was not difficult at all. But the exact implementation of the design was a bit tricky. I'm pleased that I still managed to get it very close to the original.
What challenges did you encounter, and how did you overcome them?
No challenges this time.
What specific areas of your project would you like help with?
-/-
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hey, great work on getting close to the design and the semantics and css look good as well!
The only thing I'd say is that you set grid-column and grid-row for all the testimonials which isn't really required?! Setting these values for .jeanette and .jonathan could be avoided.. they aren't really needed and this is just adding redundancy since the job is by default being done anyway you know what I mean?!
And there's also a shorthand property for setting values for grid-column and grid-row together called grid-area so maybe you might want to check that out.
Again great work and your scss files look pretty great as well! "I still have so much to learn" that's what I thought when I checked them out 😅😅
0 - HamzeKabi• 100
@HamzeKabi
Submitted
What are you most proud of, and what would you do differently next time?
I used flexbox for mobile version and css grid for desktop version.
Before starting the project, I assumed this transition in layout would be a big hassle, but contrary to what I expected, I applied this transition with ease.
I'll be using css grid more
What challenges did you encounter, and how did you overcome them?
Converting single column(mobile version) to multiple column(desktop version). I overcame it by using flexbox for single column and css grid for multicolumn version.
What specific areas of your project would you like help with?
I used flexbox for single column and css grid for multicolumn version. I'm curious to know what methods others have used.
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hi, great work on the project! The only tip I have is that for feature card you could consider adding a max-width and a min-width so that the design stays the same across various devices. Other than that great work!
I was looking at your html and I saw that you used <h2> tags for the main heading I wonder why?! Were you considering this as a section of a whole website?
For my own project, I wanted to restrict myself to flexbox only for the desktop as well so I used flex-wrap and max-width and switched the order of a card.
Again, kudos for accomplishing the task successfully!
0 - Salim TOURE• 240
@limsael
Submitted
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hi, pretty good work on getting close to the design! Here a few things you could consider to improve the project or maybe apply them for your next one!
-
I see that you have used the font names but you have not loaded the fonts. You could link the google fonts and select the apt font-families and they'll give you the link codes just paste them in the head section of your html. Also when using css to set fon-family we should also provide a fallback font like serif or sans-serif along with font-family name so that if your font is not loaded the browser will use the apt font that fits your style.
-
For the image I think you should go through the resources FEM provided in the previous chapter so that you can load the different images correctly. They recommend using picture tag or srcset attr depending on the needs. Go thorugh it and do what feels right to you for the project or the coming projects.
Again good attempt at the project! Onwards and upwards!
0 -
- PSrishti Chaudhary• 110
@itsmesrishti
Submitted
What are you most proud of, and what would you do differently next time?
I think that I'm proud of getting close to the design.
What challenges did you encounter, and how did you overcome them?
I really struggled with figuring out the correct tag for preparation time section. I was thinking of using tag but thought maybe it won't be apt for this so ended up using section tag but then the heading for prepartion time was smaller compared to other hedings so had to use for that but then that would mean having an tag before so I put prepation time section in the end in html and then used css to bring it at the top.
What specific areas of your project would you like help with?
I would like help with the preparation time section how could i have done that or did I do it correctly or not?! And also the semantics of other things as well.
And also the image thing for mobile I used media query to make position absolute was that the right approach?!
PSrishti Chaudhary• 110@itsmesrishti
Posted
@rahulkumar215 Hi, first of all thank you for the thorough response! And now that you mention I can see how that part sounds confusing. I sort of started rambling during that part😅😅.. I'll word my problem better next time!
I was trying to ask about whther I could have used aside tag for the preparation time section.
As to why I used article tag, I thought that since the recipe page is like an independent, complete content on its own so it might be apt to use article tag.
I knew something was off with using position:absolute. It wasn't the best approach for this. The appraoch that you suggested sounds so much more better and more instictive to deal with the image. It's so simple and I made mine so hard! 😅😅 Thank you for sharing the code as well that helped too.
I'll keep your tips in mind for the next project! Thank you so much for spending your time looking through the code and giving a thorough response!
1 - Patricio Zarauz• 140
@PatricioZarauz
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of using mixins in my scss, which enabled me to prevent code duplication. Also I'm of making the site as accessible as possible (with my current knowledge)
What challenges did you encounter, and how did you overcome them?
The main challenge I encountered was creating the custom list items, which I overcame by doing some research.
What specific areas of your project would you like help with?
I would like to get some tips on how to make this site/code even more accessible and also some tips in order to improve my scss file, other than separating the scss into multiple files.
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hey, great job on bringing your design so close to the actual one!
The only tip I have that might help with accessiblity is to maybe consider presenting heading tags in a sequential order like without skipping levels so <h2> before <h3>.
Again, great job on the project!
1 - Juan• 30
@JuanTwoFour
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud that my css is getting better and better.
What challenges did you encounter, and how did you overcome them?
No real challenges with this project, i understood the assignment perfectly.
What specific areas of your project would you like help with?
As always would love to get opinions and suggestions on how I can improve.
PSrishti Chaudhary• 110@itsmesrishti
Posted
Good work on getting your design so close to the given design! It's interesting how you could manage to make it pretty responsive without media queries.
Next time maybe you could try using media queries and adding like a margin/padding of sorts around your content so that it doesn't touch the edges of the screen.
Again good work! And I think you're in the process of learning so keep at it!
0 - CecDor• 60
@CecDorWEB
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud to finded the method to make all my page with the 100% height. Because I wanted to have the card in the middle of the page easier.
What challenges did you encounter, and how did you overcome them?
I find use the Figma conception it's difficult. It's not easy for me to find the good size for the text or padding size. I prefer use my eye to adapt a little the size.
I used to work on Title of the category. beacause i don't know why the display:inline wasn't working.
What specific areas of your project would you like help with?
I would like some advice to the conception oh the HTML. I used a lot's of class, to designate clearly the different element . But I not sure it was a good practice.
If you have some advice to adapt easier the size of my different element (text, padding).
And I don't found how can I change the style of my cursor in black color.
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hey, straight off the bat it's amazing how close you got to the design! Flexbox is the best for centering isn't it?!
After reviewing your code there is something interesting I learned from it like using <article> for blog preview card. I'd have never thought of using it for this purpose so thank you for making me think! And you are right of course <article> can be used this way.
You might want to consider the order of heading tags. <h1> should be the first heading tag and I guess for the learning label you could use something like span.
And as for your doubt regarding class names, for such small projects you can avoid giving a class name to everything. You can avoid giving a class name to <h1> because a page is only supposed to have one <h1> so just target h1 directly.
You could target h2 tags in the project without using class names as both the tags are present in different sections so just use class name of section followed by h2 (eg: .article_information h2). Again since this is a small project this h2 thing can work but maybe for bigger projects it might be better to assign a class name (like you did) to the learning tag so that if you create same style of tag somewhere else in the project for some other purpose.. you'd be able to reuse the style assigned to it. I hope that makes sense!
Again amazing work! You got so close to the design! And also thank you for teaching me something!
1 - James Dwamena• 30
@jamesdwamena1
Submitted
What are you most proud of, and what would you do differently next time?
Being able to do this after 1 week of learning
What challenges did you encounter, and how did you overcome them?
v
What specific areas of your project would you like help with?
v
PSrishti Chaudhary• 110@itsmesrishti
Posted
Hey, this looks amazing!
Maybe you can consider adding landmark tags like main or footer for improved accessibility!
Also, I'm not quite sure why you added those media queries. You have already added a background color to body globally so I feel like adding those media queries just makes the code redundant.
0
