DEV Community: Joëlle

Day 18 - Digging Deeper into CSS - Responsive Design

Joëlle — Tue, 17 Dec 2019 03:07:35 +0000

Today has not been a good day. I still went through with my studying but did not complete everything that I wanted to.

Anyways, I went over Responsive Design.

As screen sizes vary and consumption of the web is through mobile phones increasingly, developers have to ensure that users are able to use their site seamlessly. This is where Responsive Design comes in. It allows us to meet the needs of the many screen sizes.

Media Queries

Media Queries are CSS rules designed specifically for a variety of screen sizes. They are conditional rules and only apply if the screen size meet the parameters set by the rule. There are 2 main ways to include them in your side.

1) Link them via a separate stylesheet

One of the benefits of this method is that the link will be ignored if the device width does not meet the parameters of the media query.

If it does meet the parameters, you would have to think about load time.

 <link rel="stylesheet" type="text/css" media="screen and 
(max-device-width: 480px)" href="mobile.css"/>

2) Include then in the main stylesheet

This is my preferred method as all the rules are in one file.

@media only screen and (min-width: 480px) {
   body:after {
      content: "480px to 768px";
      background-color: hsla(180,60%,40%,0.7);
   }
}

In most of the projects I have worked on and made responsive, I was making a clone and knew what changes to make for different screen sizes.

When I was working on the YouTube clone project, I used the Grid to create the main layout. Then I set it up so that when the screen reaches a certain width, the Grid will be displayed another way.

A few things I had to think about when I was making it responsive.

1) Fixed Units

There were section in my grid where I used pixels and when I made it responsive, that section stayed the same width. You may want to stick with % or fractional units with the Grid.

2) Images

Images were the worst to deal with. At first, I gave the image an inline width and as you can imagine, no matter the width the screen, the images were still 180px. The way I fixed it was by putting the image in a div and setting the width to 100%.

That's it for today.

The streak continues ...

Day 17 - Project -NYT Article - Completed

Joëlle — Wed, 11 Dec 2019 05:48:16 +0000

I finished the NYT Article page clone.

There was a lot of content and it was the first time I handled this much content.

It was a fun exercise.

You can see a video here

I am exhausted but I am really with how this came up and the practice of finding solution for different issues.

The streak continues ...

Day 16 - Project -NYT Article Part 2

Joëlle — Wed, 04 Dec 2019 03:06:16 +0000

More of a busy day today.

Did about 2 hours of my Udacity program and then it was on to my NYT article project.

It is not complete yet but I think I might finish it within a day or two.

I had already completed the nav bar and the main picture was there. One of the first issue I encountered was centering it. It was so simple but yet I forgot.

margin:auto

That was it !

Once that was done, I moved to the image description. I usually work in a waterfall fashion and I have started thinking about my project before I start coding.

I find that in the beginning, it takes a while to accomplish anything and as I get to the middle, it's a matter of pasting and breezing through the code.

The next part was where the article actually starts. The section with the author's name and the social media icons.

The main content of this page is centered and the article content is centered within that.

One of the best tricks I have learned from Brad Traversy is the use of "utility classes". These are the lines of code that you are writing over and over. Therefore, instead of rewriting, you simply create a class and you add it to the HTML.

In order to get the narrow view of the article, I created a wrapper class that aligns the content to the left, sets the width to 50% of the main container for everything. I also set the margin to auto to center it.

As I am adding more paragraph, I simply add the class that I need.

This way, there is less CSS.

The streak continues...

Day 15 - Update

Joëlle — Tue, 03 Dec 2019 02:54:07 +0000

Long time , no see.

I got laid off and it kinda threw my plans off and I took some time to think about next steps. I still don't it well planned out. I am going to use most of the time to study more and go through courses and look for work.

I also have been accepted in the Bertelsmann Tech Udacity Scholarship Challenge Course for the Cloud Track and I am learning so much already.

