banner

remi's guide to making webdev less insufferable

hey you! yes, you! do you suffer with issues like

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:

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

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:

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 :)

wh,at. <- what!!!

oh also there’s this page by sadgrl that has a ton of other useful tips!!!