Week 7 Project - The Capstone Finale
This is the website for the pretend school in Colmar France. The "wire-frame" design specs were given to my Code Academy class as the website we needed to re-create for our week 7 capstone project. I have done my best to re-create the website without copying any of the code from the "inspect" link under DevTools.
The layout seemed to have six different sections; header, footer, and four sections in between (learn, practice, start, thesis).
I like websites with fixed headers and while the specs were unclear I decided to make it a fixed header. I added links to possible different pages even though none are created. I also added a link to the "home" page using the Colmar Academy title and logo image (in mobile view) as an added feature - which was especially helpful when I was testing the other links in the nav bar.
Clearly, by looking at my code, I am totally confused as to many different aspects of creating websites. The areas where I seem to have the most questions involve widths, flex boxes, and break points.
Widths: When should I be using a fixed width? How often should I be using percentages? Percentages seem to make the most sense to me, but 50% never seems to be half the page (somehow I missed the concept of what that is 50% of). This seems to be the biggest issues for me when I add images, especially oversized images. And is all this also true for text containers too? How often should I be forcing the container or image inside to be fixed to a certain dimension? It seems as if most professional websites don't actually re-size except for at a couple specific breakpoints.
Flex boxes: I tried numerous times to have as few semantic titles in my HTML and use the div's sparingly. I also tried to set my HTML up so I could reuse some of the flexboxes but the design specs (or my own code) kept forcing me to add different classes. At the same time, it just seems like so often you need to have boxes inside of boxes inside of containers. And all of these boxes, no matter what they are called (although sometimes it does matter what they are called since not all tags act just like div's), seem to have all sorts of parent-child-grandchild connections making things happen when you aren't expecting it. I feel pretty comfortable with all the different CSS terminology in flexbox-land but when you want to center something inside a box and "justify content" doesn't work then I'm just left wondering and then forced to use padding/margins to make things happen.
Breakpoints: I understand the theory behind breakpoints and have no trouble finding the numbers. To me it is more a matter of knowing how much a container should re-adjust as I am shrinking the screen or when it is acceptable for parts of the webpage to just scroll off and be hidden (you will see in my code that I have a couple sections, in particular the "aside" part, where the whole width of the page changes because of this flexbox). I couldn't figure out how to keep the whole page visible. I also couldn't get my website to work on either Android/iPhone mobile devices (though it worked on other computers and other browsers).
If anyone actually reads this please let me know. I'd appreciate any feedback, comments, or suggestions on what I did wrong, what was sloppy coding, or how I could improve. Thanks for your time.
Sincerely, TJ