Today was my first day unemployed and I spent a lot time learning the shell and a few lessons on Version Control.

Some of the commands were not too new to me. But, here are some interesting ones that I learned:

Echo

This command is just like the console.log in JavaScript and will return whatever you wrote after the command.

The double “!!” will return the last command you wrote and the result of that command. If you want to avoid this, just wrap the text in single quotes.

Viewing Files

You can use cat or less.

cat: reads the file and outputs the content. It will display everything.

less: it shows less of the file or gives you a 1 page view.
You can use “space” or the arrow key to move through the file
You can use “b” to go back
You can also use the “/” to search the file for a specific item
You can use “q” to quit

As usual, these are some of the things that were new or interesting to me.

The streak continues...

Day 14 - Project - NYT Article - Part 1

Joëlle — Wed, 13 Nov 2019 02:19:29 +0000

It's now time to practice again all that I have learned.

The goal is to recreate this NYT article page.

With my last project, I realized that it was better to think about what I wanted to accomplish before I started coding. I created from mockup on paper and it forced me to taking into account how I was going to position some elements and see if I was missing containers. By the time I was done with the mockup, coding was easier and faster.

This time I used Figma on the recommendation of a Twitter friend and this is what I have so far.

I am deciding whether to use the Grid as it would be easy to make the page responsive using grid-template-areas.

I will be using .svg for the icons and see what's different.

Anyhow, have to be up early. I will start coding tomorrow and I can't wait to see what I learn.

Day 13 - Digging Deeper into CSS - Grid Layout

Joëlle — Tue, 12 Nov 2019 04:05:12 +0000

Well, I got busy the past 3 days and got sick but I am back.

For some reason, this was a much easier concept to learn.

What is the Grid layout? On MDN, it is defined as "a two-dimensional grid system to CSS". What that means is that with this system you have access to the column and the row unlike Flexbox where you have access to the column or the row.

This is not an all inclusive list of all the properties as the goal of this is to deepen my knowledge of concepts I didn't understand enough the first time. For a full list, you can check out CSS Tricks.

As with Flexbox, there is the idea of the "Grid Container" and the "Grid Items" meaning certain properties are applied to the container and other to the items.

As you are creating the grid, you may set the value for the column or the row only and let's say that you have 8 div. You set the columns to grid-template-columns: 200px 200px 200px;. What you will get is a grid with 3 columns and however many rows necessary to fit the remaining div.

This is what is called "Implicit Track" and "Explicit Track".

Implicit track - How the grid organizes when the column or row is not set.
Explicit track - How the grid organizes when the column or row is set

The FR Unit
This is a unit for the Grid Layout that creates flexible units without calculating percentages. This is amazing for responsiveness. It represents a fraction of the available space in the Grid Container.

Minmax() Function
Used to limit the size of items when the grid container changes size. This is especially useful when you use grid-auto-rows and grid-auto-columns.

Auto Placement
When you create your grid-template, the default way for the items to be laid out is in a row. For example, if you have 6 div in 3 columns, it will be laid out as such.

1 2 3 4 5 6

You can change the layout with grid-auto-flow without changing the source code. If you give it a value of column, the items will be laid out like this now.

1 3 5 2 4 6

We know that we can use grid-auto-columns and grid-auto-rows to set the size of implicit grid items. However, if you want to set how they are placed, you can use the grid-auto-flow property. The available values are row, column as seen above and dense.

Auto-Fill & Auto-Fit

auto-fill: This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with minmax().

auto-fit: works almost identically toauto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.

Alignment

justify-content moves the entire grid (all the grid-items) within the grid container. This property aligns the grid along the row axis.

align-content moves the entire grid (all the grid items) within the grid container. This property aligns the grid along the column axis.

justify-items aligns grid items along the inline (row) axis.

align-items aligns grid items along the block (column) axis.

Anonymous Items
This is when you have text that isn't in a div or another element within a Grid Container. The text will react as a grid item as if it was wrapped in a container.

