Build this Portfolio-Gallery using CSS Grid | Complete Web Development Course #27
Summary
TLDRIn 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
📚 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.
🎨 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.
🌆 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.
🖱️ 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.
Mindmap
Keywords
💡Grid Layout
💡Flexbox
💡View Transition
💡Background Image
💡CSS Reset
💡Grid Template Columns
💡Background Blend Mode
💡Pseudo Selector
💡Utility Class
💡Media Queries
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.
تصفح المزيد من مقاطع الفيديو ذات الصلة
Words in the middle of the horizontal lines (CSS Mastery # 007) | Coder Champ
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 6
CSS Course | Make a Glassmorphic SignUp Page using Basic CSS | Mini Project | Web Development 23
Responsive HTML Table With Pure CSS - Web Design/UI Design
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
C# WPF Tutorial #5 - Grid Control for Basic Responsive Layouts
5.0 / 5 (0 votes)