The flex Property

Posted on May 27, 2022 by Ann 
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 flex automatically sizes each word to 65 pixels (with a height of 29 or 150 pixels), except for languages, HTML, and amazing which needed more than 65 pixels to begin with.

  • The browser will figure out the optimal length.
  • Flexbox is allowed to shrink elements to fit the container. For example, you write “flex-basis: 200px;” but there is only space for each element to have 140 pixels each, so that is what will show in the browser.

If we:

flex-basis: 150px;
flex-shrink: 0;

Now each element is 150 pixels wide, but now because the flex-shrink is set to 0 (and flex is not allowed to adjust elements), but the content no longer fits the container.

flex-grow: 1;      It seems that there is equal space after all of   the words.

You can even set different growth sizes, and flex will even it out. After taking out the order and shortening the sentence to “HTML and CSS are amazing”.

To do that you would need flex-grow on two different elements.

flex-grow: 1;would be normal, actually it doesn’t have to be “1”. It just has to be the same number. If all of your flex-grow has the same number, like “5”, they would all be the same size.
flex-grow: 2;would have double the extra space after the word “HTML” and amazing compared to the other words.

We can still have a gap in between:

gap: 10px;

For the following example I turned off all of the flex-grow in the individual elements.

flex property shorthand (with default values):
flex-grow: 0; flex-shrink: 1; flex-basis: auto;

You write the shorthand like this if you want flex-grow(0); flex-shrink(0); and flex-basis(100px);:

flex: 0 0 100px;

Posted in Web Developer Course | Tagged , , , | Leave a comment

Spacing and Aligning Flex Items

Posted on April 28, 2022 by Ann

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.

Look at these to see what the original HTML and CSS looks like, compared to the following examples.

Sometimes you want each element on a different line, not just in the center as defined with (align-items: center;) So, you would use (align-self: ; ) to do that.

By default everything is at the 0 position, so if you want to move something to the front of the line:

order: -1;

.el – -1 {HTML
align-self: flex-start;default, pushed to top of container
}
.el – -5 {amazing
align-self: stretch;stretch to entire width of container
}
.el – -6 {languages
order: -1;order: -1: pushes it to the beginning before 0
}
Original statement is “HTML and CSS are amazing languages to learn” compared to below:
.el – -1 {HTML
align-self: flex-start;default, pushed to top of the container
order: 2;order 2: is after 0 and 1, so it is at the end of the line
flex-grow: 3;gets wider- grows relative to the rest of the flexible items inside the same container.
}
.el – -2 {and
align-self: flex-end;pushed to the bottom of the container
flex-grow: 2;gets wider- grows relative to the rest of the flexible items inside the same container.
}
.el – -5 {amazing
align-self: stretch;stretch to entire width of container
order: 1;after order 0 and before order 2, or 3, 4, etc.
}
.el – -6 {languages
order: -1;pushes it to the beginning space before order 0
}
Original statement is “HTML and CSS are amazing languages to learn” compared to below:
.container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
}

Tip: gap puts space or a “gap” equal distance between your items. It eliminates having to use the margin-right: 1em; and then having to remove the margin-right space after your last item.

Posted in Web Developer Course | Tagged , , , | Leave a comment

A Flexbox Overview

Posted on April 21, 2022 by Ann

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 to automatically align items to one another inside a parent container, both horizontally and vertically.
  • Flexbox solves common problems such as vertical centering and creating equal-height columns.
  • Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner HTML and CSS code.
Posted in Web Developer Course | Tagged , , | Leave a comment

Introduction to Flexbox

Posted on April 21, 2022 by Ann

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 with no extra spaces. Everything vertically is as tall as the tallest element, which is the CSS green color (which height was set to 150px in the style section). If no height was assigned, then the colors would only occupy the space necessary around the letters or content.

One of the most powerful things in flexbox is the centering.

font-family: sans-serif;
background-color: #ddd;
font-size: 34px;
margin: 40px;
display: flex;
align-items: center;

There are also:

align-items: flex-start; (the saying would be at the top of the gray background-color)

align-items: flex-end; (the saying would be at the bottom of the gray background-color)

align-items: stretch; (is the default value. So all of the items will stretch as tall as the tallest element, like the first example shown.)
justify-content: center; (now the saying is centered, left side and right side, between the gray background color)
justify-content: space-between; (now there is equal spaces between all of the words.)

Posted in Web Developer Course | Tagged , , , , | Leave a comment

Box-sizing: border-box

Posted on April 5, 2022 by Ann

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 aside might be too wide (because of padding, margin, width properties) to fit on the side and be pushed down to the bottom of the page.

Box-sizing does not get inherited, so it does not work if you put it in the CSS body element. It does work in the universal selector:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Posted in Web Developer Course | Tagged , , , , , , , , | Leave a comment

Building a Simple Float Layout

Posted on March 30, 2022 by Ann

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 [background-color] when the page is how you like it.)

A common page layout is the following:

To move the aside next to the article in float:

