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
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!
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
<style> should be in the
<link rel="stylesheet" type="style.css">
<link rel="stylesheet" type="text/css" href="style.css">
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
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
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 …?