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.