Frontend Development

As of this week, I’ve started to teach myself some key skills for frontend development, this is a world that I’ve had little experience with. But it’s crucial, not just to for developing front end, but to understand the front end to get a better picture of how a full stack project works.

Last weekend I did some practice through YouTube tutorials on the basics of HTML5, which is straight-forward and tbh not worthy of a blog post.

But CSS is a bigger topic, which through documenting on my blog, could make the key concepts stick.

CSS

CSS is a styling language, and without it, a website would look lame.

CSS can be inline, internal and external. but the preferred method is external and so this is the only type I’ll learn.

External CSS works by linking the CSS stylesheet to the HTML webpage in the head and then the HTML item can be tagged with a class or id which is represented in the external stylesheet.

class and id serve the same purpose, but id is usually used when only one instance of the tag is required.

class

.container{
  background color: white;
  color: black;
}

id

#container{
  background color: white;
  color: black;
}

something that pees me off is having to spell “colour” as “color”. Americanisation of the English language!

Box Model

HTML elements are based on the CSS box model. This Box model includes border and padding within width and height but not margin. In order to include it, within the element size, a calculation can be done to minus the margin size:

.container{
  width: calc(33.33% - 10px);
  margin: 10px;
}

Flexbox

Flexbox is based on 2 elements:

• flex container which is the parent element.
• flex item which is the child item. Usually there will be many flex items contained within the flex container. and the items shall have a generic tag and a item specific tag.

Both of these are just CSS class tags

Flex direction

Flexbox works on axes which orientates the direction of implementation; row and column which make the implementation occur from left to right or top to bottom respectively.

.container {
  flex-direction: column
}

Ordering

You can order flexbox items by adding and an order field to a specicific flex item, this will change the order of the HTML elements without changing the HTML elements code.

Alignment

Justify alignment

To save from using floats and margins and calculating percentages you can justify content on the flex container by using:

justify-content: space-between | center | flex-end

Align item

Works similar to justify-content but in the cross direction (vertically) common mistake is to not specify the height, which can lead to justifications not working because space is unlimited.

align-items: space-between | center | flex-end

align-self can be used on individual flex item to override the align-items styling.

Flex sizing

You can size flex items by using:

.box{
  flex: 1;
}

.box2{
  flex: 2;
}

These fields size the flex items based on the relative assigned ratios. There are more specific fields; flex-grow, flex-shrink, flex-basis.

A site that explains this a lot better than I do is: CSS Flexbox