Mobile first approach created Recipe-Page

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

Better structure

• With the next project I will try to identify all similarities and differences between the elements and try to style them in a single rule, where possible. It could reduce the amount of editing of css file in a long way. After I've made my last commit, I've deleted another 25-30 unused lines of code.

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

There was different challenges I've encountered and all of them was funny to overcome. For example:

• Creating borders for the table without setting its border-collapse set to collapse property. It does not work then.

• When I used line-indent on the list-item text within this item is getting moved to the given direction, however the next line of the text starts a bit left from the first line. I've tried several properties, but the only way I've achieved desired results was setting padding-left: 1rem on element. Jap, so easy.

• On the desktop and mobile version the image is looks differently. Mobile uses the full width of the page, where desktop version encloses it within a parent element and applies border-radius on it and so on. Solution I've used here is two different images with display properties set to hidden when needs one, and revealing it when it needs.

Overall it was very interesting challenge to overcome

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

Always excited about writing semantic HTML and CSS classes naming conventions. I will welcome any feedback regarding these.