All comments

• 

  Linda Jensen• 80

  @lindajensen

  Submitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I'm not sure I'm proud of anything in this project. I struggled a lot and I couldn't even get it right. I mean it looks fine I think, but it doesn't look 100% the way it's suppose to in mobile view (the image isn't right) and the table isn't completely right either. But this was my first time working with tables and like I'm guessing that's what it was suppose to be because it says "The table below shows [...]", but I couldn't get it to look just right.

  I hadto redo the challenge because the first time I created it desktop-first but that did not pan out so I guess if I was to redo it I would have followed my gut and used a mobile-first workflow to begin with.

  What challenges did you encounter, and how did you overcome them?

  I encountered a lot and it really made me feel like I'm not good enough and that maybe I should do something else with my time. Sometimes I'm kind of hard on myself and I mean I haven't even been coding for more than 9 months. But the first challenge I encountered was making the site responsive when going from desktop-first so I just commented out all my CSS and did it mobile-first and then reusing the code that still worked.

  The second issue was the image in mobile view. No matter what I did I couldn't get it right. I didn't really overcome it. I just decided that I needed to move on. Looking back at it I'm realizing that I could have posted a question on Discord so I think that's what I'll do next time.

  The third challenge was the table. And I didn't overcome that either. I mean I think made it look alright but it's not 100% accurate. So same thing here, next time I'll post and ask about it on Discord.

  What specific areas of your project would you like help with?

  1. The image: What was the HTML and CSS suppose to look like? How could I have made it look the way it does in the design?

  2. The table at the bottom of the page: Was it suppose to be a table? I'm thinking yes because of the use of semantic HTML, but is that correct? Could I have styled it differently? Where did I go wrong?

  

  Responsive Recipe Page using Flexbox and a Mobile-First Approach

  3

  40

  

  P

  Rahul• 30

  @c99rahul

  Posted 6 months ago

  Not bad at all.

  Coding after 9-10 months is a tough job, and getting into a designer-coder mindset takes some time. Since I'm accustomed to working with CSS and mobile-first workflow, here are a couple of points from my side that I hope could help you a bit:

  • Instead of setting padding on the parent container, you may use individual wrappers for each block i.e. the image and the content and then apply padding on them as required in the mobile and desktop views.
  • I agree that the table part is tricky here. Upon setting wider horizontal padding to table cells, I always had the cells shifting their next siblings which didn't look like the expected design. Had to perform some "tweaks" to get it right.

  Keep improving, that's the only way to grow.

  Cheers!

  0