Just a quick lesson about CSS Grid vs Flexbox vs Bootstrap
Quick lesson to get in my daily, learning differences between CSS grid, flexbox and bootstrap.
Days since last Zero Day: 4 (10/9/2020)
where i write in public
Quick lesson to get in my daily, learning differences between CSS grid, flexbox and bootstrap.
Days since last Zero Day: 4 (10/9/2020)
Good lesson today to learn how to incorporate pre-built HTML and CSS code and template instead of building everything from scratch.
Some great resources include Bootstrap, Animate.css, Creative Tim and many more.
Days since last Zero Day: 3 (10/9/2020)
Getting my feet wet today learning to build a startup landing page using bootstrap.
Some basic edits in <meta tag> and how to link to Google Fonts and Bootstrap to get the fonts and CSS respectively.
Days since last Zero Day: 2 (10/9/2020)
Just a quick practice with a robot animation style.css to ensure that all the div are centered correctly.
Days since last Zero Day: 1 (10/9/2020)
h1 {
text-align: center;
font-family: ‘Roboto’, sans-serif;
}
.robots {
flex-wrap: wrap;
display: flex;
justify-content: center;
}
.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
background-color: #5f93e8;
}
.android {
}
.head {
width: 200px;
margin: 0 auto;
height: 150px;
border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eyes {
display: flex;
}
.head:hover {
width: 300px;
transition: 1s ease-in-out;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm, .right_arm {
width: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.left_arm:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_arm {
margin-left: 10px;
}
.right_arm:hover {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
/* This is another useful property. Hmm what do you think it does?*/
margin: 0 auto;
display: flex;
}
.left_leg, .right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-left: 30px;
margin-right: 30px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg {
margin-left: 30px;
margin-right: 30px;
}
.right_leg:hover {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.left_eye, .right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
/* These properties are new and you haven’t encountered
in this course. Check out CSS Tricks to see what it does! */
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
Learning some more CSS by understanding the critical render path; how a website renders by loading html, css and js files.
Learnt and practised flexbox by playing the Flexbox Froggy game.
Some CSS3 standards and implications for different website browsers; namely to remember to check if CSS properties being used are supported by browsers.
Days since last Zero Day: 3 (5/9/20).
Today’s lesson is understanding the box model for CSS. Every p/div/section can be arranged as a box consisting of the content, padding, border and margin.
You use px for absolute values for size and space, em for relative size to the surrounding content and rem for relative size to root element.
Days since last Zero Day: 3 (5/9/20)
Just a quick one today on how to position images in html and css, by using the img selector to style images and also abit on styling footer after an img selector.
Days since last Zero Day: 2 (5/9/2020)
Some practice with CSS with a game (https://flukeout.github.io/).
Learnt how to edit text and font, and loading custom fonts from Google Fonts.
Days since last Zero Day: 1 (5/9/2020)
Bad day at work and feeling utterly drained.
My one line code today is writing a css file and making all my pages have a background color of red, because that’s my favourite color.
firstwebsite.danialfaizsal.repl.co
Days since last Zero Day: 4 (31/8/2020)
Pretty fun refresher on css properties and selectors today and playing around with stylesheets.
– CSS Tricks: cheatsheets and guides on everything CSS
– Paletton Color Picker: color scheme picker when choosing colors to mix and match
– MDN Reference on Cascading and Inheritance
CSS Cheat Sheet
Reference:
*https://www.w3schools.com/cssref/css_selectors.asp
*https://css-tricks.com/almanac/
Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter.
.class
#id
*
element
element, element
element element
element > element
element + element
:hover
:last-child
:first-child
!important (not recommended)
What selectors win out in the cascade depends on:
-Specificity
-Importance
-Source Order
Days since last Zero Day: 3 (31/8/2020)