Hello Site!

Today I published my re-designed personal site (shoutout to the zola static site generator) and wanted to share a few things I've learned in the process. These might be pretty obivous to any experienced front end engineers, but since I don't spend all day working on front end projects they're new to me!

Media Queries

It's important that a website looks good on many different devices. Media queries are a way to apply CSS styles depending on a device's characteristics. For example here's the (abbreviated) media query I use to adjust for smaller screens:

@media only screen and (max-width: 600px) {

	/* ---- snip ---- */

	/* Displaying a full description clutters smaller screens */
	.postDescription {
		display: none;
	}
}

This media query will only apply display: none to the .postDescription class when the max-width is less than or equal to 600px. For a full explanation of media queries see mdn.

Responsive Design Mode

Testing how your site looks on different screen sizes is important. Both Firefox and Chrome have developer tools that allow you to emulate viewing the site on different devices. In Firefox you can use the shortcut Ctrl-Shift-M and an adjustable size display will show up. You can alter the size, rotation, and even network bandwith see how your site works (or doesn't)!

Overflow Attribute

The last thing I learned about was the overflow attribute. I was having trouble with my code block running off the nicely styled background color:

The overflow attribute lets you define the behavior when content does not fit into the parent box. In my case I wanted it to set a scroll window so I used: overflow: scroll.

Wrap Up

Coming from the world of back end dev, there's always a ton to learn when I jump into more front-end learning projects but for now that's a wrap!