remi's guide to making webdev less insufferable
hey you! yes, you! do you suffer with issues like
- having to copypaste the same website header for every new damn page
- not having an actual clue how to do graphic design
- just general skill issue
well GOOD NEWS because so do i,,, so here’s a few tips and tricks on how to make your webdev experience less Painful And Horrible :)
use a static site generator
srsly so one of the things i should learned about… way earlier… was the existance of static site generators…
you know how when making a new page you have to type out the whole
<!DOCTYPE html>
<head>
<title>blah blah</title>
</head>
<body>
<header>Oooh it's my cool website</header>
<!-- and so on -->
for EFVERY SINGLE PAGE
and then if you wanna change it you have to .. do the same change.. like… 20 times…
It’s Great Right
i still cant believe i didn’t find a solution to this for several years and at first my solution was “use php”
anyways, introducing JEKYLL your new best friend
jekyll is a lil program you run on your computer that takes your .html files, and with a lil bit of code that looks something like
---
title: cool page
template: default
---
or something like that for each page, lets you skip typimg your <header>
s and <footer>
s for every single page!!!
sadly this isnt gonna be a tutorial on how to use jekyll. so uhh. go follow their guide on how to use it.. it’s actually really simple..
(notably this doesn’t apply if you’re one of those peeps that make every page look diffrent. and if you are, please teach me your ways)
please validate your html
ESPECIALLY when you’re new to webdev, just make sure to run your site though the w3 validator cause,, even if you’re using an IDE or something, you’re gonna forget to close some tags, you’re gonna forget a important <head>
tag, and other similar stuff, that’ll just lead to your website having strange, undefined behaviour.
notable examples i’ve had of this:
- site working perfectly fine until i add some more content (because i forgot to close a tag)
- non-english characters showing up as gibberish (forgot meta utf-8)
Ok It’s Really Just These Two but both are kinda big deals LOL
OH ALSO PLEASE NOTE there’s a good chance the html validator will complain if you use stuff like frames, <center>
and really just any older html tags,,,, but it’s ok!!! just ignore those lol. frames are hecking awesome and so are all the other (sadly deprecated) html features and if anyone tells me otherwise i will slice their heads off
like srsly.. bring back <bgsound>
…
learn about newer css features
if you’re not the type to want to make a website that looks .. or functions whatsoever on a phone (because honestly, who cares), or you’re just plain new to all of this, you might have overlooked some of the newer css features like flexbox and css-grid… but honestly
those are lifesavers
flexbox and css-grid make layouting things incredibly simple, and if your layouting involves a lot of position=”absolute”, <center>
, or similar stuff, please consider learning them!
(not cause any of those are bad, but because flexbox opens up a whole new world of doing stuff (and usually faster!))
here’s a game that teaches you flexbox, and the same for css-grid :)
(if you don’t know which one to start with… why not flexbox? it’s my personal favourite.)
how to pretend you actually know how to design things
…or, the “remi formula” to making good-ish looking website…
step 1. pick a nice background image you found
step 2. pick a nice color that fits the background image
step 3. use those for everything also Spam Borders And Glow
ok so you think im memeing you here right but this is more or less how half my websites were made
ofc after,, several years i’ve figured out how to do slightly more funky things like
- that silly title.. header.. image thing
- those
<hr>
that look super fancy - transitions and animations (look into transitions, they’re Really Easy and can spice up your design a bit)
- despite the fact that this website uses NONE animations or transitions, lol
- further border abuse
and if ripping off my vauge ideas doesn’t help, just download 500 gifs, and realize that just using a Ton Of Images makes your website look infinitely better than any modern-ish stuff :p
where to look when you have no idea what you’re doing
if you’re ever lost, unsure how to do something you wanna do, here (in decending order) is what i try:
- literally just write a comment and pray copilot solves my issue
- a google search for “how to do x html css webdev”
- a scroll through w3schools (especially helpful if you’re looking for what specific tags, css attributes do)
giving up- a manual search in stack overflow
yeah uh,hhh,, considering installing copilot if you haven’t already.
it’s possibly the most useful tool for Any Developer Of Any Kind, as it’s basically a combination of “magic autocomplete” and “text to code/html”
use git (pLEASE)
git is basically backup for developers
it’s a lil annoying in how to use so im just gonna link this tutorial instead
but tl;dr “uh oh, i saved over my perfectly working code and nothing is working anymore! what do i do” and then you just type git revert instead and the day is saved Oh Also You Can Go Back In Time With It That’s Kinda Cool
avoid hotlinking
if you’ve ever just put an image in your website by right click-copy link to image-paste, you might have some issues.
the web is a volatile place, and sites shut down, files are moved, and So On So Forth. and if any of those happen, your image is gonna randomly disappear.
if you wanna use an image from another website, please consider downloading it and hosting it on your own instead!
copy your friends
Ok No Im Joking but if you ever see something NEAT on another website and you just wonder,,, How The Heck Did They Do it
that’s a good time to bust out the developer tools. (how to do that differs per browser, but right click-inspect element usually does the trick)
if you’ve never used these before, or all you’ve done with them is change the words on the site to be funnier, now’s a good time to get acquainted to them. you can see (and modify with changes in real time) all the html and css code on the website from here, which is very useful for figuring out how someone else did something, or for experimenting with your own sites look.
again, im not a tutorial site, so.. firefox guide, chrome guide
(sorry safari users, apples docs are too dense.. it’s pretty similar to the chrome one though, so if you read that, you should have a vauge clue on how things work anyway?)
be careful with inline styles
when you’re new to webdev, atleast, if you’re either me or my friend, you might feel the need to use inline styles for literally everything…
they’re great if you just wanna mark up one element like i did just now, but if you’re using them on every element, or copy-pasting the same inline style over and over to other elements…
Please Use Classes’s And Id’s And Separate Files For Your Css In General
footnotes
i know the last one might seem a Lil Obvious to some of you.. and so have probably a few others here…
but when i was all new to web developement, i was eager. every single thing i learned, i wanted to put into practice r i g h t t h e f l i p away.. and so i did!
sadly, that lead to some bad code, and some habits that stuck around for way too long, due to me learning enough to just do what i wanted to, but not enough for me to do it well…
but hey, it’s alright, because those things can be fixed :)
<- what!!!
oh also there’s this page by sadgrl that has a ton of other useful tips!!!