Browse the archive
Category: Learn to Code Now
2. CSS: Units, Connecting HTML + CSS, Typography
The cascading part of CSS is the idea that you begin to style your site on a general basis, then get more particular as…
Post Jan 14, 2023The CSS Box Model: Block And Inline/Divs and Spans
The MDN box model article linked in the previous lesson mentions that different display types have subtly different box models. It also mentions that…
Post Jan 13, 202312. Web fonts
We have already talked about typography on the Web and about how to change typefaces, and how they look using CSS rules. For a…
Post Jan 13, 202311. Transforms: rotations, scaling and skews, Vertical alignment, Head tags and search engines, Flexbox, CSS animations, Forms, Audio, video and media
Back in 2010, Steve Jobs wrote an open letter about Adobe Flash, the multimedia tool that most of the Web was using for animation…
Post Jan 13, 202310. Positioning
When making more complex layouts, sometimes we might have to use styles that don’t fit into the usual floated layout pattern. As designers, we want…
Post Jan 13, 20239. CSS Displays @Media
Earlier in this guide, we talked about different tags having different types — some tags were “blocks” that push other tags down the page,…
Post Jan 13, 20238. Mobile-friendly designs with media queries
In one of my classes a student was talking to me about how the company she worked for had recently spent thousands of dollars…
Post Jan 13, 20237. multi-column layouts with floats: Wrapping elements using floats, Overflow,Transparency with opacity and rgba colors, Drop shadows
Wrapping elements using floats Let’s imagine our HTML is the following... <p> <img src="president.jpg"> Today, the president was very happy... </p> Here we have a <p> tag…
Post Jan 13, 20236. Let’s get mathematical: Ratios, Margins and paddings, Borders, Rounded corners with border radius, Filters
Ratios Humans are born with a natural instinct to prefer patterns and sizes that are based on mathematical ratios. Musical notes sound pleasant together…
Post Jan 13, 20235. CSS: Meet the header tag, Styling with color, Background images, Hover states, Transitions, Child selectors, Classes, Widths and heights
So far, we’ve been focusing on the content of our websites. By default, the browser gives them a style that looks like the web…
Post Jan 13, 20232. How to make a website, Recapping front-end web development, But how do you write code?
...and what exactly is “front-end web development”? Earlier we talked about the different programming languages and the two types of code, for front-end and…
Post Jan 13, 20233. Let’s Talk HTML, Heading, Blocks and inline, Links, Images, White space + indentation
Why talk about HTML first? Well, we need to have some content which we can style and interact with. HTML stands for HyperText Markup Language.…
Post