Learn CSS
Learn HTML Easily with my note from Codeacademy Pro Premium. I paid for the course and learned it all so you don’t have to.
Explore all of my coding notes here
0.1. CSS Anatomy
1.Inline Styles
2. The style Tag
3.The .css file
4.Linking the CSS File
5.Tag Name
6.1 Universal
6.Class Name
7.Multiple Classes
8.1 Attribute
8.2 Pseudo-class
8.ID Name
9.Classes and IDs
10.Specificity
11.Chaining Selectors
12.Nested Elements
13.Chaining and Specificity
14.Multiple Selectors
15.Review CSS Selectors
16.CSS Structure
17.Font Family
18.Font Size
19.Font Weight
20.Text Align
21.Color
22.Opacity
23.Background Image
24.Important
25.Review Visual Rules
Project 1 – Healthy Recipes
Project 2 – Olivia Woodruff Portfolio
28.The Box Model
29.Height and Width
30.Borders
31.Border Radius
32.Padding I
33.Padding II
34.Margins I
35.Margins II
36.Margin Auto
37.Margin Collapse
38.Minimum and Maximum Height and Width
39.Overflow
40.Resetting Defaults
41.Visibility – Hidden and None
42. Review – The Box Model
43.Why Change the Box Model
44.Box Model Content-Box
45.Box Model Border-Box
46.The New Box Model
47.Review Changing the Box Model
48. Project The Box Model – Davie’s Burgers
49.The Box Model in DevTools
50.The Box Model in Chrome DevTools
51.Flow of HTML
52. Position
53. Position – Relative
54. Position – Absolute
55. Position – Fixed
56. Z-Index
57.Inline Display
58.Block Display
59.Inline-Block Display
60. Float
61. Clear
62. Review Layout
63. Project – Broadway
64.Introduction to Color
65. Color – Foreground vs Background
66.Hexadecimal
67.RGB Colors
68.Hex and RGB
69.Hue, Saturation, and Lightness
70.Opacity and Alpha
71.Color Review
72. Project – Paint Store
73.Font Family
74.Font Weight
75. Font Weight II
76. Font Style
77.Word Spacing
78.Letter Spacing
79.Text Transformation – uppercase
80.Text Alignment
81.Line Height Anatomy
82.Line Height
83. Serif and Sans Serif
84.Fallback Fonts
85.Linking Fonts I
86.Linking Fonts II
87. Font-Face I & II
88. Font-Face III
89.Review Typography
90. Project – Typography
91. What is Flexbox
92. Display – flex
93. Inline-flex
94.justify-content
95.align-items
96. Flex-grow
97.flex-shrink
98.flex-basis
99. Flex
100.flex-wrap
101.Align-content
102.flex-direction
103. flex-flow
104.Nested Flexboxes
105.Review Flexbox
106.Project Flexbox To-Do App
107. Introduction to Grid
108. Creating a Grid
109.Creating Columns
110. Creating Rows
111.Grid Template
112. Fraction
113. Repeat
114. Minmax
115. Grid gap
116.Grid Items
117.Multiple Row Items
118. Grid Row
119.Grid Column
120. Grid Area
121. Project CSS Grid – PupSpa
121. Review CSS Grid Essentials
122.Grid Template Areas
123.Overlapping Elements
124.Justify Items
125.Justify Content
126.Align Items
127.Align Content
128.Justify Self and Align Self
129.Implicit vs. Explicit Grid
130.Grid Auto Rows and Grid Auto Columns
131.Grid Auto Flow
132. Advanced CSS Grid
133. Project – CSS Grid Task Board
134. Display Inline-grid
What is DOM
CSS Materials & Links
Border Style
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values
Color
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
Project – Tea Cozy
Designer Guideline
Developer Guideline
Index.html
<!DOCTYPE html>
<html>
<head>
<title>The Tea Cozy</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- Header -->
<header class="flex-container">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" />
<nav>
<span><a href="#mission">Mission</a></span>
<span><a href="#store">Featured Tea</a></span>
<span><a href="#locations">Locations</a></span>
</nav>
</header>
<!-- Main Content Container -->
<div class="main">
<!-- Mission Section -->
<div id="mission" class="flex-container">
<div class="content">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-- Store Section -->
<div id="store">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="flex-container items">
<div class="item">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" />
<span>Fall Berry Blitz Tea</span>
</div>
<div class="item">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" />
<span>Spiced Rum Tea</span>
</div>
<div class="item">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" />
<span>Seasonal Donuts</span>
</div>
<div class="item">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" />
<span>Myrtle Ave Tea</span>
</div>
<div class="item">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" />
<span>Bedford Bizarre Tea</span>
</div>
</div>
</div>
<!-- Locations Section -->
<div id="locations">
<h2>Locations</h2>
<div class="flex-container locations">
<div class="location">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="location">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="location">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div id="contact">
<h2>The Tea Cozy</h2>
<h5>contact@theteacozy.com</h5>
<h5>917-555-8904</h5>
</div>
<!-- Footer Section -->
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>
style.css
/* Universal Styles */
body {
margin: 0;
font-family: “Helvetica”, sans-serif;
color: seashell;
background-color: black;
font-size: 22px;
text-align: center;
}
a {
color: seashell;
}
h2,
h3,
h4 {
margin: 0;
padding: 10px;
}
.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Header Section */
header {
width: 100%;
position: fixed;
z-index: 1;
height: 69px;
background-color: black;
border-bottom: 1px solid seashell;
align-items: center;
}
header img {
height: 50px;
padding-left: 10px;
}
nav {
text-align: right;
flex-grow: 1;
}
nav span {
display: inline-block;
padding: 20px 10px;
}
/* Main Section */
.main {
padding-top: 69px;
opacity: 0.9;
width: 1200px;
margin: auto;
}
/* Mission Section */
#mission {
height: 700px;
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg”);
padding-top: 70px;
}
#mission .content {
margin: auto;
background-color: black;
width: 100%;
}
/* Store Section */
#store {
height: 700px;
width: 1000px;
margin: auto;
padding-top: 70px;
}
.item {
padding: 5px;
}
.item img {
height: 200px;
margin: 10px;
display: block;
}
.item span {
display: block;
padding: 5px;
font-weight: bold;
text-align: center;
}
/* Location Section */
.flex-container.locations {
padding-top: 5px;
}
#locations {
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg”);
height: 500px;
padding-top: 70px;
}
#locations .flex-container {
margin: auto;
width: 1100px;
}
.location {
opacity: 1.0;
padding: 10px;
margin: 5px 20px;
background-color: black;
flex-basis: 280px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Contact Section */
#contact {
height: 200px;
}
/* Footer Section */
footer {
text-align: left;
padding-left: 20px;
}
Post Comment