Recent Comments
No comments to show.
Category Archives: Web Developer Course
The flex Property
DEFAULTS: flex-grow: 0; flex-shrink: 1; Allows flexbox to shrink elements as needed. flex-basis: auto; Instead of using the width property in flex, we use flex-basis. As shown in the following picture, if I set the flex-basis to 65 pixels, then … Continue reading
Spacing and Aligning Flex Items
display: flex; align-items: center; * justify-content: flex-start; * (This is the default. As you can see everything is pushed to to left margin.) * Two of the most important properties that apply to the flex container. Another one is gap. … Continue reading
A Flexbox Overview
What is Flexbox? Flexbox is a set of related CSS properties for building 1-dimensional layouts. The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements. Flexbox makes it easy … Continue reading
Introduction to Flexbox
If you have a lot of divs or paragraphs before you define flexbox it might look like this: Adding the following to the container changes the above to this: .container { display: flex; } Everything is now side by side … Continue reading
Box-sizing: border-box
Adding padding and border sizes will now reduce the content size, but it makes it so much easier than trying to add up border + padding + content of every element in your CSS. Without the box-sizing: border-box property your … Continue reading
Posted in Web Developer Course
Tagged border, border-box, box model, css, height, padding, section 4, universal selector, width
Leave a comment
Building a Simple Float Layout
width: 1200px; (this is a good width for float, flexbox, or CSS grid) background-color: green; (when adjusting things, it is good practice to give elements a background color so you can more easily see it. You will then remove it … Continue reading
Clearing Floats
Although, using floats is outdated, you might see this out there. So, when your height collapses in a float, there are two ways to fix it. Adding the following, will “clear up” and bring the height back (background color to … Continue reading
Using Floats
Let’s add a class=”author-img” to our HTML picture, and add the following to our CSS: .author-img { float: left; } This will act like an absolute positioning element. It will pull the .author-img out of the normal block (all by … Continue reading
Posted in Web Developer Course
Tagged css, float, lorem, section 4, shortcut, VS Code
Leave a comment
The 3 Ways of Building Layouts
LAYOUT Layout is the way text, images and other content is polace and arranged on a webpage. Layout gives the page a visual structure, into which we place our content. Building a layout: arranging page elements into a visual structure, … Continue reading
Developer Skill #2: Debugging and Asking Questions
One of the most common mistakes made by programmers is forgetting to close a HTML element. SO, what do you do? Well, you look to see when the problem first starts. If your whole document is bold, then you can … Continue reading
Posted in Web Developer Course
Tagged css, debugging, difference, html, mistake, section 3, tool, validator
Leave a comment