So far I have used both Flexbox and the Grid Layout in a project and I found for the page layout, I used the Grid Layout and for the rest of the page I was using Flexbox.

I'm due for another project tomorrow and I am going to be more mindful of the choices I make.

The streak continues...

Day 12 - Digging Deeper into CSS - Flexbox

Joëlle — Fri, 08 Nov 2019 06:57:36 +0000

Another day, another concept. Today we're flexing on Flexbox.

With Flexbox, "flex containers" and "flex items" are introduced. Think of them like "parent element" and "child element" but they are boxes. The "flex container" the box that is the parent element and its main goal is to organize the boxes that are the "flex items" (child element) and set their position.

Understanding this is key as you will want to ensure that you are adding properties to the elements you want.

So now you have the container and the items and you want to move the items and you will do so mainly with the container. You will want to use the available properties for Flexbox but you should know that a specific property is preset to move in a certain direction, that is the "main axis" and the cross "axis".

Here is a visual that helped me in the beginning and will help in understanding which property to use to move the items in a specific position.

I am organizing the below into properties for the flex container and the flex items. CSS Trick has an excellent breakdown of the value of the different properties.

Flex Container Properties

These only affect the flex items boxes and not the content inside them.

1- Horizontal Alignment
justify-content is used to position the flex items horizontally along the main axis. There are multiple values such as center, flex-start, flex-end, space-around and space-between.

The default value for this property is flex-start.

2- Vertical Alignment
align-items is used to position the flex items vertically along the cross axis. The values are similar to justify-content.

They are: center, flex-start, flex-end, stretch and baseline.

The default value for this property is stretch.

3- Flex-Wrap
Imagine that you have a container that has a set width of 600px. The flex items are set to a width of 200px and there are 5 flex items. What will happen is that the flex items will line up horizontally and thus creating a horizontal scroll bar. Of course, we don't want that and that's where flex-wrap:wrap comes in. It defines what happens to the flex items that are outside the container.

4- Flex-Direction
This defines whether the flex items will be displayed horizontally or vertically. The main two values are flex-direction: row; and flex-direction: column.

The default direction is flex-direction: row;.

Note
When the flex-direction; is row, the main axis is horizontal and the cross axis is vertical.

When the flex-direction; is column, the main axis is vertical and the cross axis horizontal.

Another cool thing you can do with flex-direction; are with the values row-reverse and column-reverse. This is really cool way to change the order of the flex items.

Flex Items Properties

Flex Container only affect the direct child, the flex items, and they don't affect the content the the direct flex items. These properties can be used to manipulate the content inside the flex items.

1- Order
The purpose of the order property is to create lay the items out in ordinal groups. They are assigned a number and the items are then laid out in order starting with the ones with the lowest value. If two items have the same order value, they will be place according to the HTML placement.

MDN explained this very well.

Let's look at this example from MDN.

Now, you wouldn't see the above often. The order property could be given to only two flex items.

Let's take the example above and keep the order property to source item 3 and 5 and the rest will be empty. What would happen?

Source item 3 and 5 will be moved to the end of the row. Remember how we said that the ordinal group always starts from the lowest. Well, each flex item has a default value of 0. Therefore, when we added the order: 1; to source item 3 and 5, we gave them a higher value than 0 and they are pushed to the back.

Another value I've seen is the negative value which will put the item to the from of the other items since the value is lower than 0.

2- Align-Self
align-self is used to position the content within the flex items vertically along the cross axis.

It has the same value as align-items.

3-Flex

The flex CSS property sets how a flex item will grow or shrink to fit the space available in its flex container. It is a shorthand for flex-grow, flex-shrink, and flex-basis. The default property settings is flex: 0 1 auto;.

flex-grow: This specifies how much of the extra available space that a flex item should take. The default is 0, meaning if there is extra space the flex item will not stretch.

flex-shrink: When there is not enough room, this specifies how much space should a flex item give up in proportion to the other flex items. The default is 1 meaning that when there is not enough room, the flex items should be spread evenly.

