Recent Comments
No comments to show.
Tag Archives: css
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
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
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
Developer Skill #1: Googling and Reading Documentation
Developers never know everything, they just know when something exists, and also know how to look it up. For example, say you wanted to find out how to search for the cursor that changes to a hand when you hover … Continue reading
Posted in Web Developer Course
Tagged button, center, css, google, reading documentation, section 3
Leave a comment
Pseudo-elements
Tip: Pseudo-classes are with one colon. Pseudo-elements are written with two colons. By default, any pseudo-element is an inline element. Example to un-italicize and give some space to a book emoji in a h1 element: h1::first-letter { font-style: normal; margin-right: … Continue reading
Posted in Web Developer Course
Tagged absolute, after, before, content, css, pseudo-element, relative, section 3, selector
Leave a comment
CSS Theory #5: Absolute Positioning
To get a button to be always at the bottom right side of your page you need to: (example of a button) button { font-size: 22px; padding: 20px; cursor: pointer; position: absolute; bottom: 50px; right: 50px; } (And also change … Continue reading
Posted in Web Developer Course
Tagged absolute, button, css, position, section 3, theory
Leave a comment