article {
background-color: green;
width: 825px;1200px-825px-300px= 75px space between article and aside
float: left;
}
aside {
background-color: purple;
width: 300px;
float: right;It is floated all the way to the right margin.
}
footer {
background-color: yellow;
clear: both;Clears the float, so that the footer is at the bottom of the page, and not “floated” below the aside.
}
Posted in Web Developer Course | Tagged , , , | Leave a comment

Clearing Floats

Posted on March 28, 2022 by Ann

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 your floated header) to your project.

1. In your HTML, add a empty div class:

	<div class=”clear”></div>

In your CSS:

	.clear {
	  clear: both;
	}

2. Clearfix hack: It is cleaner. Nothing added to your HTML, except another class named “clearfix”.

Before in your HTML:

<header class="main-header>

You can add another class separating it with a space in HTML:

<header class="main-header clearfix">

In your CSS:

.clearfix::after {
clear: both;Our previous code had both a left and a right float to clear.
content: “”;Have to have content for pseudo elements, even if empty.
display: block;Have to change the inline to a block display.
}
Posted in Web Developer Course | Tagged , , , , | Leave a comment

Using Floats

Posted on March 25, 2022 by Ann

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 itself) position, and now everything else will “float” around it.

  • So now, the paragraph around it will squish to the right of the picture-image, and the things below it are squished to the bottom of it, too.
  • If a long paragraph is next to it, the paragraph will wrap around the picture.
  • If you try to put a padding-left to the paragraph next to it (to get more space between them), it won’t work how you think it should. The padding-left will slide under the picture, and will not make any difference until you pad wider then the picture.

Tip: In VS Code you can add extra words or text by typing lorem, and pressing enter or tab. And VS Code will add a paragraph of random latin words to fill up space.

  • Also typing “lorem10” will give you 10 words specifically.

Tip: In VS Code you can move a line up or down, instead of cut and paste, by going to the “Selection” tab and clicking on the appropriate thing or:

  • Move line down= Alt + arrow down
  • Move line up = Alt + arrow up

Let’s add a class-”author” to our HTML paragraph, and add the following to our CSS:

.author {
padding-left: 80px;To move it past the 50 px width picture
padding-top: 10px;To center or lower the text below the top of the picture edge
float: left;To “float” the text left of the picture, which will give the full
}padding-left effect (80px) between the picture & paragraph.

Let’s change it again:

.author {
/*padding-left: 80px; */
padding-top: 10px;
float: left;We need the “float” for margin-left to work.
margin-left: 20px;Now there is 20px between the picture & the paragraph.
}
float: right;The whole paragraph will “float” to the right side of the page.
It will be right justified.

Important note: If all of the child elements are “floated”, then you will lose your background color height, for example. Items that are “floated” are taken out of the normal containers (it is like they are not on the page anymore), and without anything inside a container, it is said that the elements height has collapsed.

Posted in Web Developer Course | Tagged , , , , , | Leave a comment

The 3 Ways of Building Layouts

Posted on March 23, 2022 by Ann

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, instead of simply having them placed one after another (normal flow).

COMPONENT LAYOUT

  • Components are smaller things arranged in a block, then is brought into the bigger layout.
  • Positioning between a container and its components.
  • Positioning elements belonging to a component.
  • Positioning sibling components.

1. Float Layouts – The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated fast.

2. Flexbox – A modern way of laying out elements in a 1-dimensional row without using floats. Perfect for simpler component layouts.

3. CSS GRID – A modern way for laying out elements in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components.

Posted in Web Developer Course | Tagged , , , , | Leave a comment

Developer Skill #2: Debugging and Asking Questions

Posted on March 17, 2022 by Ann

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 look in your html file and see if you forgot (or accidentally erased) the ending </strong> tag.

Another mistake is having an extra closing tag. So, you do the same thing, go into your html and look at where the problem begins to fail.

HTML validator tool: it will help you see if your HTML is valid or not. How to use the tool:

  • copy all of the code.
  • In the google search bar type: html validator. It is also: https://validator.w3.org
  • You can copy and paste your HTML code in and have it “Check” your code.
  • It something is not working, it will reply in red with the errors listed.
    • One unclosed </strong> tag will cause a lot of errors.
  • If it reply’s in green, it might read: “Document checking completed. No errors or warnings to show.”

Difference checker tool: it will help you see the differences between two different HTML codes that should be the same.

  • In the google search bar type: diffchecker. It is also: https://www.diffchecker.com
  • Copy and paste your HTML code into the “Original Text” side and copy and paste a different source of that same code into the “Changed Text” side.
  • Scroll down to “Find Difference” button and click it.
  • It will highlight the differences in different colors.

CSS common mistakes:

  • Conflicts between selectors. (Two different margin, color, font-weight).
  • Misspelling property names. (Spelling right as rigth, for example).
  • Beginners sometimes don’t link up the <link href=”style.css” rel=”stylesheet” /> properly between the HTML and the CSS.
  • The fix: It is always helpful to go “inspect” your CSS code and see what styles are being applied. You can also make adjustments there before you change anything in your code.

Posted in Web Developer Course | Tagged , , , , , , , | Leave a comment