flex-basis: This specifies the initial size of the flex item before CSS makes adjustments with flex-shrink or flex-grow.

The units used by the fflex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.

Wow, another one down. It is 2am and I didn't think I would be able to do this today but I pushed through.

The streak continues...

Day 11 - Digging Deeper into CSS - Positioning

Joëlle — Thu, 07 Nov 2019 03:41:51 +0000

Positioning, what can I say?

Every time I think that I got it, I get confused some more. This time, I went through another A List Apart article and it clarified some things.

Positioning relates to the position property in CSS. This property helps align elements in the layout. There are five values static, relative, absolute, fixed and sticky.

They also have offset properties such as top, right, bottom, left and z-index. These properties do not work if you don't declare a position or if the position is static as it is the default position.

z-index is a way to represent the order of the elements. If you want to push an element before another element you would use the z-index. The higher the value of this property, the more forward the element will be.

Let's go through the position properties now:

Static

This is the default of all elements and they will remain in their normal flow.

Relative

From what I understand, there are two things that are happening with position:relative.

a) Whatever element you set to position:relative will now have access to the offset properties and you will be able to use them to move the elements around.

b) Another exciting thing with position:relative is that when you set it to a parent element, it creates a coordinate system, a reference point for offset properties, for the child element. This means that if I use the offset property left: 100px; on the child element, the reference point will be the parent element and not the document (the body). This child element will be pushed 100px from the left of the parent element.

Absolute

Setting the position to absolute will remove the element from the normal flow and other elements will act as if it's not on the webpage.

One key thing to remember is that an element that is positioned absolute is relative to its parent element. To break this down, if you have the following:

.parent-element { position: relative; width: 200px; height: 200px; }
.child-element { position: absolute; left: 100px; width: 200px; height: 200px; }

The child element will be positioned 100px from the left of the parent element. If the parent element does not have a position or if the position is position: static, the child element will look out for the next element set to relative until it reaches the document.

You can see a little exercise I did on CodePen.

Fixed

This is similar to absolute but they are relative only to html and will not react to any parent element. It takes the element out of the normal flow and you can use the offset properties to set where the element stays.

Sticky

I had to do a bit more reading about that. The main thing to understand about this position is that it is based on the user's scroll position. It is a mix of position:relative and position: fixed depending on the scroll. You must also use the offset property to tell the element where to stick.

For example:

position:sticky; top:0;

At first the element is relative meaning in the normal flow based on the HMTL placement. As the user scroll past that element, it goes to the top of the page and stay there. If the user scrolls the other way, it goes back to the usual HTML placement.

That's it for today, the streak continues!

Day 10 - Digging Deeper into CSS - Floats

Joëlle — Wed, 06 Nov 2019 03:09:14 +0000

Today is Floats and even though I know the basics, I wanted to understand it better.

I started digging into A List Apart article and wanted to write down my understanding of what I read.

To understand Floats is to understand the normal flow of element and how the float property changes the behavior of that element.

For example we have block level elements such as div and p. They always take the full width of the page. Once you apply the float property, they start behaving like inline elements such as a and img. Quick reminder, inline elements only takes as much space as their content.

Quick Note About Floats
Once you use the float property, it's almost like using the universal selector. This property will be applied to the rest of the elements. This means that other elements will be out of their normal flow as well whether you applied the float property to them.

The solution is to clear the float and you do so with the clear property. There are five available values: left, right, both, inherit and none.

See a good explanation and example here

Placement of your Floated Elements in HTML

One of the new things I learned was how the placement of your floated element in HTML can contribute to the float not working property and setting it out of the container you put it.

If the floated elements is set before the non floated element, you run the risk of having the floated element get out of the container.

This happens because of something called collapsing which essentially means that since the floated element is not in the normal, the parent element (the container) is behaving as if the element is not there.

One solution to this is to add an inline CSS in the HTML to clear the float. That adds extra markup in the page and that is not the ideal fix.

