My tribute page: Jack London. Feedback please

Code Feedback
1

Hello! I finally got this project to be somewhat presentable. I couldn’t decide who to do this page on, but my wife and I visited Jack London State Park and it was really nice, highly recommend. So I chose Jack London.
Anyway, I am somewhat familiar with HTML and CSS, and somewhat familiar with Bootstrap. With that said, I have never used or even heard of flexbox before this course so I challenged myself to make a responsive site using flexbox and no bootstrap. The biggest trouble I had here was getting the content to wrap properly. In fact, I never actually got it the way I wanted, I just made some hacks to keep the text from stretching too wide and keep the layout looking fairly clean. What I wanted was to have a break point in the center to switch from 4 column to 2 column, as well as the pictures. The text jumps immediately from 4 to 1 column unless I set a max-width to which it kinda worked but it was really messy. The same issue I had with the pictures. I solved this by allowing the 4 columns to squish a little extra and set a wrap in the largest breakpoint that could still allow the text to stretch nicely without being too wide or too skinny for the screen size. An attempt to elegantly switch from 4 columns to 1…

Tribute Page

Thanks for taking the time to look :slight_smile:
edit: fixed link

1 Like
2

Hi @MrEidsen, welcome to the forums. Your page looks really good. Just a couple of things you may want to revisit;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • Duplicate in CSS you can fix
  • You may have noticed that your fonts are not being used. You’re trying to set global variables but CSS doesn’t support variables. You’ll need to use a preprocessor if you want to do that.
3

Ah thank you for pointing out the codepen particulars, I’m not very familiar with using it. And also thanks for pointing out the fact that I copied and pasted the wrong css. I forgot to switch to the processed css file before doing that. I will fix that issue when I get home from work today.
Thanks again :slight_smile: