A brief guide to web design
Layout
When designing websites with single or multi-column layouts, a combination of html and css is necessary. One suitable approach here is to use concepts such as flexbox or grid in combination with the div element.
html code is contained in text files, usually ending in .html. These files structure the content that is displayed, such as text, images or video. The design and appearance of the content is defined in css code, which can be included in an html file or loaded from an external file ending in .css. Combined, html and css make up the look of a website.
html elements are the building blocks of html documents, their structure and look. A html element consists of an opening tag, content and a closing tag. Lets take a p element for example: <p>Hello</p> <p> is the opening tag, Hello the content and </p> the closing tag, each element needs an opening and closing tag, elements can be nested, meaning html elements can contain other html elements as content.
Typography
Text on a website is structured in html using html elements such as p for paragraphs, h1 to h6 for headlines, a for hyperlinks, or ul and li for lists—this may look familiar to you from the formatting of text in Google Docs or Microsoft Word. CSS is used to apply typographic treatments such as font family, style and size, weights, padding or margins. These are applied using selectors, the connecting links between html and css.
Fonts can be loaded and imported into a website from external sources, an extensive selection is available from google fonts for free–check other places, too.
Selectors
css selectors are the connecting links between html elements and css properties. A selector is assigned to the class attribute inside an opening tag. Selectors can be assigned to any html element.
Using our example from earlier <p>Hello</p>, adding a selector font__size-xs to it's class, will link the style property .font__size-xs to the p element <p class="font__size-xs">Hello</p>. This paragraph will now apply the style properties defined by font__size-xs, for instance the font size will change as the property label suggests. It sounds more complicated than it is.
Selectors are a fundamental concept in css (Cascading Style Sheets), the language used for designing and customizing the appearance of web pages. When you want to style a part of your webpage, whether it's to change the font size, color, layout, or add animations, you need a way to target that specific element. This is where selectors come into play.
Imagine your webpage as a tree, where each branch is a different part of the page, such as text, images, or buttons. Selectors act like signs pointing to specific branches, telling the browser which parts to apply your styles to. They can be as broad as targeting every text element on the page, or as specific as targeting a single button with a unique identifier.
By combining selectors, you can create sophisticated and visually appealing designs, enhancing the user experience of your web pages. Understanding and mastering selectors is crucial for anyone looking to delve into web development and design.
Cheatsheets
Cheat sheets are useful documents that provide you with an overview of commands and code available for a particular language or tool.