# data[].attributes.body
Hi!

Please feel free to add your references and notes that you think we can all benefit from!

# data[].attributes.attachment_link.title
Join the Brainstation.io Software Development July 2024 Discord Server!

# data[].attributes.attachment_link.description
Check out the Brainstation.io Software Development July 2024 community on Discord - hang out with 6 other members and enjoy free voice and text chat.

# data[].attributes.body
You are doing great!

# data[].attributes.body
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

https://docs.emmet.io/cheat-sheet/

alt+up or cmd+up - move content without needing to cut and paste

! or html - boilerplate

alt+click or option+click - multicursor

ctrl+alt+up/down - multicursor without clicking

alt+shift+f or option+shift+f - format document

shift+tab - backward tab

Relative pathing: ./ means this directory, ../ means previous directory

ctrl+d or cmd+d - select similar words

alt+shift+up/down or option+shift+up/down - copy current line

middle click and drag - multilevel select

ctrl+/ or cmd+/ - comment out

# data[].attributes.body
header

nav

section

article

aside

footer

figure

figcaption

details

main

mark

summary

time

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf

https://marketplace.visualstudio.com/items?itemName=sdras.night-owl

https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem

https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem

https://marketplace.visualstudio.com/items?itemName=evondev.generate-css-class

# data[].attributes.body
https://developer.mozilla.org/en-US/docs/Web/HTML

https://developer.mozilla.org/en-US/docs/Web/CSS

https://developer.mozilla.org/en-US/docs/Web/JavaScript

# data[].attributes.attachment_link.readable_text
The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find the links to MDN's documentation on Web technologies.

# data[].attributes.attachment_link.description
The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find the links to MDN's documentation on Web technologies.

# data[].attributes.body
CSS is done in order of specificity:

1. ID

2. Class

3. Tag

If there is a conflict, the most recent addition will be applied

<p> This is a paragraph </p>
<p class="blue-text"> This is another paragraph with <span id="special-text-color"> special words </span></p>

p{
  color: red;
}

.blue-text{
  color:blue;
}

#special-color-text{
  color:yellow;
}

Note: You can string together tags, classes, and ids if needed in different ways

h1, h2 {
 color: red;
} - h1 and h2 tags will be red

h1.blue-text{
  color: blue;
} - All h1 tags with the class blue-text will be blue

p span{
  color: green
} - All spans within a p tag will be green, regardless of how far down

p>span{
  color: yellow
} - Only spans directly after a p will be yellow

# data[].attributes.body
Custom Color Variables: https://ado.xyz/blog/custom-css-color-names/

Gradient Color: https://cssgradient.io

# data[].attributes.body
https://nekocalc.com/px-to-rem-converter

Units

px : pixels | absolute | angular measurement

cm/inches/mm : x | absolute

em/rem : relative to font size | relative

% : percentage | relative

vh/vw : viewport height/width | relative

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known.

px are mainly used. The other absolute measurements are rarely used

Can be dependent of device manufacturers.

1px (desktop) =/= 1px (smartphone)

Relative length units specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another.

# data[].attributes.attachment_link.description
CSS units are used to specify the size, position, and other properties of elements on a web page using Cascading Style Sheets (CSS). There are several types of CSS units, each with its own unique properties and use cases. These units are either absolute units or relative units.

# data[].attributes.body
Some Useful References (shared by Yuan)

https://missing.csail.mit.edu/2020/version-control/

https://git-school.github.io/visualizing-git/

https://learngitbranching.js.org

https://gitimmersion.com/lab_01.html

# data[].attributes.attachment_link.title
Git Tutorials and Training | Atlassian Git Tutorial

# data[].attributes.attachment_link.description
Learn the basics of Git through this comprehensive Git training. Branching, pull requests, merging and more are covered in the Atlassian Git tutorial.

# data[].attributes.body
https://gist.github.com/bradtraversy/cc180de0edee05075a6139e42d5f28ce

# data[].attributes.attachment_link.description
Common Terminal Commands. GitHub Gist: instantly share code, notes, and snippets.

# data[].attributes.headline
Learn Enough Command Line to Be Dangerous

