Hi there!
I’m hoping for a little feedback on my tribute page project. It took the better part of an afternoon to put it together and is somewhat minimalistic. I wanted to avoid gaudy colors and let the font and layout be the central aspects of the design.
Please let me know what you think, what I can improve, etc. This is my first project on FCC and I had SO much fun creating this.
Thank you!
It looks very good.
I only have two thoughts.
First, I might consider shrinking the width (and centering) so you don’t have such long lines to read. This is especially true in the timeline. I actually like to do that for the whole page with something like this so I might go:
body {
width: 80%;
margin: 0 auto;
}
Just to keep it away from the edges. Then I might to the same on text-container class.
.text-container {
padding: 30px;
width: 80%;
margin: 0 auto;
}
and I might bump up the size of those timeline entries. To me, that’s easier to read.
.text-container > h3 {
font-size: 28px;
}
Of course, this slightly screws up your last section, but that would be easy to fix.
The other thing I’d say is that you should be careful about messing with the styling of text links. People have grown very used to those colors and effects. When I was checking your page and mentally going through what I could remember of the user stories, it took me a while to find that link. I know designers sometime panic that they will damage their aesthetic, but standards exist for a reason.
Just some suggestions. But all and all, a great job.
Thank you for taking the time to look over it and leave a comment.
I made some changes along the lines of what you suggested, and I agree, it’s now a little easier on the eyes. The text links stand out a bit more, too. It still looks like a garbled mess on mobile devices, so I need to look into that.
If I could ask about the code itself, is it considered bad form not to have html, head, and body tags? If I add a head tag, what would be proper to keep inside of it? Just the title? Is this so that search engines can properly index your web pages?
Apologies for the questions; I just feel like I sort of used slapdash methods to put the website together. From what I gathered from the FCC exercises up until this point, it’s a good idea to keep pretty much everything in a div of some sort, for the sake of flexibility, so I tried to do that. Other than that, I wasn’t quite sure how to organize my HTML.
Thanks again!
No need to apologize for asking questions - that’s why the forum exists.
is it considered bad form not to have html, head, and body tags?
Yes, you absolutely, always need html, head, and body tags. Always. Errr… unless you’re in something like codepen and then you definitely don’t need them. Codepen is an artificial environment that holds your hand and takes care of some things behind the scenes. Ordinarily you would put html tags to identify it as html, but in codepen, everything in the
html pane is by definition html so it is redundant. In a head tag you would put information about your app that you don’t need to appear on the screen. Yes, the title, but also meta data (you mentioned search engines) and it’s common to link to external CSS and JS files there - another thing codepen makes unnecessary - but these could also be put in other places in the file You also don’t need a body tag in codepen - the only thing codepen wants you to put in the html pane is what would go in the body anyway to the tag is redundant.
So, none of those tags are need in codepen and actually get in the way. And with a “real” web page, they are technically not needed, but it is considered improper to not have them and may cause problems in some cases.
If you want to see what your codepen app would look like in the real world, go into your edit view, and in the lower right corner is a button “Export”, select “Export .zip”. This will give you a zip that you can save and extract locally that will set up the same app to run on your computer, setting up a very basic file structure and put the html, head, and body tags where they belong. This is a working app - double click on the main html file.
Saving it locally is a good idea to do anyway, to save your code. And it wouldn’t hurt to start saving your finished apps on github anyway.
Another way to see how “real” html is constructed is just to go to any web page, right click and select “inspect”. This will show you the actual HTML from the server. For many sites, this can be dense and be information overload, but it can be interesting to do, also.