@geomydas
Posted
1 How to Center Items in Flexbox both Vertically and Horizontally
_justify-content: center; (centers element horizontally or vertically if you change the flex-direction)
_align-items: center; (centers element vertically or horizontally if you change the flex-direction)
Apply those 2 lines of code on your parent element (can be body, html or any parent element) Don't forget to add a height so that align-items will work.
This is how it would look like;
body
{ display: flex;
align-items: center;
justify-content: center;
min-height: 100vh
}
2 How to Center Text
-use text-align: center on the parent element or the element itself
How it would look like
h1 {text-align: center}
/* or if you want to all text in the container to align to center, do this */
.container {text-align: center}
3 HTML Best Practices
-- use an external stylesheet, don't use tag in your html
<link href='insertfilename.css' rel='stylesheet'>
--don't wrap every element in a parent element such as <div>. just apply the styles directly to that element.
--don't use div for everything. accesibility and semantics is needed. <main>, <section>, <nav>, <footer> are one of the most used. Learn HTML Semantics here; https://www.w3schools.com/html/html5_semantic_elements.asp
4 CSS Best Practices
--- if you want an element to be responsive, use a combination of max-width and width;
The max-width should be in fixed units such as px and the width: should be in relative units such as % or viewport units.
A good example is this part in your code;
height: 500px;
width: 325px;
/* border: 2px solid black; */
}```
What is better
```.main {width: 95%;
max-width: 325px; }
You shouldn't set a height for elements since at smaller screen sizes, the text will wrap and it will overflow. Use paddings and margins to achieve the desired height.
Resources for responsive design:
https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts/233002-introduction/1007804-intro-why-the-course-is-formatted-in-this-way
@Kevin Powell on Youtube
Marked as helpful