# data[].attributes.subject
Learn Enough Command Line to Be Dangerous

# data[].attributes.attachment_link.title
Learn Enough Command Line to Be Dangerous

# data[].attributes.attachment_link.description
Chapter 1: Basics | Learn Enough to Be Dangerous is designed to unleash your technical genius by teaching you technical sophistication.

# data[].attributes.attachment_link.description
Linux Tutorial - Learn Linux the easy way

# data[].attributes.body
1. https://bem-cheat-sheet.9elements.com/

2. https://sparkbox.com/foundry/bem_by_example

# data[].attributes.attachment_link.description
A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

# data[].attributes.body
1. https://www.w3schools.com/css/css3_flexbox.asp

2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3. https://flexboxfroggy.com

4. https://www.dropbox.com/scl/fi/icpfnxph9dcsqhbs5sw54/A-Container-Properties.pdf?rlkey=l1norq2c6f3n074xsbkse41zb&e=2&dl=0

5. https://www.dropbox.com/scl/fi/iijyht24j6qpmt1lzz5ur/B-Child-Properties.pdf?rlkey=682l7lsw8ojeyflxy9l9v1x8o&e=2&dl=0

6. https://www.alibabacloud.com/blog/details-on-flexbox-layout_598139

7. https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

8. https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox

# data[].attributes.attachment_link.readable_text
Try it Yourself "

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage

Inline, for text

Table, for two-dimensional table data

Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Browser Support

The flexbox properties are supported in all modern browsers.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

The element above represents a flex container (the blue area) with three flex items.

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
display: flex;
}

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The justify-content Property

The justify-content property is used to align the flex items:

The align-items Property

The align-items property is used to align the flex items.

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The baseline value aligns the flex items such as their baselines aligns:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

Try it Yourself "

The align-content Property

The align-content property is used to align the flex lines.

In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

Example

Try it Yourself "

Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

The element above represents four blue flex items inside a grey flex container.

The flex item properties are:

The order Property

The order property specifies the order of the flex items.

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The value must be a number, default value is 0.

Example

Make the third flex item grow eight times faster than the other flex items:

Try it Yourself "

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example

Do not let the third flex item shrink as much as the other flex items:

Try it Yourself "

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container's align-items property.

In these examples we use a 200 pixels high container, to better demonstrate the align-self property:

Responsive Image Gallery using Flexbox

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:

Try it Yourself "

Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

Try it Yourself "

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

# data[].attributes.attachment_link.description
Try it Yourself " Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

# data[].attributes.body
Some helpful links to get familiar with CSS Selectors:

https://flukeout.github.io/

# data[].attributes.body
1. https://linuxsurvival.com/linux-tutorial-introduction/

2. https://www.learnenough.com/command-line-tutorial

# data[].attributes.attachment_link.description
This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change

# data[].attributes.body
JS course recommended by Fatemeh

https://www.udemy.com/course/the-complete-javascript-course/?kw=javascript&src=sac&couponCode=2021PM20

# data[].attributes.body
HTTP Status Codes Glossary

# data[].attributes.attachment_link.readable_text
There are five classes of HTTP status codes, each identified by the first digit of the three-digit status code. The classes are as follows:

1xx (Informational)

These status codes indicate that the server has received the request and is continuing to process it. They are primarily used to convey information about the status of the request while it is being processed.

2xx (Successful)

These status codes indicate that the request was successfully received, understood, and accepted by the server. They are typically used to indicate that the requested action has been successfully completed.

3xx (Redirection)

These status codes indicate that the client needs to take additional action to complete the request. They are typically used to redirect the client to a different resource or location.

4xx (Client Error)

These status codes indicate that the server cannot process the request because the client has made an error. They are typically caused by issues such as invalid input, authentication problems, or insufficient permissions.

5xx (Server Error)

These status codes indicate that the server encountered an error while processing the request. They are typically caused by issues such as server overload, programming errors, or infrastructure problems.

# data[].attributes.attachment_link.description
Wondering what an HTTP status code means? Browse this list of HTTP status codes for definitions and code references.