things i wish i knew as a 15 year old web designer

a collection of different html/css/website tips i've learnt over time... i figured that it might help someone, and if not it's still a list of things to consider myself.

these may not be 100% to the specification correct as i am far from an expert, but they work.

IMAGES/BACKGROUNDS:

• you can specify both a background colour and url. if you make the colour a similar one to the background, the loading will transition nicer and avoid eyestrain when loading in dark backgrounds.
• ^ this goes doubly so if the image is big, but background images should ideally be resized down so they load in quickly, and photos converted to jpgs or gifs where possible.
• if your image is not as wide as the page, 'background-size: cover;' can force an image to cover 100% of the container/page anyway. you can see this in action on this page. it works best when fixed.

body {
  background: #000000 url('bg.png');
  background-size: cover;
  -webkit-background-size: cover;
  }

• this code is a lifesaver- it will stop images going outside of containers if they're too wide. i personally use it in my global css since i can't think of any reason not to use it.

img {
  max-width: 100%;
}

• if you have a side image that's not meant to overlap the content, using 'z-index: -999;' on the container it's in will stop it overlapping the content (and allow you do cool box-over-image effects)
• if you have an image overlapping content, try to crop them as finely as you can to prevent links being unclickable due to empty image space.

LAYOUTS/ELEMENTS:

• using html5 semantic tags like <header> <footer> <nav> <main> <article> <section> can prevent div soup. though... it's not considered html5 correct unless they're used for what they're named.
• this code can make the scrollbar appear at all times, so content doesn't shift left or right depending on page length:

html {
  overflow-y: scroll;
}

• percentages are very difficult to use without them breaking completely differently on other computers or making it unreadable on mobile. resizing the window or using a tool like this multi screen test can help you quickly tell if this will happen.
• you can attach classes to anything, not just divs! <p>, <a> and <span> classes can help wth fixing spacing without needing to involve divs or <br>
• you can attach multiple classes to a div! eg, <div class="center title">- both .center and .title can be styled differently, and this div will combine the traits. this is how most templates like bootstrap work!
• tags such as <h1> - <h6>, <div> and <hr> display as block by default- therefore, they don't need to be surrounded by <p> tags.
• if multiple elements share the same styling, you can save space by writing it like this:

li, .example1, #example2 {
  margin-right: 50px;
}

FONTS:

• many fonts only display on windows but not on mac, like ms (p)gothic and ms (p)mincho. ensure you have a nice fallback font if you use these! this is done like so:

body {
  font-family: MS gothic, arial, sans-serif;
}

• even if you import a font yourself, sometimes they will just not work on other computers for seemingly no reason. also use a fallback font for these! well, they're good to have in general.

MISC:

• to have your url look like 'voyager.neocities.org/home/' instead of 'voyager.neocities.org/home.html, you must make a folder with what you want the page url to be. if you make a file called 'index.html' in that folder, that index file will show up with the clean url.
• adding '!important' after a line of css styling will make that line prioritised- use this with caution though, as it's easy to get jumbled with it. i find it less useful for neocities and more useful for adding custom parts to toyhou.se themes. eg.

body {
  font-family: MS gothic, verdana !important;
}

USEFUL WEBSITES (GENERATORS)

• CSS gradient - one / two
• CSS scrollbars - one
• image borders - one / two
• image maps - one

USEFUL WEBSITES (COMPATABILITY)

• multi screen test - allows you to test how your site will look on different screen resolutions.
• HTML5 please - check if certain elements are widely supported yet or no longer html5 compatable.
• shouldiprefix - check this to see if you need the little -webkit-, -moz- or -o- extensions on things
• the w3c validator service - while perfectly valid html5 is not too important, using this can help you spot issues with your code
• stack overflow - the most useful website known to coder, if you have an issue then the solution to it is probably on here

USEFUL WEBSITES (FONTS)

• google fonts - embedabble fonts. for when you want something more exciting than arial, without having to host it yourself
• webfont test - compare google fonts and webfonts, and test how they look as both title and body
• css typeset - test line height, font-spacing, size and other settings on webfonts. no embeddable font support.
• hosted fonts by tentacool - neocities sites with some embedabble fonts, mostly handwriting and artsy ones.
• dafont / 1001fonts - thousands of free, downloadable fonts. be sure to check if credit is wanted, though