What are you most proud of, and what would you do differently next time?
No particular pride with this challenge.
What challenges did you encounter, and how did you overcome them?
I got stuck with the implementation of the JavaScript part, more particularly with the way of listening to any changes in a form without any submit button. With the help of a web developers’ community on Discord I am a member of, I learnt the input event, which allowed me to overcome this challenge.
What specific areas of your project would you like help with?
Feel free to give me any feedback for improvements in the way I refactor my JavaScript or narrow the types in TypeScript.
What are you most proud of, and what would you do differently next time?
Liked the challenge and added a few changes, when the e-mail is valid the input become green, I put the error message on the bottom and not on the top as the design indicated.
What challenges did you encounter, and how did you overcome them?
I actually wanted to make 2 html documents, one for the e-mail, the other for the message.
I'd to research how to do it using JS and found about window.location.href on MDN.
What specific areas of your project would you like help with?
Great work on the project and I like how you added the additional functionality of checking for .com and .org! Also linking the two html files thing looks cool as well.. I'd have to check it out in more detail. Thank you for teaching me a new way of doing things!
Here are a few tips you might want to consider for your next project:
a) Consider using variable names like primary, secondary or bg-color, heading-color as the specific color if changes then the variable name would still be valid.
b) Consider using rem values for the media queries as well. It's considered a good practise. like @media screen and (min-width: 64rem) {}
Again, great work on the project and kudos for adding additional functionality! Onwards and upwards!
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.
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?!
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?
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 😅😅
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.
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!
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!
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?!
@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!
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.
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>.
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!
