page is currently up here
looking for feedback about the layout, formatting, anything a beginner is likely to miss!
3 Likes
Well, it’s a start! All clean and readable. The background image takes a noticeable time to load on a fiber connection; good thing it’s just fluff. Mobile support and light mode would be nice to add later. Can’t say much more before there’s at least one blog post and/or image in the gallery, but the basics are there.
4 Likes
the green font hurts my eyes a little with the dark bg but that might be a personal issue aha. otherwise the layout itself is great and clear, you can keep it minimal just like that or throw on a little more pizzazz maybe with borders? its up to personal taste. lookin good so far!
1 Like
<p>@ <a href=https://jayandelle.neocities.org>back to home</a></p> <!-- i dislike hard-linking like this. it feels like poor practice. if anyone's snooping and has a better way of doing these sorts of "back to home" links, drop me a line! -->
You can link to / which is the root so it will go to the main page.
Just to be clear, the link would be
<a href="/">back to home</a>
5 Likes
Not at all a bad start. Layout and formatting seem fine. Personally, I’m a fan of perpetual dark mode and mono fonts, so I could be biased, but I think you’re on the right track.
It’s definitely not mobile-friendly, but it’s up to you to decide if that’s important or not.
1 Like
@HisVirusness, I had also noticed that it’s not at all responsive on mobile devices. If that matters to you, @JayAndElle, you could start by adding this line in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your browser should have a “Responsive Design Mode” that you can use to get a feel for how your pages might look on a phone.
3 Likes
So white space doesn’t show on big screens and so the background won’t flash white before the image loads:
body {
background-color: black;
background-size: cover;
}
So pages that aren’t yet ready don’t show add hidden:
<p hidden>@ <a href="/pages/friends.html">friendly folks</a></p>
3 Likes
seems solid!
layoutwise: the empty rectangle of space under the links box feels a bit bothersome since it’s otherwise a quite compact and tidy layout. otherwise, i think it’s perfectly fine.
personal preference stuff:
- i’d prefer a slightly smaller header text and a bit more padding on the boxes - the header has a lot of elbow room but also is on two lines, which feels kind of unbalanced, especially with how slim the padding is on everything else.
- the color scheme isn’t my favorite; the background image is very warm and the blues feel a little out of place on top of it. esp since the character portrait in the top left is also more warmish colors. a deep purple/maroon would give it a more visually harmonious look. alternatively, if contrast is the point, i think some distinctive high-contrast borders on the boxes would help them stand out more
- the white background on the character icon stands out a lot! i’d give it a border that matches the box background color to help it fit in a bit better.
something a beginner might miss… well, you can customize the scrollbar color if you want to! i like to do that, i think it really adds some extra oomph to a page. adding * {box-sizing: border-box;} to your css can be really helpful if you’re finding margins and box widths and padding fiddly to deal with. it’s hard to concisely explain so here’s the w3schools page about it haha
1 Like
that is cool… how did i not know this lmao…
2 Likes
A couple of things:
Instead of using position: absolute to keep your side bar from pushing the main content down, use CSS grid layout to split the page into columns. You’d need to wrap the main content in another <div> for that, but that’s a lot cleaner than absolute positioning and using margin to avoid overlap.
I noticed you have <br> tags between paragraphs. Presumably this is to increase spacing between paragraphs. Why not just increase the margin of <p> instead? You could also be fancy and set your <article>s to display: flex; flex-direction: column; and use gap to space them, but that may have other consequences you don’t want.
In general, best practice is to have your HTML only provide the structure of the content and use CSS for all styling. When you find yourself inserting extra HTML tags to make things look how you want, that is a signal that your CSS could be improved.
Otherwise, the site looks great. A lot better than my first website.
1 Like
It’s the same general concept as:
<a href="/local-page.html"><img src="/images/image.png"></a>
1 Like
yeah that makes total sense LOL im slow to pick these things up ahah
makes me want to make a “distractions” page too 
3 Likes
Hi there! I’m pretty new to web dev too but just wanted to confirm that all your links are correct and didn’t run into any error pages!
2 Likes
Or use margin-block-end for all but the last <p> element.
i’ve since updated the site (twice), feedback is certainly still appreciated of course!
1 Like
It looks good so far. Nice job making your first website!
It looks like you’ve already gotten lots of great feedback from others. Your site seems to work fine for me on Safari. Resizing to the smallest width I can seems to work as expected.
1 Like