Tribute Page - Alan Watts - Feedback on structure

Code Feedback
1

Hello forum!

This is my tribute page to Alan Watts.

So I’m looking for any and all kind of feedback. Whether I could have simplified something or improved it slightly more, if you’ve come across something cool that would have worked, anything.

I noticed that on my iPhone 8+ the content doesn’t stretch across the screen, it leaves rather large gaps on both left and right (on safari as well as chrome) - no clue as to why :slight_smile:

My coding level is: I’ve written this 1 page so far. That’s all. I kept the design extremely plain as I was entirely focused on structure.

Tried sticking in the CSS grid as it looked really important when I was learning CSS.

Thanks in advance!

Raf

2

It looks like acceptable margins on my iPhone 7+, but i understand what you mean. Is all your CSS included in the <style>? I couldn’t compose a stylesheet URL in my URL bar to see the linked stylesheet, which is good that your host blocks me from browsing your files. If your link had been correct the I could have seen it in view source.

Based on just what’s in your HTML file I think you’re are using empty grid columns for margins. Seems like experimenting with columns should do it. I think you’re trying that. What about changing the grid to a single column?

I really appreciate the high quality HTML, but there are a few errors. If you view source in Firefox errors are red. If that is not an option then use an online validator.

  • <title> in the <head> does not get attributes like id or class

  • <style> should be in the <head> also.

  • <link rel="stylesheet" type="style.css">
    should be:
    <link rel="stylesheet" type="text/css" href="style.css">

img {
    max-width: 100%;
    display: block;
    height: auto;
    border: 100px;

Your image is in a <div> which is already display: block; so you can move the <div> around with no display alteration on the <img>. You put a huge border on the <img>, but it is not shown because border requires three parts. border: color size type(eg solid);

  • figcaption must be a child of figure not div

  • I see that the page is using international English and I am using American, but I think the spelling is still “psychedelic” and “Buddhism”.

  • I don’t see a </html>.

Looks Great!

3

Thank you for the in-depth feedback! I really appreciate it.

Yes - all of my CSS is in my <style>. I originally planned to keep a separate sheet but for some reason opted against it. I think it was because I was making a single page as opposed to an entire website with multiple pages referring back to 1 source CSS (I understand that this is the main benefit of keeping CSS in a separate file).

Thanks for pointing out the errors especially, trying to get my foundations right before I move onto anything more challenging so the above is gold!

And you’re right, I did try experimenting with the grid columns to become margins (it just sort of made sense to me). For the mobile media query I’ve placed only 1 column but still comes up much tighter than I’d expect. Even the developer-preview on firefox shows it as larger on the same display size :smile:…?