Build this Portfolio-Gallery using CSS Grid | Complete Web Development Course #27

Summary

In this tutorial, the instructor walks you through creating an advanced grid layout with CSS, focusing on building a dynamic portfolio section with images. The video covers setting up the grid, applying styling with Flexbox, and adding background images from Unsplash. Additionally, the tutorial delves into creating a unique transition effect where the background color shifts from dark to light, simulating a day-to-night effect when hovering over images. The video concludes with a teaser for the next lesson on making the layout responsive using media queries.

Takeaways

• 🌟 The video introduces a transition from a basic grid layout to a more advanced one, using CSS Grid to create a dynamic 'rain savera' effect.
• 📚 The presenter encourages viewers to bookmark the playlist and subscribe to the channel for daily video updates.
• 🎨 The layout consists of a big container with a flex box inside, divided into a content section on the left and a gallery on the right.
• 📝 The left section contains text elements such as an h2 heading, a paragraph, and a quote, while the right section features a grid of images.
• 🖼️ Images for the gallery are sourced from Unsplash, ensuring copyright-free usage, and are set as background images within div elements.
• 🌈 A Bodoni Moda font is chosen for its elegance, with increased font size for better readability.
• 📏 The container is styled with CSS, including a gradient background, flex properties for layout, and gap settings for spacing.
• 🔲 The grid layout is created with defined rows and columns using `grid-template-rows` and `grid-template-columns`, and items are positioned to span multiple rows/columns.
• ✨ An overlay effect is achieved using `background-blend-mode` to blend the background color with the images for a darker appearance.
• 👀 A hover effect is demonstrated, changing the background color and position smoothly with CSS transitions for an interactive experience.
• 📱 The video concludes with a mention of making the layout responsive in a future video, hinting at the use of media queries for adaptability across devices.

Q & A

What is the main topic of the video script?

The main topic of the video script is creating a grid-based layout with a view transition effect for a website.

What is the term used to describe the night-to-day transition animation in the script?

The term used to describe the night-to-day transition animation is 'rain savera'.

What are the two main components of the container layout described in the script?

The two main components of the container layout are the left text part and the gallery part on the right side.

How many boxes are there in the gallery section of the layout?

There are seven boxes in the gallery section of the layout.

What is the source of the images used in the gallery?

The images used in the gallery come from Unsplash, a website that provides copyright-free images.

What CSS property is used to set the background image for all the boxes in the gallery?

The CSS property used to set the background image for all the boxes is 'background-image' with inline CSS.

What font family is used in the video script for styling the text?

The font family used for styling the text is Bodoni Moda, with both regular and black versions.

What is the purpose of the 'flex basis' property used in the script?

The 'flex basis' property is used to define the initial size of a flex item, which can be a width in a row direction or a height in a column direction.

How does the script handle the layout to make it responsive?

The script mentions that grid will try to make the layout responsive, but it also hints that media queries will be used in a future video to handle responsiveness properly.

What is the purpose of the 'background-blend-mode' property used in the script?

The 'background-blend-mode' property is used to blend the background image with a background color, creating an overlay effect on the images.

How does the script describe the hover effect on the gallery boxes?

The hover effect changes the background color, background position, and adds a box shadow to the gallery boxes, creating a smooth transition and a pointer cursor to indicate clickable elements.

Outlines

00:00

📚 Introduction to Advanced Grid Layout Techniques

The speaker introduces the concept of transitioning from a basic grid layout to more advanced features, such as creating a 'rain savera' animation that simulates a day-to-night transition. They encourage viewers to subscribe and bookmark their playlist for daily updates. The tutorial begins by examining the layout's structure, which includes a flex box container with content on the left and a gallery on the right. The gallery consists of grid items that vary in row and column spans. The speaker provides a brief overview of the code structure, including the index.html and style.css files, and emphasizes the importance of understanding the basics of grid before proceeding with the tutorial.

05:03

🎨 Customizing the Grid Layout and Typography

The speaker delves into the customization of the grid layout, starting with the container's background and the division into left and right sections. They discuss the use of flex properties such as 'justify content', 'space evenly', and 'align items center' to align the content. The background is set with a linear gradient, and specific widths are assigned to the left text and gallery parts using 'flex basis'. The typography is enhanced with the 'Bodoni Moda' font, and the speaker demonstrates how to apply this font to the body and adjust the font size. They also provide styling tips for the left text section, including font size, color, and text alignment.

