@onchiangambit

Web dev basics - css grid (part 5)

Feb 10 · 4 min read · CSS flex box is made to be used to design 2d layouts, grid is used to design 3d layouts with multiple rows and columns. It’s best to use CSS flex box within CSS grid elements to create amazing layouts. To demonstrate all the properties let’s first s...

Web dev basics - css flexbox (part 4)

Feb 9 · 5 min read · FlexBox Flex box is a display property which is used on the parent element to manipulate the positions of the children easily. Let’s create a simple layout with some basic styling to demonstrate flex box. <body> <div class="flex-container"> ...

Web dev basics - css (part-3)

Feb 5 · 5 min read · Box Model First we need to understand that in CSS all elements are boxes with content, padding, border and margin. Here is the initial HTML and CSS we have to demonstrate with examples. <style> .box{ width: 200px; text-align: cent...

Web dev basics - css (part-2)

Feb 4 · 5 min read · Inheritance There are three levels of styles applied to our document. Initial (base) user agent stylesheet (browser) CSS added by us via code. The hierarchy is as such, first the initial style is applied to any property that is mentioned in the ...

Web dev basics - css (part-1)

Feb 3 · 7 min read · Basic Selectors * selects every single element in our page. A general style people use in this is the following to remove the default styling browser adds. * { box-sizing: border-box; margin: 0; padding: 0; }...