@mohammed-al-shrafi
Latest solutions
Article preview component
Submitted 28 days agoFor this challenge, my biggest issue was not being able to only have one on-click button. In my solution, I ended up doing a band-aid solution with two different buttons (original button and the popup button) which I never really resolved, partially because I started this assignment a few months ago and wanted to keep what I had initially to get properly critiqued. Any suggestions or pointers on a different approach would be a big help!
As usual, any suggestions on changing/improving naming philosophies such as how to properly apply BEM to my HTML and structuring would also be greatly appreciated.
Testimonial grids section solution
Submitted 4 months agoThere were a lot of points in the design where I had to eyeball and I tried my best on getting the coloring and shadows accurate.
I wasn't 100% satisfied with how the cards look under certain viewpoints, for example if the window was too small but just enough to hit breakpoint, some desktop view cards would be extremely elongated vertically. There are also other times where the cards have a lot of whitespace for the smaller ones.
I also noted that the style guide said to use 500/600 font weight, but I don't think the design actually used 500/600, some of the text had lesser weight to it.
Any suggestions on how to fix any of these issues and if there are any structural, refactoring, or standard practices that I should apply to my HTML/CSS would be greatly welcomed!
Four card feature section solution
Submitted 4 months agoSpecifically would like any suggestions if needed in regards to how I wrote out the svgs in my HTML. I'm aware there is an svg element but was unsure if it was necessary for this project. Would like more clarity on that. Would also like any suggestions to make my box-shadow a little closer to design.
Any refactoring or structuring suggestions to both my HTML and my CSS is gladly welcomed!
Product preview card component - Mobile first, desktop responsive
Submitted 5 months agoAny optimizations or suggestions whether it's to my code structuring or naming conventions would be greatly appreciated!
Recipe page solution
Submitted 5 months agoNothing much for this solution, just wanted to get through this to get to the next section. Feedback would be greatly appreciated still but I definitely could have used better CSS class naming instead of just using generic elements for styling.
Social link profile card with HTML & CSS
Submitted 11 months agoAs usual, would like to know if I can improve any readability or code structuring parts. Always can use help on following coding standards.
Latest comments
- @code269
Really like the smooth pop-up animation for the button on-click. Code looks really clean and readable as well.
Your mobile solution isn't what the design is looking for however, as the popup should cover the entire width of the bottom profile section in mobile screens. Solution is also missing the on-hovers on the buttons.
Great job!
- @jarthurofv@code269
The testimonial cards look great and I can see the attention to detail.
On the mobile and tablet views, there appears to be too much spacing from the top to bottom. Not sure if done purposefully but it does defer from the original design.
Other than that nitpicky detail, this was really well done! Your code is structured very well and easy to read!
- P@aokoyeWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to make all three layouts (desktop, tablet and mobile).
What specific areas of your project would you like help with?Next time I'd like to do this with grid instead of flexbox.
@code269Great job! Looks very close to design with just slight differences in spacing.
I would recommend reading into semantic HTML naming. Your HTML could have been sectioned off with semantic names such as header and main.
Also would recommend using "em and rem" for units instead of full-on "px" for best practices.
- @JoacoDvWhat are you most proud of, and what would you do differently next time?
I'm proud to use flex and make it responsive. Also from the media query
What challenges did you encounter, and how did you overcome them?The biggest challenge was on two sides, first in adapting the image to its size and then in adapting it with the query for mobile. And I solved both of them by reading the resources they left at the beginning
What specific areas of your project would you like help with?Now I can't think of what to ask for help, but if you see something to correct, let me know, thank you
@code269Typography looks perfect! Card is properly responsive. Image on desktop view is elongated vertically compared to the design due to image flexbox. The mobile view would look better / more standard if card was centered in middle.
Great attention to detail otherwise!
- @DucriaWhat are you most proud of, and what would you do differently next time?
I was very proud of the overall result, I thought it was pretty similar, what I would do differently I think would improve my organization a little
What challenges did you encounter, and how did you overcome them?My biggest challenge was in the responsiveness part, I managed to overcome it with the help of sites like MDN Web Docs.
What specific areas of your project would you like help with?I believe in the responsiveness part and a little in the positioning of the elements on the screen
@code269Design and solution look very similar! I would watch for the padding cutoff towards the bottom of the Nutrition section. Great work!
Marked as helpful - @Jhonatanjacome07What are you most proud of, and what would you do differently next time?
Realizar que sea responsivo porque no sabia como hacerlo, empezar por lo revisar que sea responsivo porque luego tengo problemas al tratar de hacer que me coincida todo
What challenges did you encounter, and how did you overcome them?Me olvide de aplicar flexbox para centrar el contenido y no sabia porque mi contenido estaba ubicado arriba a la derecha
@code269Looks good! Some colors were swapped around but I'd like to think this developer did it purposefully.
Some of the code could use a little cleanup for delivery, saw a lot of commented out code and a comment on every line of the CSS which made the file a bit convoluted.
Marked as helpful