10:04

🌆 Implementing Grid Layout for Gallery and Image Effects

The tutorial continues with the transformation of the gallery into a grid layout, defining columns and rows using 'grid template columns' and 'grid auto rows'. The speaker explains how to adjust the gap between grid items and how to set the size and position of background images using 'background size' and 'background position'. They introduce the concept of 'background blend mode' to create an overlay effect on images and discuss various blend modes available in CSS. The speaker also demonstrates how to apply these effects to individual grid items, ensuring that images with different dimensions are displayed correctly within the grid.

15:05

🖱️ Adding Interactivity with Hover Effects and Responsive Design

The final paragraph focuses on adding interactivity to the grid layout through hover effects. The speaker explains how to use the ':hover' pseudo selector to change the background color and position of grid items when a user hovers over them. They also discuss the use of the 'transition' property to create smooth transitions between states. Additionally, the tutorial touches on the importance of making the layout responsive, hinting at the use of media queries to adjust the layout for different screen sizes. The speaker concludes by mentioning that responsive design will be covered in more detail in a future video.

Keywords

💡Grid Layout

A grid layout is a structure used in web design to organize content in a grid of rows and columns. In the video, the creator uses a grid layout to display images in a gallery, explaining how certain items can span multiple rows or columns. The grid layout is central to the video's tutorial, as it shows how to arrange and style content efficiently using CSS Grid.

💡Flexbox

Flexbox is a CSS layout model that allows for responsive design by distributing space along a container's main axis. The video mentions using flexbox to arrange the left-side text and the right-side gallery. It also covers the use of 'flex-basis' to control the width of these elements, which is crucial for achieving the desired layout.

💡View Transition

A view transition refers to the smooth visual change from one state or layout to another on a website. The video demonstrates how to create a view transition that changes the background position and color of images when hovered over, giving the effect of 'night turning to day'. This concept is key to enhancing user experience through dynamic design.

💡Background Image

A background image is an image used as a backdrop for an element on a web page. In the video, the creator shows how to apply background images to grid items using CSS, sourcing these images from Unsplash. The correct positioning and sizing of background images are also explained to ensure they fit well within the grid.

💡CSS Reset

CSS reset is a technique used to remove default styling across different browsers by setting margins, padding, and other properties to zero. The video starts by applying a CSS reset to ensure consistency in how elements are displayed, which is an essential step before adding custom styles.

💡Grid Template Columns

Grid template columns are used in CSS Grid to define the number and size of columns in a grid layout. The video explains how to use 'grid-template-columns' to create three equal-width columns in the gallery section. This property is crucial for controlling the structure of the grid.

💡Background Blend Mode

Background blend mode is a CSS property that defines how an element's background image and background color blend together. In the video, this property is used to create a dark overlay effect on images, making the text more readable and the overall design more visually appealing.

💡Pseudo Selector

A pseudo selector is a keyword added to a selector in CSS to style a specific state of an element. The video introduces the ':hover' pseudo selector, which is used to apply styles when the user hovers over an element. This is demonstrated by changing the background color and position of images in the grid when hovered.

💡Utility Class

A utility class is a single-purpose CSS class that can be reused across elements to apply specific styles. The video shows how to create utility classes like 'row2' and 'col2' to easily expand grid items across multiple rows or columns. This approach simplifies the CSS and makes it more maintainable.

💡Media Queries

Media queries are a CSS technique used to apply styles based on the device's characteristics, such as screen size. The video mentions that while the current layout is not yet responsive, media queries will be used in a future lesson to ensure the design looks good on all devices, including phones.

Highlights

Introduction to creating a grid layout with a transition animation that simulates the change from night to day.

Explanation of how to make a layout using grid and view transition for a website.

Encouragement to bookmark the playlist and subscribe to the channel for daily video updates.

Overview of the layout's components, including a flex box container with a text part and a gallery.

Description of the grid items in the gallery and the importance of understanding the grid concept.

Demonstration of creating a folder for the grid portfolio with index.html and style.css files.

Building a container layout with a green background and text content on the left.

Styling the text content with classes and using a quote for additional effect.

Creating a gallery with seven boxes and styling them with images from Unsplash.

Use of inline CSS to set background images for the gallery boxes.

CSS reset settings for margin, padding, and box sizing to border box.

Introduction of the Bodoni Moda font for a more elegant look and setting it in the body.

