🌌 arthurs.dev

Recent Notes

HTML & CSS Basics

4 min read

HTML

Container for <title>, <style>, <meta>, <link>, <script>, and <base>.

Title/Style/Script

Fairly intuitive. Style contains direct CSS. Script contains direct JavaScript.

<link> is used to link external resources as defined by the rel attribute which in most cases will be stylesheet. Then must provide a path to the href attribute.

Remember: It’s common to import a stylesheet like <link rel="stylesheet" href="mystyle.css">. Additionally, it is common to import a favicon, like <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

Meta

<meta> is metadata used by browsers, search engines, and other services. Some attributes are:

  • charset
  • name
  • content

Remember: It is important and standard to include <meta name="viewport" content="width=device-width, initial-scale=1.0"> so that the viewport size is set based on the device’s screen size. Same goes for <meta charset="UTF-8" />.

Base

<base> tag specifies a default URL and target for all links on a page.

Body

Semantic Elements

  • <header> (usually includes logo/nav)
  • <nav>
  • <main>
  • <section> (typically has a heading)
  • <article>
  • <aside>
  • <footer>

Non-Semantic Element

  • <div> - block-level, often used for grouping
  • <span> - inline-level, often used to style smaller pieces of content/text inside of a paragraph, heading, etc

CSS

Go to Clearing up confusion - CSS for a note on clearing up things that aren’t immediately obvious or commonly forgotten in CSS.

Constants/Variables

:root is a pseudo-class that matches the root element of the document. We can define some constants there:

:root {
  --custom-color: #f0f0f0;
}

And resolve it with the var method for use around your CSS:

p {
    color: var(--custom-color);
}

Border

Don’t forget to explain hr

Tables

border-collapse determines whether a table’s borders are collapsed or separated via collapse and separate. After that, border rules apply.
table-layout determines whether column width is autogenerated with auto or equal size fixed. If set to fixed, column widths should be set with width.

Tip: You can grab the first or last child using tr:first-child or tr:last-child. This can be great to remove the border or set left hand column keys.

Grid

Set the display to grid. Similar to flexbox, a grid consists of a grid container and grid items.

Grid Container Properties

grid-template-columns
grid-template-rows
These use a space separated list of values usually using fractional fr units. You can mix and match with other units like pixels or even auto. Each column/row can optionally be named by prepending or appending the line with [name]. For example, [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]. There’s a helper repeat() which allows values to generated, e.g. repeat(5, 20%).

grid-template
A shorthand property that combines grid-template-rows and grid-template-columns.

grid-template-areas
A fun way to visualize the grid and make the CSS readable. Each grid item must have a defined grid-area. Example:

grid-template-areas: 
	"header header header header"
	"main main . sidebar"
	"footer footer footer footer";

gap
Defines the gutter size between tracks as a shorthand for row-gap and column-gap. Accepts 1 or 2 values.

Grid Item Properties

grid-column-start
grid-column-end
grid-row-start
grid-row-end
Arguably the most important properties which define what column(s) or row(s) the item should take up. What kind of values do they take?

  • <line> can be a number or name that refers to the grid line
  • span <number> will span number grid tracks
  • span <name> will span until it hits name
  • auto

grid-column
grid-row
A shorthand version of the above properties separated with a slash. e.g. grid-column: 2 / span 3;

grid-area
A shorthand version of everything separated by three slashes starting with row-start → column-start → row-end → column-start. Has a second (more common) use, which is providing a name for the item without quotations so it can be used by a grid template.

Typography

line-height - defines height of line box, NOT the text. Increasing it will increase vertical spacing between lines. letter-spacing is the horizontal, character based version.

Importing Custom Fonts

@font-face {
    font-family: 'ChosenFontName';
    src: url('/url/to/font.ttf');
}

Put this before any styles in the document, not inside of a rule. Use your font as you would any other.

Building a page

I find the process of building a page very overwhelming because there a million things to do. There are 2 things I should focus on when starting something from scratch.
0. (Preferably have a design in mind)

  1. Break down the problem into components (They should make a framework for that…)
  2. Each component should be a MVP, stop focusing on details so early

Build Order

  • Create the HTML page skeleton
  • Define global styles, color constants, and typography
  • Tackle a component, repeat
    • HTML FIRST
    • THEN CSS
  • Tackle responsiveness for multiple screen sizes
  • Iterate and polish EMBRACE IT
    • Clean up code
    • Refine spacing/alignment
  • Cross browser/device testing
  • Accessibility testing

Graph View