TOP Landing Page
section https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
buttons https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
learned a new VScode shortcut, multi-line cursor edit. place my cursor anywhere as much as I want and make multiple edits at the same time. very neat!
Each section should be 100% width and most of the content 70% width of the section. Can't figure out how to set it. So far, tried width: 70% with CSS
I am going to try to layout one section with only flexboxes. Took a picture into Inkscape to draw boxes around the content. First section has 5 boxes.
justify-content: center; was not working and I did not understand why. Finally, I tried align-items: center; and it worked exactly how I imagined. Broke down the problem into a bite size chunk, and found the step that got me over the threshold.
Vscode shortcut: delete line (ctrl + shift + k)
Section two had a div wrapped around each image with text underneath. Flex-wrap and a defined width allowed this to happen.
Almost forgot about inline style for HTML tags. Saves a few lines in the style.css file.
Align-self was nice to use for the button in the call to action. Wanted to center the button with the two p tags.
Overall, this was a really good test of my flexbox skills and what I know so far. I have come a long way since I first made a container and a few flex items to move around a webpage.