Styling the container with flex properties for layout and a gradient background.

Setting the flex basis for the left text and gallery parts to control their widths.

Styling the gallery as a grid with defined columns, rows, and gaps.

Use of background size and position properties to handle image display within grid boxes.

Creating utility classes for easy grid column and row expansion in elements.

Adding hover effects using pseudo-selectors and transition properties for smooth changes.

Discussion on making the layout responsive with media queries in future lessons.

Transcripts

First it was a normal grid layout

After that, I thought to move one step forward

I will taught you some more cool things with grid

This is a transition animation

Here you can see that, night turns to day

We will call that "rain savera"

Today, we will see that how you can make such layout with the help of grid

And along with that, how you can make a view transition in your website

Before starting the video I want to tell you that, this our playlist

Our daily videos use to come here

You have to go and bookmark this

And along with that, you have to subscribe our channel

So that, you will not miss any important video

First, we will check that what we have in this layout

Here we have a big container

We will make this container, a flex box, where in the left side we will have some content

In the right side, we will have a gallery

In this gallery, we have a lot of grid items

We have already learnt Grid video

If you don't know what is grid, you can now see that video here

you must watch that video

After watching that, see this video

So that you will understand grid, well

Here some items have two rows, some have two columns

Basically it is expanded in various rows and columns

We will come into our codes and will check how it is made

For that I made a folder, this is our grid portfolio

Within that we have index.html and style.css

I have connected both of them also, like that

After that we will start. At first we will build a container layout

Which will contain all these things

These is the green big background, which you have seen

After that we will have two things inside this

First we will have a text part at left and a gallery part

First we will make the left text

Inside that there's not much inside, only we have one h2.

There are some texts written here

my portfolio and with that, there is a paragraph,

and this is a quote which, I don't know from where I have taken but I have not written by myself

With that I will give some classes

Like, for this I will give heading

This I will give subheading

For styling this

After that I will make a gallery, where there will be so many boxes inside that

So I will make 7 boxes here

Because if you will count here you will find seven boxes, 1, 2, 3, 4, 5, 6 and 7

So, there are 7 boxes

For that i have made seven boxes

Along with that I am giving some styling also to that

with that i can post some images

These all are my divs

I am going to put these images inside these on the background

So this will be our background image

So for that, I will not give ID to separate divs to set the background image property

I will select all of them together and with the help of inline CSA I will put the background image property here

Background image or

I have to just insert images within the url

These images will come from unsplash

You can use any images

I will use images from unsplash only

Because this is a cool website, where I get all images which are copyright free

You can select any images from here, like, I will choose nature

I can see some pictures of nature

I have to select them and then right click and copy image address like that

And then just paste the address here

If I paste it like that, images will get inserted in all the boxes here

I will do one thing that, I will insert images now in all the boxes

So I have now inserted images in all the boxes here

Where my divs are getting closed like here it is closing

So I have written text also within the divs of what we are seeing

Like this is the image of waterfalls , this is the image of hills and so on

Now, If I want to see, how it is looking, I will open live server

at this moment, it is looking like that

We have lot of images which are appearing strangely

So we have give style to them

Within html we will move to the CSS

At first we will insert resets, Margin-0, padding-0 and we will make the box sizing to border box

This is a standard stuff

After that, we will get a font, for this we will use a different font called, Bodoni Moda

Which looks like this, the font is really looking elegant

We will choose the regular version and the black version of it.

We will check that, this is our font

I have to input that and copy and will paste it at the top, like that

With that, I will set that font in the body also

Within font family I have to copy paste this

Bodoni Moda and then serif, like that

With that, I will increase the font size also to 1.2 ram

Usually the font size is 1 ram

I have made it 1.2 ram, so I have increased a bit big than the usual font

So now if you will see the fonts, all had changed

With that I will give styling to the container also

Container and within that, I will set the "min height" as 100 view height

It's text will display like that

Then with that I will mention justify content, space evenly

Align items center

Now I will check how it is looking

So, I have this part in my left side and this part in my right side. Alright?

After that I have to mention gap of 20 pixel

Background I will set with that cool green color which you have seen in the beginning

This is a gradient, this is a linear gradient alright?

I will insert that gradient by using linear gradient

This is a function inside which I will pass two properties

First I will mention the direction to right side then colors

Like that, our background color got set here

Now, if you see that, we have this color in the left side and this color is in the right

