| HTML Tag (Wrap With < >) | What It Does |
|---|---|
| !DOCTYPE html | This is what should be at the top of your HTML code, it tells the browser what type of code to expect! |
| html | Html tag starts/ends html document, all other code sits within these tags |
| h1, h2, h3 | Main Heading, Subheading, Byline |
| h4, h5, h6 | Section Heading, Subsection Heading, Minor Heading |
| p | Paragraph tag, wrap paragraphs of text with it. Each new paragraph is on a new line by default. |
| b | Bold embellishment tag - wrap a word within p tags to make it bold |
| i | Italic embellishment tag - wrap a word within p tags to make it italic |
| sup | Superscript - wrap a character or word like so: e=mc2 |
| sub | Subcript - wrap a character or word like so: e=mc2 |
| br | Insert a line break, handy way of adding some visual space between HTML elements |
| hr / | Adds a horizontal line, use to create a break between themes in your content - SELF CLOSING TAG - |
| em | Emphasis Semantic HTML tag, by default this italicises whatever it wraps -GOOD FOR ACCESSIBILITY/SCREENREADERS- |
| strong | Emphasis Semantic HTML tag, by default this bolds whatever it wraps -GOOD FOR ACCESSIBILITY/SCREENREADERS- |
| blockquote | Blockquote tag, so if you wanted to 'quote something a lot longer than usual'you could use this tag to make it stand out! |
| abbr | Abbreviation tag, add title="the full title of whatever you're abbreviating" within the opening abbr tag. Hover your mouse over an acronym like this: NASA |
| ins and del | Ins is used to show content inserted into a document. Del is used to show content |
| ol | Ordered List tag - used when you want a numbered list and nest open/closing li tags for each item. |
| ul | Unordered List tag - used when you want a bulleted list and nest open/closing li tags for each item. |
| dt | Definition Term tag - use when you want to define a term, paired with the dd tag to provide the defintion itself. |
| dd | Definition tag - use when you want to define a term, paired with the dt tag to provide the term being defined. |
| a | Anchor Tag - used for creating links both internally and externally. In opening a tag, use href="full URL of external site OR path to internal page Then, between the opening and closing tags, add whatever it is you want the actual hyperlink to say like this: Resume |
A really good way of making life easier for yourself when it comes to building a web page is to break your HTML out into sections.
Divs essentially cordon off a section of your website as being separate and tell the browser that it may or may not have specific styling.
We can then make that div stand out from the rest of the website or blend it in by altering its properties.
For example, underneath this line I've set up divs with a class of colorpart and given them a border
and background color to literally cordon off a section of the site and style it differently from the rest of the page!
New divs, who this?
New divs, who this?
New divs, who this?
As you can see with the site design I chose to use on Code Blooded Cyber, each section of the site I divided into its own div
by theme and gave it a class of something like 'html_section' or 'css-section'. By giving each div a different styling and
different background SVG image (the wavy lava lamp shapes), you can start to build a unique and striking site design.
The main thing you need to learn about the Box Model is that it comprises
the properties
that govern how elements show up on a web page. There are three available properties
that can be adjusted to control its appearance.
Every box has a border around it, whether it's visible or not - its job is to separate one box's edge from another box's edge.
Margin sits outside the edge of the border and create gaps between borders!
Padding is just the space between your content and the border of a box!
| CSS TIP ( Use within { } ) | Why It's Important |
|---|---|
| font-size | Lets you specify the size for your chosen font. Specify a px value, a percentage value (will be a percentage of default size of 16px) or an ems value (1em is equal to the width of the letter m) |
| font-family | Lets you specify the typefaces that should be used within the specified HTML element. For example, you could use Georgia, 'Times New Roman', serif to let the browser know to use Georgia as a font first, Times New Roman if it can't find it and any serif font as a last resort. |
| font-weight | Lets you choose a numerical value e.g 900 or a named value like bold to denote how strongly text appears in the specified element. |
| text-align | Lets you specify how your text is aligned within the specified element. Mostly use named values like left, right or center. |
| text-transform | Lets you transform the case of the text within the specified element. Values normally used are uppercase, lowercase or capitalize. |
| text-decoration | Lets you add effects/decoration to your text. Values normally used are underline, overline, and line-through. |
| text-indent | Lets you indent the first line of text within an element. Value normally given as a px value. Positive to indent right, negative to indent left. |
| Centering a Div | div { margin:0 auto; } |
Flexbox layout has two major components: flex containers and flex items.
Flex containers are elements on the web page that, unsurprisingly, contain flex items.
It's pretty easy to set an element as a flex container - you just set display: flex; or display: inline-flex; on the container.
The whole idea of flex containers is for when you want to create a site that responds properly when you change screen sizes.
Before we go much further into that though, let's talk about what inline, inline-block and block elements are:
Elements that are set to display: inline; only appear on the same line.
Inline elements don't start on a new line and only occupy as much width as the content does.
Try and set a height or width property on an inline element, and it won't work!
Elements that are set to display: inline-block; only appear on the same line.
Inline-block elements are basically the same as inline elements except that you can
set height and width properties on inline-block elements and have them work!
Elements that are set to display: block; start on new lines.
Block elements are basically the opposite of inline elements - they start on new lines
and block elements also take up the entire width of that line!
An example of HTML elements that are block level elements are div, h1, p, li and section.
If you give a div the display: flex; declaration, it will remain a block element.
| Flex-container Property | What It Does |
|---|---|
| display | Defines the flex-container as flex-inline or block depending on the value, also defines a flex context for flex-items. |
| flex-direction | Basically defines the main axis or direction of flex-items within a flex-container. Valid options for flex-direction are row(right-to-left), row-reverse(left-to-right), column(up-to-down) and column-reverse(down-to-up). |
| flex-wrap | This one's a little harder to understand. By default, the idea is that flex-items try to all stay on one line. But what if they can't? Flex-wrap essentially tells the browser what to do if that's not possible for whatever reason. There are a few valid options for flex-wrap: no-wrap means all flex-items stay on one line regardless. wrap means that items will wrap to the next line from top-to-bottom. wrap-reverse means that items will wrap to the next-line from bottom-to-top. |
| justify-content | Lets you specify the alignment of your content along the main axis you defined in flex-direction. There are a bunch of valid values for justify-content that let you do different things to help position your content (assumes left-to-right): flex-start positions your content to the left of the flex-container. flex-end positions your content to the right of the flex-container. center positions your content in the center, unsurprisingly. space-between distributes your content evenly throughout the container. space-around distributes your content evenly throughout the container with equal space around them. Items at the container edge (first and last) will have one unit at the container edge and two on the other side, because the second/penultimate item has its own applied spacing too. space-evenly does much the same as space-around but also makes sure the container edge spaces are even, too. |
| align-items | Lets you specify the alignment of your content along the cross-axis, or the perpendicular axis to the one you specified in flex-direction. There are a bunch of valid values for align-items that let you do different things to help position your content (assumes top-to-bottom): flex-start positions your content to the top of the flex-container. flex-end positions your content to the bottom of the flex-container. center positions your content in the center, unsurprisingly. stretch stretches the content to fill the flex-container, respecting any min/max-width properties you've set. |
| gap | Explicitly defines the size of gap between flex-items - not at the outer edges. |
| Flex-item Property | What It Does |
|---|---|
| order | Defines the order that flex-items appear within the flex-container. |
| flex-grow / flex-shrink | This one is an interesting property. Flex-grow defines how much of the remaining available space within a flex-container a given item with this property should take up. Flex-shrink defines how much a given item should shrink, if necessary. Let's say there are three flex-items within a flex-container and flex-grow is set to 1. In this example, should you resize the browser, the remaining space in the flex-container will be distributed equally to each item. If one of the three items has flex-grow set to 2 though, that item would take up twice the avaialble remaining space (or at least try). |
| align-self | This one is pretty much the same as align-items from the above table, with many of the same values being valid. You'd use this mainly to override the default alignment given to a flex-item by the align-items property on the container the flex-item is in. |
.parent (flex-containers) {
display: flex;
height: 300px;
}
.child (flex-items) {
width: 100px;
height: 100px;
margin: auto;
}
CSS Tricks - Brief Guide to CSS Flexbox Layout
The ever-fantastic Traversy Media YouTube channel breaking down Flexbox CSS in 20 minutes.
CSS in 2017 added support for CSS Grid layout ,which allows you to divide your CSS page up into a grid, comprising of rows and columns.
You can control various properties of the rows, columns and the gaps between them through properties.
This allows for a lot more granular control over the various elements that you place on a page.
However, I haven't quite got my head around it enough to be comfortable putting it up on the cheatsheet, just yet!
For now, here are some great guides and videos about how to learn CSS Grid, as well as more intermediate web dev topics like wireframing and basic UI/UX design:
CSS Tricks - Comprehensive Guide to CSS Grid
CSS Tricks - What I've Learned About CSS Grid Layout
Grid Garden - a game that teaches you CSS Grid by growing plants!