FEM-Recipe

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

I am proud that i was able to get the page right but it is still hardly readable spaghetti code.

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

1.I was confused about structure of html and css and how to apply classes. and whether to apply classes based on components. I did not overcome that yet.

2. I did not know how to design the tables and lists to make them like in the design

3. I got confused about how to style and add classes to titles/headings.

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

Structure of the HTML, and especially CSS classes and making CSS code more readable because it is a mess- getting pixel perfect design is hard when i dont have clarity about spacing and i end up confused about whether two parts like two h3 tags have equal spacing or not.

I tried making it as close to the design as I know and can, and made the design quite functionally usable unlike some other solutions you may have seen. So please give me some solid advice and mentorship about how to structure the solution properly as I have worked pretty hard on this challenge.

1. Mobile view edges in inspector get rounded but seems like default from Edge browser?

2. My code is kinda Spaghetti code with the classes. How would you advise me to make it more readable with classes and which resource to refer to?

3. Body padding issue in mobile version.

4. Mediaquery : added the breakoff point to 400px width- is it right? Should I be using mediaquery in the first place for this challenge?

5. Should I use rem with mediaquery or pixels?

6. Span tag: How to use it? I used it to make text bold but should I be adding a class to span? Because otherwise if I use several spans I cannot use different css formatting for each. What is the correct way to use span in this context?

7. Pls give me some tips on testing the result. How can I test? Any kind of a process?