CSS stands for Cascading Style Sheets. It’s important to keep the full name in mind because the way CSS works is it ‘cascades’ like a waterfall. This means your browser interprets CSS from the top of the page, to the bottom of page. A lot of beginner-frustration with CSS stems from not realizing how CSS … Read more
You put all of this effort into building a sick website, but all your irl friends exclusively use their phones, which makes everything look terrible. Hopefully this guide can help you consider some ways to make your existing layout responsive. (I always welcome feedback, let me know if this helps or what <3) I created … Read more
Disclaimer: This guide assumes you have a basic understanding of HTML and CSS. If you seem EXTREMELY lost, you might want to get some practice in first so you’re ready to take something like this on! 🙂 I’ve been wanting to put together a layout-building tutorial for a while now. I couldn’t settle on a … Read more
I’m thinking about fun old layouts, like this one from Frito Lay (fuck Frito Lay, btw), It would be incredibly difficult to create a layout like this with traditional divs, but there is an incredibly easy trick that I have been wanting to share with others! Disclaimer: This type of positioning doesn’t play nice on … Read more
The image that pops up when you share a link on Discord, Facebook and Twitter is referred to ‘Open Graph’. Because of the nature of static websites, you would need to add some code to your <head></head> tag on every page that you want this to appear on. For this reason, many people only use … Read more
I used to avoid using flexbox because it was an ‘unknown’ to me, but over time I used it and realized how actually simple it is compared to grid (imo). It’s frustrating that one of the best known guides is very complete but super overwhelming for a beginner! Do you know basic HTML and CSS?Are you comfortable … Read more
Uploading your own font Websites like 1001fonts and DaFont have lots of fonts that are free to use (but make sure to read the licensing requirements for whichever ones you choose to use). Identify one you want to use on your website, and download that font. Downloaded fonts usually come in zip files, but you only need to upload … Read more
Do you ever lose track of which hex code represents which number? You can keep better track of your colors or any other CSS value with root variables! Root variables should be placed at the top of your stylesheet. They are declared with the following syntax: Now, in order to use the variable, put your … Read more
What is CodePen? CodePen is a website that lets you test your HTML and CSS code in real time. That means you’ll be able to see your changes the moment you make them. This makes CodePen a valuable tool for learning HTML and CSS because it provides you with a testing environment to play around … Read more