#INCLUDE
Create For Community
Tech Cohort Workshop 2
INCLUDE
Agenda
Today we hope to cover the following topics:
INCLUDE
INCLUDE
HTML Tags
Using the right tags helps with Search Engine Optimization (SEO)
Please refer to the links for in depth descriptions :)
INCLUDE
INCLUDE
HTML Attributes
Attributes
Attributes provide additional information about HTML elements and are always specified in the start tag. They are in ‘name=value’ pairs
Examples we commonly use:
INCLUDE
INCLUDE
CSS Units
Absolute Units
Absolute units specify a FIXED length value and won’t change if screen size does.
Some examples include:
We typically use px for width, height, borders, paddings, and margins.
INCLUDE
Relative Units
Simply put, relative units are relative to other containers/boxes and are better for responsiveness.
Some examples include:
We will be using rem for font-size, NEVER px!
% can also be used for widths and heights
INCLUDE
Viewport Units
Viewport units are easy to understand and represent the size of the viewable screen (your browser window).
Some examples include:
INCLUDE
INCLUDE
Padding + Margin + Border
Padding
Padding creates space between an element’s content and its border.
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
padding: 15px; //apply to all four sides
padding: 8px 16px; //top & bottom, left & right
padding: 8px 4px 4px; //top, left & right, bottom
INCLUDE
Margin
Margin creates space between element and other elements
margin-top: 50px;
margin-right: auto; //will push element left
margin-bottom: 50px;
margin-left: 80px;
margin: 15px; //apply to all four sides
margin: 8px 16px; //top & bottom, left & right
margin: 8px 4px 4px; //top, left & right, bottom
INCLUDE
Border
Border creates lines that surround the box
border: solid; //style
border: 2px dotted; // width|style
border: medium dashed green; // width|style|color
Can customize each side of the border (left, right, top, and bottom)
INCLUDE
Box-Sizing
Box-sizing sets the total width and height.
box-sizing: content-box; //width and height ONLY include content
box-sizing: border-box; // width and height include the content, padding, and border, but NOT margin
INCLUDE
Overflow Property
INCLUDE
Overflow specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
INCLUDE
Hands-On Example Time
INCLUDE
Block & Inline Elements
Display Values
INCLUDE
Every HTML element has a default display value:
How can we modify this so block-level elements can become in-line?
Display Property
INCLUDE
One solution is to change the display property, but what if we want to modify layout and spacing for a container’s children all at once?
INCLUDE
Flexbox
What is it?
INCLUDE
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
Terminology
INCLUDE
The parent container is referred to as the flex-container while the children are called flex-items.
Flex-containers can also be flex-items if encased in another container.
Flex-direction
INCLUDE
Items within a flex container can be placed in a row or a column (and reversed).
By default, flex-direction is set to row.
display: flex;
flex-direction: row;
Axes
INCLUDE
Flex containers have two axes, the main axis and the cross axis that change depending on the flex-direction
Row -> main-axis is horizontal, cross-axis is vertical
Column -> main-axis is vertical, cross-axis is horizontal
Positioning Items
INCLUDE
Positioning items along the main-axis involves using the justify-content property.
div {
display: flex;
justify-content: center;
}
Positioning Items
INCLUDE
Positioning items along the cross-axis involves using the align-items property.
div {
display: flex;
align-items: center;
}
Gap
INCLUDE
If you want to space your flex-items by a specific amount, you can use the gap, row-gap, and column-gap properties.
div {
display: flex;
row-gap: 40px;
col-gap: 20px;
}
Grow, Shrink, Basis
INCLUDE
These properties are applied to the flex-items (children) rather than the flex-container (parents). They define how an item should take up extra space.
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
flex: 1 1 200px; //grow | shrink | basis
}
INCLUDE
Hands-On Example Time
INCLUDE
Positioning
What is it?
INCLUDE
Allows control over how elements are placed and how they behave in the document flow.
Types:
(default) (important) (important) (lowkey fun) (big no-no)
div { position: absolute; }
relative vs absolute
INCLUDE
INCLUDE
Offset defined using properties top, bottom, left, right.
1
2
3
5px
30%
-25px
+ve -ve
+ve
-ve
10px
-ve
+ve
-ve +ve
INCLUDE
Hands-On Example Time
INCLUDE
Media Queries
Media Queries
INCLUDE
Used to conditionally apply styles.
A media query computes to true when the media type (criteria) matches the device in use.
One HTML-CSS for all devices: code and style for one, implement changes for others.
Example:
If the screen size is 700px or less, change flex direction.
.teal_boxes { //laptop/ipad dimensions
display: flex;
flex-direction: row;
}
...
@media screen and (max-width: 700px){
.teal_boxes { //for mobile phones
flex-direction: column;
}
}
Media Queries
@media screen and (max/min-width: size){}
Select any elements/classes you want to change within just like a normal CSS selector!
INCLUDE
INCLUDE
CSS Transitions
Transformations & Transitions
INCLUDE
We don’t expect you guys to memorize any of this but it’s good to know what CSS is capable of.
Follow along with the interactive guides:
https://www.joshwcomeau.com/css/transforms/
https://www.joshwcomeau.com/animation/css-transitions/
INCLUDE
Create a Branch
INCLUDE
Take-Home Assignment
Assignment: “About me” Page!
INCLUDE
“About me” Page Inspo
INCLUDE
GitHub
INCLUDE
Resources
INCLUDE
INCLUDE
Thanks for Listening!!
What To Turn In
INCLUDE
You will be in charge of creating the footer + skills section of your portfolio page. We will show you how to use react-icons. Skeleton code has been provided for you but these are basic templates, so get creative & add more content! AIM TO MAKE IT RESPONSIVE!!
npm install react-icons --save