And it is going to right

After that, I will give some width to this left side element which is left text

Along with that, I will give some width to this gallery part also

For that I will come here and set the basics, first I will write left part as left text

I will set it to flex basis to 30%

If you are not understanding what this flex basis will do

Then you have to check my flex video where I have explained about the flex basis

Here I can tell you that, with the help of flex basis you can select a width

For the moment as our direction of flex is out row

If the direction of flex is become column then with the help of flex basis you can select a height

So, I have informed that the width of my left text should be 30%

So you can see that, the width of my left text has become 30%

30% of the width of the entire container is given to the left text

Now, I want to set the width of the gallery part also like that

Dot gallery and I will set the flex basis to 50%, like that

Now, here the width changed and it is taking 50% of the container

Now, I will give styling to the left portion

At this moment, it is looking black, let's give it a bit styling

For that I am copy pasting some codes

I have not chosen anything dangerous,

First I chose the heading and whose font size I took 3 rem, color white and text align center

Similarly, I have changed the color of the subheading to off-white

It is getting the margin from the top and I chose text align center for this also

So, it will look like this here

Now we will move to gallery

Our gallery will become a grid

I will take this gallery to down

This gallery will become a grid

For that I will mention display grid

Grid you already know

You can see that, it will not make any difference if by default you mention grid

Now I will provide some gap here

Let's give a gap of 8 pixel

For that, a horizontal gap will come within all items like this

Now, I will check how many rows and columns we have here

If you count it, there are 3 columns

First is this second is this and third is this one

With that we have 4 rows, 1 row, 2 row, 3 row and 4 row

Now we will make these columns and rows here

We will define them with the help of Grid template rows and grid template columns

First we will define grid template columns

We have 3 columns

I will give 1 fr to three of them, so that it will be evenly distributed by 1 fraction

With that I will define grid auto rows also

grid auto rows, It means give a height to all the rows that are being made here.

How much height we will give? I am giving a height of 120 pixel

So if we give a fix height here, they will get a fix height here

Let's make this first

Our text color is white

At the moment, our images are showing in full

Some portion is getting cut because we have not defined the position property of the background image

and also not defined the size property of the background image

So, for that we will come to our box

I will set the property of all the boxes

First we will choose the background then size and cover

When we defined the cover, then we are seeing complete images like that

With that we can set their position also

At the moment our images are getting cut also

If you have any image that does not have this dimension

whatever expected ratio we have given here, that image will overflow and some portion will get cut

So, we can set the portion, which we want to show at the beginning

For that, we can use background position

And I can mention here that, which position I want to show here

If you want, you can show the top position

Whatever images we have, we can see the top portion of all the images like that

So, here there is an ocean, if you see the third image

We can only see the sun portion of that ocean picture

Then I will set the position as bottom

Then you will be able to see the ocean portion here in this image

And here you will be able to see the bottom part of the waterfalls

You will see the bottom part of the beach

First I will start with the background position as top

And Transitioning we'll bring it to the center

Now it is looking like this

With that I will set my color also, color I will choose white

By that, our text which is showing here, has become white

If you want the text to be in the center, we have to make this div, a flex

By making flex, we can easily move this div to the center

Within that div whichever text was there, display flex and justify content - center

and align items center

By this, our text will come in the center like that

I want an overlay on this image

Basically, it should look a bit dark black

To get a black overlay you have two options

Either you make a div and get it over the box

After that, set the height and width of that div according to that box

you can then set the transparency

But since we are working with the background

I don't want to put any graveyard here

I want an overlay should come inside this whole picture evenly

Because, I want to set the overlay on the whole image

We can add background blend mode

So here we can set a blend mode

How does blend mode work? for that basically you need two backgrounds

One background we already set here, you can see that, all the boxes have one background image

With that I will set another background, which is background - color

At the moment, I will set the background color, let's say #222

Now, you will not be able to see any difference

Because the image is above and below that we have this background color

What I will do now? I will blend this image and the background color together

There are many ways to blend

From here you can say background, Blend mode

Here we have many ways to do that, for example we can apply multiplication here

Our background color 222 and the images above that, will multiply within them and look like this

It will look like this, It has already become dark as you can see

if you want to understand the other values of this, then we will come here inside the inspect rule

We will select any of the box here

And here we can change the property of the blend mode to check what other values are there

We have multiply property but we also have another property that is color

