What am I doing right/wrong? How can I make it look less like it was made in 1998?
Welcome to the forums @bucky_webb. Your page looks good. Some things to revisit;
- Run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors. - In addition to being used incorrectly in the ordered list, you do not want to use the
<br>element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs - Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
“american britttany rescue” is not accessible
The image does not display. And when I copy/paste the URL for it I get a “url has expired” message.
You can search and find places that will host your images for free.
Styling is hard for a lot of people. It’s a different skillset. The ones that write the code are usually not the ones that design the page. I’m no expert but some things you can look at;
- Pick a font. Even just default
font-family: sans-serif;is better than a serif font on a web page.
Google fonts has a good selection of fonts you can use on your page. You may have to research to see how tolinkthe font in HTML orimportthe font in CSS but it is not hard. - Look into what a universal selector is in CSS and use it to possibly remove the default margin and padding imposed by most browsers.
- Add some margin and/or padding to your different sections so that they don’t butt up against each other and it doesn’t run the width of the screen.
- Maybe soften the colors a little so there’s not such a harsh contrast between the two.
Again, styling is hard and it’s a completely different skillset from coding.
You can get a lot of people telling you how they’d style the page and if you try and implement them all you’ll never move on.
A few of the minor things mentioned above will make your page look a little better.
Have fun. Look forward to seeing your next projects.
Okay, I got rid of the <br> , <u>, and <hr> tags and used CSS to replace them.
I attempted to make my link text more accessible.
I made an image hosting account(I had a feeling my original Facebook URL would end up causing some issues but wasn’t sure).
I added a couple of fonts just to mix things up a bit.
I added some margins, padding, and borders to make the spacing and separation a little better.
I adjusted the colors a tad to make them a little less contrasting.
Overall for a first project I am way happier with it after using your tips. Really the only thing that I am unhappy with is how my “Most Wanted” list reacts to resizing the screen. I like how it is when the screen is larger but when I drag to make the screen smaller my list items stay the same distance from the left but move closer to the edge on the right side. My goal is to have the overall list stay centered while keeping the items(numbers) aligned with one another. I’ve played around with margins and padding and alignments but haven’t been able to figure it out. Any help with this would be greatly appreciated.
Hello Bucky, I’m by no way an expert on html and styling, but I’ll try to give you some personal suggestions on things that I think can make your webpage better…
I’ve seen your previous attemp and surely it’s better now, but I think there’s still room for one final improvement. I would suggest another way on marking your link more accessible:
<p><a id="tribute-link" href="https://americanbrittanyrescue.org/about-choosing-a-brittany/" target="_blank">Visit the American Brittany Rescue</a> to see if a Brittany is the right breed to protect your back yard.</p>
This way it’s very clear where the link is heading: “Visit the American Brittany Rescue”…
Also, on the same part of your HTML, you’ve got a missing </p> closing tag. You can spot this html errors by using the “Analyze HTML” tool on CodePen. It can be easely found on the dropdown menu that appears when you click the chevron on the top right corner of the HTML code editing window, its next to the gear…
Yes, it’s definitely better now…
Well, that’s because you are using a padding to the left of 240px, so it stays fixed to that length, no matter the size of the screen (or viewport actually). To make it more responsive you should use relative length units, like % or vw. It may be less straightforward, but using absolute units like pixels adds a lot of constrains that breaks your style when trying to adapt to different viewports (without further work).
As I said, I’m not an expert and maybe a more savvy user can give us better tips about this issue. Nontheless I hope this helped you!
Thank you for your help. I fixed the missing tag and adjusted the link text again. I will play around some more with padding/margin using the relative units to see if I can get the ordered list to behave how I would like it to.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.