Typography
To a designer, typography is everything. But unlike on other mediums, typography on the web is fluid because it has to adapt to a changing canvas — your screen size. This fluidity means that we can’t use traditional software to design a website. Instead, we have to use two programming languages: HTML and CSS.
Programming may seem scary, but web code is actually pretty simple. HTML and CSS basically just describe what should appear on your screen, and the most basic form of visual content is typography. So let’s jump right into coding and start making websites!
Online Resources
This guide is like a tour of the Internet. As you follow along, you’ll find links to a variety of resources that real-world developers use. In particular, you’ll find tons of links to MDN and W3Schools, two sites dedicated to documenting how web code works. While MDN usually provides more up-to-date information, W3Schools offers a friendlier interface. Together, the sites cover everything you need to know to make your own websites.
Additionally, you’ll find GD with GD links scattered throughout this guide. These include coding demos (via DEMOLAND) to help tie concepts together and exercises (via test-projct-1.html) to put said concepts in use.
HTML Files
A website is an HTML (or .html) file. What does that mean?
Code is just text stored in a file. We call this plaintext, because it doesn’t have any associated design (like font or color). Instead, it’s just text. The way we can tell programming languages apart is by their syntax, or their rules. HTML’s main rule is that we separate information by writing HTML elements.
This means that HTML doesn’t care that much about tabs, spaces, or line breaks. We’ll still use them, but mainly to organize our code. To get around this, we’ll need to use HTML elements.
Typesetting with HTML
We can think of HTML as the content on your website. There are different kinds of content, but the most basic kind is text. HTML handles text via several dedicated HTML elements, from paragraphs to headings to lists and more. Each of these elements comes with its own set of default styles (which we will soon be able to override). For now, let’s make a website that actually says something!
Note: this is NOT a complete list of HTML elements! These are just the most common elements you’ll encounter for typography.
Styling Text with CSS
There’s not much you can do with just HTML. To start making your website pretty, we’ll need to use CSS. CSS (Cascading Style Sheets) is another programming language that works with HTML to style HTML elements.
CSS mainly uses two things: properties and classes. Properties define the different visual characteristics of HTML elements, while classes organize sets of properties so that you can apply all of them at once wherever you want. We can even embed CSS right into an HTML element’s opening tag!
Adding CSS to HTML Elements
.class-name { color: red; font-size: 12px; }
CSS classes (applying CSS to multiple HTML elements)
style="color: red; font-size: 12px;"
Inline CSS (applying CSS to a single HTML element)
Launching a Website
Coming soon!
Web Fonts
Coming soon!
Importing Custom Fonts with CSS
font-weight: 500;
Specify a font’s weight (or range of weights for variable fonts, e.g. 100 900)
Places to Download Free Fonts
Google Fonts
Too Much Type
The Box Model
On the Internet, everything is a box. Even though we have different HTML elements, each one is essentially a preset style for the same boxy element. And each boxy element shares the same CSS properties, which together form the “CSS box model.”
By learning how the box model works, you’ll have the power to move beyond typography and begin laying out your page graphically.
Box Sizing
Inline vs. Block Elements
Images
Laying Out an Article
:hover and :active States
@keyframes Animations
Creating Animations with CSS
animation-timing-function: ease-in-out;
Layout
Websites are vertical — as you add content, your page gets taller. That works great for basic articles, but what about non-vertical layouts? Help!
The need for more complicated web layouts arose, so CSS evolved to meet these needs. It became capable of changing depending on your screen size. On top of that, designers gained two brand new ways to lay out content: in two-dimensional grids, and a quirky little thing called flexbox.
@media Queries
What does it mean for a website to be responsive? For starters, it means that no matter your screen size, the site should adjust its layout keep a good user experience.
CSS Grid
Coming soon!
Flexbox
Coming soon!
Tutorials
Flexbox Froggy
An Interactive Guide to Flexbox
CSS Flexbox Layout Guide
Advanced CSS Selectors
Coming soon!
Manual Positioning
Coming soon!
Putting It All Together
Coming soon!
Demos
A Basic Portfolio
Interaction
Once you’re comfortable with HTML and CSS, you might find yourself asking a question: is this really all a website can do? Organize and present information?
Of course not! Websites are incredible not just because they give us information, but because they also make that information interactive. Unfortunately for us developers, that means we’re going to have to learn yet another language, namely JavaScript. Get ready for something a little different!
Loops
JavaScript is pretty darn powerful. Not only can we use it to make websites interactive, we can use JavaScript to make things happen on their own! To leverage this kind of power, we need to learn about a fundamental concept of computer science: loops.
In this section, we’ll use loops to automate repetitive tasks and make full use of the web medium.
Data
One way JavaScript is so different from HTML and CSS is that it can actually write HTML and CSS for you. Once you realize that, you might ask yourself: how much of my website can I code just using JavaScript? The answer is quite a lot, but it helps to have some data to pull from.
In this final unit, we’ll look at how we can use JavaScript and data to create complex websites without having to write much HTML or CSS by hand.
Even though this is the last unit, remember that there isn’t really a finish line to web programming. You can always run into a problem that requires learning a new skill. After this, you’ll at least have all the basics you need to solve those problems.