Expectations V Reality

For such a simple design, I am having a hard time getting this formatted properly when coding the actual landing page. I had to restart because I felt like I was crowding the code with divs and writing WAY too much CSS. I went with flex to avoid over complicating the code and it was not working as expected. Any advice on getting the elements to line up nicely?

Comments

[JC Smiley]

I want to start with a reminder that this type of hardship is what helps you become a better developer. You now know where you need to focus your attention.

I do agree that Flex-box is a great resource to solve this issue. Whenever I’m stuck on Flex-box, I use this resource “css-tricks.com/snippets/css/a-guid....

1. My first thoughts on this issue is to break down the project into layers.
2. Create a fixed size box with two equal halves that is centered on the page.
3. Add an image to the left side box.
4. Add all UI elements (no styles) to the right side box.
5. Use flex-box to position all those UI elements.
6. Add styles to the UI elements. Start from top to bottom working each element separately.
7. When finished and after committed to git, reflect over the CSS on what can be condensed down.

One last tip, the CSS styles margin & padding is your friend. I hope this points you in a good direction.