Another solution is to add an overflow to the parent element (the container) and set it to overflow:hidden. As this property was not meant for this purpose, there are risks such as scrollbars and hidden items. You can find more about it here and here

Last solution is to use the pseudo selector ::after with the parent container and adding the clear property there.

I starting to enjoy writing these, I learn so much better when I try to think of a way to explain what I just read or watched.

The streak continues...

Day 9 - Digging Deeper into CSS - The Box Model

Joëlle — Tue, 05 Nov 2019 01:03:07 +0000

I'm back. I'm still struggling with keeping a good pace and for now I think I'm gonna hold myself to 2 hours of studying minimum on weekdays and 4 hours on weekends. Outside of those hours, I will still be reading different blogs and watch videos. I have weeks where I spend a lot of hours outside of work studying and coding then I crash. I crash because I am not sleeping regularly and for a better learning experience.

And with that, I am hoping this change is going to help me be consistent.

So I have taken a few HTML and CSS courses and followed some projects and even made my own. While I have learned a lot I want to get deeper into CSS and for the next few days, that's what I will be doing.

Today, it's all about the Box Model and the things that I missed:

The Box Model is a concept that states that every element on a page is a rectangular box and may have width, height, padding, borders, and margins.

Sizing Inline Elements

Inline Elements are elements that are displayed inline and takes the width of the content they hold. They do not take the full width of the page unlike block elements. As such, they do not accept properties such as weight and height. They also do not accept the vertical margin top and bottom.

I wanted to know if there is a way we can size an inline element using CSS and I found 2 solutions:

1- Setting the width and height in HTML either directly or using inline CSS.

a) HTML
img src="sample.jpg" width="100px" height="100px"

b) Inline CSS
img src="sample.jpg" style="width:100px;height:100px;"

2- Setting the display of the elements as block or inline-block in CSS.

a) block will sit in a single line and you might need to tweak more if you want to other elements on the same line.

b) inline-block will sit multiple elements on the same line.

Using Border-Radius
I may have seen more but the only time I used border-radius, it was on all corders to slightly round them or to make a circle.

The shorthand property for border-radius goes top-left / bottom-right and top-right / bottom left

To see how this worked, I hopped on code pen and played and saw how I could use that property to make shapes.

Day 8 - Project - Finishing Intuit Sign Up Page

Joëlle — Fri, 25 Oct 2019 00:36:07 +0000

I completed the Intuit sign up page clone.

Going into it was a bit easier this time around for a few reasons:

1- I had just completed a project where I cloned a YouTube page. I got a bit more confident since this was the first project that I completed entirely on my own. The previous projects were with the course I took and the ones I attempted on my own were loosely based on the ones from the course.

2- This time, I planned the project. I drew the layout on paper. This forced me to think about the elements interact with each other. I still had to change the layout a bit. The area that has the CAPTCHA details has a background color that spans the width of the container but the rest of the elements in that section are in a container with padding. To solve this issue, I split that section from the other container so that the main tags had two children elements instead of one. The first child had the padding and the second had the background color

I am happy with the project and as I practice more, I am thinking of writing better and more efficient code instead of anything that works.

Day 7 -Project- Intuit Sign Up Page - Part 1

Joëlle — Tue, 22 Oct 2019 04:09:51 +0000

Between work, life and studying, I have been running on empty.

My goal as I am going through this journey is to code/ learn everyday. Some days are more intense than others but I pay attention to when my brain can't no longer handle it.

My next project for HTML/CSS is to recreate the Intuit Sign Up form. This time around, I designed the skeleton of the project on paper. I am finding that it is way easier to actually code if you have planned your layout and gathered images or anything else you may need.

Here is a look at what I planned.

At this time I have not completed it but here is a preview:

I will complete this tomorrow. As I am learning to change career, I have to remind myself to not race to complete something but rather take the time to understand it and only then I will move on.

On to a new day!