Sheryians
Coding School
Live Cohort
Day - 14
CSS Notes: Flexbox, Icons, and
GitHub Hosting
CSS Notes
Display Flex
Flexbox is a CSS layout mode used to arrange elements inside a container.
It’s very powerful for building responsive layouts easily.
Result: Items now appear next to each other in a single row.
Align Items
The align-items property controls the vertical alignment of flex items inside
the container.
Common Values
Value Description
flex-start Align items at the top
flex-end Align items at the bottom
center Align items in the vertical center
SHERYIANS CODING SCHOOL
CSS Notes
stretch (Default) Items stretch to fill container height
Example:
Use Case: Vertically centering buttons or icons inside a navigation
bar.
3. Justify Content
The justify-content property controls the horizontal alignment of flex items.
Common Values
Value Description
flex-start Align items to the left
flex-end Align items to the right
center Align items in the center
space-between Equal space between items
space-around Equal space around items
space-evenly Equal space everywhere
SHERYIANS CODING SCHOOL
CSS Notes
Example:
Use Case: Spacing out navigation menu items evenly.
Gap
The gap property adds space between flex items — no need for margins!
Example:
Use Case: Creating spacing between cards in a gallery layout.
Using Remix Icon
Remix Icon is a free icon library that’s easy to use and lightweight.
Steps to Use
Add the Remix Icon CSS link inside your HTML <head>:
SHERYIANS CODING SCHOOL
CSS Notes
Use icons with the <i> tag:
Example:
<i class="ri-github-fill"></i> → Displays the GitHub logo.
6. Hosting Website on GitHub Pages
Step 1: Create a GitHub Account
Go to GitHub
Sign up and verify your email.
Step 2: Create a Repository
Click New Repository
Name it (e.g., my-website)
Keep it Public
Click Create Repository
SHERYIANS CODING SCHOOL
CSS Notes
Step 3: Upload Your Files
Open your repository
Click Upload files
Drag and drop your index.html, style.css, etc.
Click Commit changes
Step 4: Enable GitHub Pages
Go to Settings → Pages
Under Source, select main branch
Save it
GitHub will provide a live link like this:
https://yourusername.github.io/my-website/
Result: Your website is now live for free!
Real-life Example
Developers often use GitHub Pages to host portfolio websites, resumes, and
project demos without paying for hosting.
Summary
SHERYIANS CODING SCHOOL
CSS Notes
Concept / Property Description Example
display: flex Arranges items in display: flex;
a row or column
align-items Controls vertical align-items:
alignment center;
justify-content Controls horizontal justify-content:
alignment space-between;
gap Adds spacing gap: 20px;
between items
Remix Icon Free icon library <i class="ri-
github-fill"></i>
GitHub Pages Free hosting service GitHub → Settings
for websites → Pages
SHERYIANS CODING SCHOOL
