WEBVTT

00:00.000 --> 00:08.640
understanding CSS layout. By the end of this video, you will learn about CSS box

00:08.640 --> 00:16.200
model using CSS for layout management, responsive design principles.

00:17.160 --> 00:22.680
Balanced web design means making a website look and feel even, so everything

00:22.680 --> 00:27.840
works well together. It's like arranging your room. Things aren't too crowded or

00:27.840 --> 00:34.120
too empty, and it feels nice to look at. In CSS, layout is like a map for a

00:34.120 --> 00:38.480
website. A good layout makes the website easy to use and works well on all

00:38.480 --> 00:46.760
screen sizes. CSS box model. Every part of a web page is like a box. It has

00:46.760 --> 00:53.440
margin, space outside the border to keep boxes apart. Border, the edge around

00:53.440 --> 01:00.080
the padding, padding, space between the content and the edge, content, the main

01:00.080 --> 01:08.920
part, text or image, using CSS for layout management. Apply margin, border,

01:08.920 --> 01:14.040
padding. To apply this properties, on LillyImage open the web page we developed.

01:14.040 --> 01:20.560
Add the properties and their values in the style tag. IMG, border, 10px solid

01:20.560 --> 01:29.160
black, margin, 20px zero, padding, 15px, display, block, max width, 100%.

01:29.160 --> 01:35.080
Save and view. Download or save the file as index.html click on it to see

01:35.080 --> 01:38.160
whether it open in the browser.

01:41.360 --> 01:46.920
Responsive design, principles, responsive design. The layout changes

01:46.920 --> 01:50.960
automatically to fit the screen, like a big computer screen, tablet or small

01:50.960 --> 01:56.800
phone. This ensures everything, like text, images and buttons, is easy to see

01:56.800 --> 02:02.640
and use no matter the device. Importance of responsive design works on any

02:02.640 --> 02:11.040
device, easy to use, boosts visibility, saves time, key principles of responsive

02:11.040 --> 02:18.800
design. Flexible layouts, content adjusts to fit any screen size. Flexible images,

02:18.800 --> 02:25.520
images resize to fit the screen without losing quality. Media queries, special

02:25.520 --> 02:30.840
rules and CSS change the design for different devices. Mobile first approach,

02:30.840 --> 02:37.880
design for small screens, like phones. First, then add features for bigger screens.

02:38.400 --> 02:43.440
Viewport Meta Tag helps the web page fit on mobile screens, so users don't

02:43.440 --> 02:49.520
need to zoom or scroll too much. To apply responsive design principles to the

02:49.520 --> 02:54.200
line web page using CSS, ensuring the layout adjusts smoothly across different

02:54.200 --> 03:01.120
screen sizes, desktop, tablet and mobile. Responsive design and the CSS box

03:01.120 --> 03:05.880
model, ensure a website is well organized, user friendly and looks great on any

03:05.880 --> 03:07.880
device.