| Command |
= |
Explanation of command |
| cd ~ |
= |
Takes you back to starting directory |
| mkdir "directory name" |
= |
Creates a directory with the name of you choise |
| rmdir "directory name" |
= |
Removes a directory of your choise. Just be aware that it is a "hale mary" |
| touch "filename" (mac) |
= |
Creates a file with a name of your choise on a mac |
| echo > "filename" (my PC) |
= |
Creates a file with a name of your choise on a PC |
| rm "filename" |
= |
Removes the file of your choise. Just be aware that it is a "hale mary" |
| code . |
= |
Opens the directory in VS Code |
| start "the relative path to the file you want to open" |
= |
Opens the html file in a browser |
| Box Model (and other stuff) |
= |
Explanation of boxmodel (and other stuff) |
| Steps to build website |
= |
- Decide which elements you need
- Add the content
- Style
|
| Semantic Elements |
= |
- header
- footer
- section
- article
|
| Headings |
= |
- There are 6 predefined headings
- h1 - h6
- They are block elements
- Browsers will apply default styling for headers unless you override it in your own CSS.
- All Pages should have ONE and only ONE h1 element for SEO purposes
|
| CSS |
= |
Can be written in three ways,
BUT should only be used in its own file unless
its tailwind CSS
|
| Colours |
= |
140 preNamed colours in CSS. CSS supports Hexadecimal
colourcodes using a rr/gg/bb (red, green, blue) style.
That gives developers access to 16million colours.
|
| ColourSchemeGenerator |
= |
http://coolors.co |
| Font Size |
= |
rem (relative to the document root) or em (ephemeral style, relative to the parents fontsize) |
| Font Weight |
= |
How thick or thin the font is, values span from 100 to 900. predefined named values also excists. |
| Display property |
= |
Every element has a default display property.
- divs, paragrafs and headings has block as default, takes up 100% width and hight is determined by their content
- Spans, anchor tags has inline as default. They only take up as much space as their content requires.
Width and height are ignored abd padding and margin are only relevant to the x-axis
|
| Width and Height |
= |
Block elements can take width and height properties (%, vw highly recommended). Block elements is by default relative to its parent. ex: width 50% (50% of the parents width). ViewWidth/Hight are relative to the size of the screensize |
| Display: inline-block |
= |
Combines both inline and block features. Will display inline but can take height and width properties. Padding and margin are applied on all sides. Width and height in % will be relative to the parent element |
| The box model |
= |
Box model describes the properties or layers that make up the total dimensions of any element in html and css. content, padding, border, margin |
| Content |
= |
Behaves differently depending on the display property. If not given a value it is always as heigh as it needs to be, but the width is either 100% of the parents width for block elements, or as wide as it needs to be for inline elements. Default the height and width only affect the content area. |
| Padding |
= |
Box model describes the properties or layers that make up the total dimensions of any element in html and css. content, padding, border, margin |
| Border |
= |
Box model describes the properties or layers that make up the total dimensions of any element in html and css. content, padding, border, margin |
| Margin |
= |
Box model describes the properties or layers that make up the total dimensions of any element in html and css. content, padding, border, margin |
| Box Sizing |
= |
Box model describes the properties or layers that make up the total dimensions of any element in html and css. content, padding, border, margin |