Like how you can see the images

color burn property, color dodge property then darken. difference, exclusion, hard light and so on

So you can use any of the blend mode whichever you like

I will use this hard light here like that

I will set, hard light here

I have set the hard light in background blend mode

Now it will look like that

Now our images are looking fine

But I have to insert them in the grid like our actually grid was made there

If we have to show like this

For that we have to check the first box where our water falls is present

It is expanded within two rows

Similarly this box with hills expanded in two columns

What we can do, we can back to our code

And I will select a box, For example, for this div I can give an ID

or we can give a class here

But suppose you gave an ID and selected box 1

And I will come here and take the box 1

And I will give it Grid columns and then span 2

Grid column basically is, grid column start and grid column end, right?

So, it will start from span 2 and will end at auto

If you don't want to write auto, that means it will end to auto only

Basically, it will take the place of two columns

If you will see this here, it is taking the place of two columns like this

If you want to give the place of two rows to it

We will write Grid row, because we want to give place of two rows to box 1

You can see that, this waterfalls have taken the place of two rows

Same thing we can do, we can access all the other boxes together

and change the grid row and grid column property of all

But instead of this, I will use an excellent property called, utility class

Basically, we will make an utility class, row 2

Whichever element will get this class, the grid row of that element will expand in 2 rows like that

I will make another utility class called, col2

Whichever element will get this class, the column of that element will expand in 2 columns like that

So, what I will do, I will give, col 2 class to box 1

Now we can see that, our box 1 has expanded in 2 columns

If I will give it row 2 then it will expand in 2 rows

I will set like that, for example, I will give this hills, col 2 class

Now, we will see that the hill is expanded in two columns

Similarity, We will do this to all other elements

We will see what else we have, we have ocean, with that I am not doing anything

We will expand rain in two rows

and will expand mountain in two columns

which one is rain, this one, I will mention row 2 here

the mountain must be the one, below it, which we will expand in 2 columns, so, col 2, like that

Here we can see that, we don't have to repeat the code of box 1 and box2

And they are getting classes on their own

I will give col 2 class to the beach

This last one is for beach, so, I will give it col 2 class

So it will expand in two columns

Like that, our layout is complete here

So, with the help of grid layout it was made very easily

Now we will see the hover effect

To create the hover effect we will use a pseudo selector, which is called hover

We have not learnt this yet

In the coming class we will study this in CSS

I should have taught you earlier

If you just wanted to learn the grid, you can stop here in this video.

But, if you want to learn more that, how the hover effect is happening

For that, I will use here the box and hover effect with that

This is basically a pseudo selector, with the help of which

you can select the hover state of this box and give styling in a different way

I will change the background color of this

When you will hover, I will change the background color from 222 to 999 like that

You will see, when I will hover, the color will change to white, like that

So their hover state is changing like this

If you want a smooth transition within this background changes

For that we can use a transition property

We will study about it later but just understand it now

Transition property, I will set as all then 1 second and ease in out

By this we are saying that, all property which are changing into hover state

Give transition to all of them, and the transition should happen within 1 second

The curve, which is present in the transition, basically in which style the transition should come

We call it animation curve

That should be ease in out

This we will study within transition

But, if you will see this now

While hovering, It will change it's state smoothly within 1 second like that

With that, I want the background position will change to center from top

So, we will change the background position from top to center like that

So, when we will hover, our background position will change from top to center

And because I am changing the background color also with that

This kind of effect is coming, like there is night

and as soon as you hover, it is becoming day

This is a cool effect

Along with that, I have given some box shadow also

Let's put a box shadow here, box shadow, which is zero from horizontal and zero from vertical

And then 4 pixel blur and color will be white

So, when you will hover on any one of them, a shadow will come behind that like this

With the help of which, you will be able to see a different effect here

Other than this, we can do one more thing here, we can change the cursor to pointer

What will happen by this? When you will hover your mouse on the image

Your mouse will change into pointer

which shows that we can click on that

Also separately, you can handle your clicks on it

Our layout is ready here

But at the moment, it is not responsive

Grid will try it's level best to make it responsive

But you will see, when we will squeeze it

then left side text and right side images will get too squeezed

Column will become narrow

Yes, this is the usual behavior of grid

But we will learn to make it responsive by using media queries

Now it is looking like this, we can change it to something like this

So that it looks elegant on the phone too, but this we will learn in our next video with media queries.