title
Easy Fullscreen Landing Page With HTML & CSS

description
In this small project I will show you how to create a simple HTML/CSS landing page with a fullscreen image in the background. We will also use a little bit of flexbox styling. CODE: Code for this project https://codepen.io/bradtraversy/pen/XerXYV SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'Easy Fullscreen Landing Page With HTML & CSS', 'heatmap': [{'end': 312.853, 'start': 285.521, 'weight': 0.767}, {'end': 394.034, 'start': 364.113, 'weight': 0.758}, {'end': 450.153, 'start': 412.846, 'weight': 0.71}, {'end': 656.27, 'start': 596.539, 'weight': 0.865}, {'end': 1075.169, 'start': 1017.246, 'weight': 0.926}], 'summary': 'Learn to create a full screen landing page with a full-width and full-height background image using flexbox for layout, css styling techniques, and practical examples of flexbox properties, to develop a visually appealing front-end project sponsored by dev mountain.', 'chapters': [{'end': 99.72, 'segs': [{'end': 37.61, 'src': 'embed', 'start': 7.352, 'weight': 0, 'content': [{'end': 7.972, 'text': "hey, what's going on?", 'start': 7.352, 'duration': 0.62}, {'end': 14.555, 'text': "guys? in this mini project we're going to be creating a landing page with a full screen image background.", 'start': 7.972, 'duration': 6.583}, {'end': 18.657, 'text': 'now this is something that stumps a lot of new developers and new designers.', 'start': 14.555, 'duration': 4.102}, {'end': 26.922, 'text': 'is how to get it so that, no matter how the how the browser is sized, uh, the image, the background image, stays full width and full height.', 'start': 18.657, 'duration': 8.265}, {'end': 30.905, 'text': "so that's what we're going to be doing today and when what we're building is not going to be anything special.", 'start': 26.922, 'duration': 3.983}, {'end': 37.61, 'text': "it's not going to be a full-fledged website, but we're going to focus on the showcase, the, the landing page, the image,", 'start': 30.905, 'duration': 6.705}], 'summary': "Creating a landing page with full screen background image, addressing new developers' challenge of maintaining full width and height regardless of browser size.", 'duration': 30.258, 'max_score': 7.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE7352.jpg'}, {'end': 99.72, 'src': 'embed', 'start': 60.908, 'weight': 1, 'content': [{'end': 66.292, 'text': "we're using flexbox to align the content here, as well as these boxes down here.", 'start': 60.908, 'duration': 5.384}, {'end': 68.474, 'text': 'but again, this is not a flexbox tutorial.', 'start': 66.292, 'duration': 2.182}, {'end': 70.896, 'text': "if you're interested in learning flexbox.", 'start': 68.474, 'duration': 2.422}, {'end': 74.179, 'text': 'i do have a video called flexbox in 20 minutes.', 'start': 70.896, 'duration': 3.283}, {'end': 76.281, 'text': "so that's what we'll be doing today, guys.", 'start': 74.759, 'duration': 1.522}, {'end': 78.883, 'text': "hopefully you enjoy it and let's get started.", 'start': 76.281, 'duration': 2.602}, {'end': 81.266, 'text': 'this video is sponsored by dev mountain.', 'start': 78.883, 'duration': 2.383}, {'end': 85.43, 'text': "if you're interested in learning web development, ios or ux design,", 'start': 81.266, 'duration': 4.164}, {'end': 91.376, 'text': 'dev mountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 85.43, 'duration': 5.946}, {'end': 94.999, 'text': 'to learn more, visit devmountain.com or click the link in the description below.', 'start': 91.376, 'duration': 3.623}, {'end': 96.157, 'text': 'alright, guys.', 'start': 95.737, 'duration': 0.42}, {'end': 97.498, 'text': "so we're gonna get started here.", 'start': 96.157, 'duration': 1.341}, {'end': 99.72, 'text': "we're gonna start off by grabbing the image now.", 'start': 97.498, 'duration': 2.222}], 'summary': 'Tutorial on flexbox alignment with sponsored 12-week boot camp by devmountain', 'duration': 38.812, 'max_score': 60.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE60908.jpg'}], 'start': 7.352, 'title': 'Creating full screen landing page', 'summary': 'Guides on creating a full screen landing page with a full-width and full-height background image, using flexbox for layout and ensuring complete responsiveness, sponsored by dev mountain.', 'chapters': [{'end': 99.72, 'start': 7.352, 'title': 'Creating full screen landing page', 'summary': 'Guides on creating a full screen landing page with a full-width and full-height background image, using flexbox for layout and ensuring complete responsiveness, sponsored by dev mountain.', 'duration': 92.368, 'highlights': ['The tutorial focuses on creating a full screen landing page with a full-width and full-height background image using flexbox for layout and ensuring complete responsiveness. The tutorial demonstrates how to create a landing page with a full screen image background that remains full width and full height regardless of browser size, ensuring complete responsiveness.', 'The tutorial uses flexbox to align the content and boxes on the page. Flexbox is used to align the content and boxes on the landing page, ensuring proper layout and design.', 'The video is sponsored by dev mountain, a 12-week design and development boot camp. The video is sponsored by dev mountain, a 12-week design and development boot camp aimed at preparing individuals for full-time jobs in the industry.']}], 'duration': 92.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE7352.jpg', 'highlights': ['The tutorial demonstrates creating a full screen landing page with a full-width and full-height background image using flexbox for layout and complete responsiveness.', 'Flexbox is used to align the content and boxes on the landing page, ensuring proper layout and design.', 'The video is sponsored by dev mountain, a 12-week design and development boot camp aimed at preparing individuals for full-time jobs in the industry.']}, {'end': 322.298, 'segs': [{'end': 143.038, 'src': 'embed', 'start': 99.72, 'weight': 0, 'content': [{'end': 101.842, 'text': 'of course, you can use whatever image you want.', 'start': 99.72, 'duration': 2.122}, {'end': 108.947, 'text': "the one that I'm using is this beach image from pexels.com, which is a fantastic site for free stock photography,", 'start': 101.842, 'duration': 7.105}, {'end': 112.47, 'text': 'very high quality images and you have different sizes to choose from.', 'start': 108.947, 'duration': 3.523}, {'end': 119.055, 'text': "this is the URL for this image, if you want this one, and I'm grabbing the large, which is the 1920 by 1280.", 'start': 112.47, 'duration': 6.585}, {'end': 125.38, 'text': "so let's click download and we're actually gonna save this to the project folder that I've already created called beach landing.", 'start': 119.055, 'duration': 6.325}, {'end': 130.104, 'text': "There's nothing in it right now, so I'm going to create a new folder in there called IMG.", 'start': 126.121, 'duration': 3.983}, {'end': 131.527, 'text': "That's for our images.", 'start': 130.345, 'duration': 1.182}, {'end': 137.293, 'text': "And we're going to save this file as showcase.jpg.", 'start': 132.167, 'duration': 5.126}, {'end': 143.038, 'text': "All right, so now that we've done that, you can see I've downloaded it a couple times.", 'start': 138.694, 'duration': 4.344}], 'summary': 'Using beach image from pexels.com, 1920x1280 size, saved as showcase.jpg in project folder.', 'duration': 43.318, 'max_score': 99.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE99720.jpg'}, {'end': 195.079, 'src': 'embed', 'start': 165.312, 'weight': 1, 'content': [{'end': 167.353, 'text': "So let's create a folder called CSS.", 'start': 165.312, 'duration': 2.041}, {'end': 171.854, 'text': "And inside there we'll create a file called style.css.", 'start': 168.233, 'duration': 3.621}, {'end': 174.075, 'text': 'And that should be it as far as the structure.', 'start': 171.954, 'duration': 2.121}, {'end': 181.932, 'text': "let's go to the index html and we need to generate some head and body tags, standard html document structure.", 'start': 175.049, 'duration': 6.883}, {'end': 185.934, 'text': "now i'm using a plugin called emit, which is absolutely incredible.", 'start': 181.932, 'duration': 4.002}, {'end': 190.817, 'text': 'it allows us to quickly add html and css abbreviations.', 'start': 185.934, 'duration': 4.883}, {'end': 195.079, 'text': 'i just did a video on it, i think two videos back, so you guys may want to check that out.', 'start': 190.817, 'duration': 4.262}], 'summary': 'Creating a folder called css, generating an html document structure, and using the emit plugin for quick html and css abbreviations.', 'duration': 29.767, 'max_score': 165.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE165312.jpg'}, {'end': 322.298, 'src': 'heatmap', 'start': 285.521, 'weight': 3, 'content': [{'end': 287.462, 'text': "And then for the text, we'll say read more.", 'start': 285.521, 'duration': 1.941}, {'end': 289.097, 'text': 'All right.', 'start': 288.837, 'duration': 0.26}, {'end': 290.418, 'text': 'So that takes care of our header.', 'start': 289.117, 'duration': 1.301}, {'end': 295.081, 'text': "Now I'm going to save this and I'm using a plugin called Adam live server,", 'start': 290.918, 'duration': 4.163}, {'end': 300.124, 'text': 'which will allow us to open up this directory on my local host and a browser.', 'start': 295.081, 'duration': 5.043}, {'end': 301.525, 'text': "Of course you don't need that.", 'start': 300.485, 'duration': 1.04}, {'end': 310.131, 'text': "You can simply open up your index HTML file, but I'm going to go ahead and say start server and that's going to open it up in the browser,", 'start': 301.545, 'duration': 8.586}, {'end': 311.852, 'text': "and this is what it's going to look like so far.", 'start': 310.131, 'duration': 1.721}, {'end': 312.853, 'text': 'All right.', 'start': 312.553, 'duration': 0.3}, {'end': 314.254, 'text': "Now, um, what I'm going to do?", 'start': 312.913, 'duration': 1.341}, {'end': 322.298, 'text': "I'm going to hold off on the rest of the HTML, the sections below it, because I really want to focus on this part of it, the showcase image.", 'start': 315.233, 'duration': 7.065}], 'summary': 'Using a plugin to open directory on local host and browser for html file.', 'duration': 110.085, 'max_score': 285.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE285521.jpg'}], 'start': 99.72, 'title': 'Creating project structure, beach webpage, and showcasing image', 'summary': 'Covers saving an image from pexels.com, creating project folders, using a plugin for html and css, creating a beach webpage with css including linking css files, using header tags, h1, paragraph, and a tags, and setting up a local server using adam live server to showcase the image.', 'chapters': [{'end': 212.213, 'start': 99.72, 'title': 'Creating project structure and saving image', 'summary': 'Covers the process of saving an image for a project from pexels.com, creating project folders, and using a plugin to quickly generate html and css structure in the text editor atom.', 'duration': 112.493, 'highlights': ["The process of saving an image for a project from pexels.com and creating project folders, such as 'beach landing' and 'IMG', is explained.", "The usage of a plugin called 'emit' for quickly generating HTML and CSS structure in the text editor Atom is demonstrated.", 'The importance of using pexels.com for free stock photography and the availability of high-quality images in different sizes is emphasized.']}, {'end': 285, 'start': 212.213, 'title': 'Creating beach webpage with css', 'summary': 'Discusses creating a webpage for the beach, including linking css files, using header tags, h1, paragraph, and a tags to generate content and style buttons.', 'duration': 72.787, 'highlights': ['The main image showcase area will have a header tag with an ID of showcase.', "The header will contain an H1 with the text 'Welcome to the beach' and a paragraph with 15 words of sample text.", 'A styled button link with a class of button will be created using the A tag.']}, {'end': 322.298, 'start': 285.521, 'title': 'Setting up and showcasing an image', 'summary': 'Covers setting up a local server using a plugin called adam live server and focuses on showcasing the image by holding off on the rest of the html.', 'duration': 36.777, 'highlights': ['Setting up a local server using Adam live server plugin.', 'Focusing on showcasing the image by holding off on the rest of the HTML.']}], 'duration': 222.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE99720.jpg', 'highlights': ['The process of saving an image for a project from pexels.com and creating project folders is explained.', "The usage of a plugin called 'emit' for quickly generating HTML and CSS structure in the text editor Atom is demonstrated.", 'The importance of using pexels.com for free stock photography and the availability of high-quality images in different sizes is emphasized.', 'The main image showcase area will have a header tag with an ID of showcase.', "The header will contain an H1 with the text 'Welcome to the beach' and a paragraph with 15 words of sample text.", 'A styled button link with a class of button will be created using the A tag.', 'Setting up a local server using Adam live server plugin.', 'Focusing on showcasing the image by holding off on the rest of the HTML.']}, {'end': 582.82, 'segs': [{'end': 407.862, 'src': 'heatmap', 'start': 364.113, 'weight': 0, 'content': [{'end': 369.178, 'text': "Actually, I'm going to use Emmett and just say FF font family colon A tab.", 'start': 364.113, 'duration': 5.065}, {'end': 374.183, 'text': 'And that will give us Arial with a backup of Helvetica and Sans Serif.', 'start': 369.258, 'duration': 4.925}, {'end': 377.11, 'text': "Save that, and you'll see the font changes.", 'start': 375.43, 'duration': 1.68}, {'end': 379.751, 'text': "All right, so let's change the size of the font.", 'start': 377.831, 'duration': 1.92}, {'end': 386.953, 'text': "I want it to be a little bigger than the default, so we'll say Font Size, and I'm going to set it to 17 pixels.", 'start': 379.771, 'duration': 7.182}, {'end': 394.034, 'text': "All right, and then we're also going to change the color to a brownish color, which is the hexadecimal value of 926239.", 'start': 387.693, 'duration': 6.341}, {'end': 407.862, 'text': "All right, and then we're just going to set the line height, the default line height, to 1.6 and save all right.", 'start': 394.034, 'duration': 13.828}], 'summary': 'Changed font to arial with backup of helvetica, set size to 17 pixels, color to #926239, and line height to 1.6.', 'duration': 51.957, 'max_score': 364.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE364113.jpg'}, {'end': 450.153, 'src': 'heatmap', 'start': 412.846, 'weight': 0.71, 'content': [{'end': 422.655, 'text': "remember, we gave the header an id of showcase, so so we're going to use that and we want to give it the background image.", 'start': 412.846, 'duration': 9.809}, {'end': 424.416, 'text': 'so background image and then url.', 'start': 422.655, 'duration': 1.761}, {'end': 433.302, 'text': 'So the URL is going to be dot dot slash, because we want to go outside of our CSS file and then into the image folder.', 'start': 426.577, 'duration': 6.725}, {'end': 437.685, 'text': 'So into IMG and then showcase dot JPEG.', 'start': 433.402, 'duration': 4.283}, {'end': 447.911, 'text': "Now, what this has done is it's given the image background to the showcase header, but it's only taking up the amount of the actual content,", 'start': 438.705, 'duration': 9.206}, {'end': 450.153, 'text': 'which is the H1, the paragraph and the link.', 'start': 447.911, 'duration': 2.242}], 'summary': "Set background image for header with id 'showcase' to showcase.jpeg outside css file", 'duration': 37.307, 'max_score': 412.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE412846.jpg'}, {'end': 559.947, 'src': 'embed', 'start': 480.863, 'weight': 3, 'content': [{'end': 488.745, 'text': 'you know, a lot of people are going to view your, your content, your website, on different devices, different browsers, different sizes.', 'start': 480.863, 'duration': 7.882}, {'end': 490.546, 'text': "so that's not going to work either.", 'start': 488.745, 'duration': 1.801}, {'end': 494.367, 'text': 'so what we want to use is we want to use the vh css unit.', 'start': 490.546, 'duration': 3.821}, {'end': 501.119, 'text': 'so if we look up css units, We have pixels, we have percentages, we have points.', 'start': 494.367, 'duration': 6.752}, {'end': 504.741, 'text': 'What we want is VH, and this stands for viewport height.', 'start': 501.579, 'duration': 3.162}, {'end': 508.243, 'text': "So this is the main secret of what we're doing here.", 'start': 505.562, 'duration': 2.681}, {'end': 514.967, 'text': 'And the viewport height, what you can think of is the whole viewport, which is the body of this browser here.', 'start': 509.004, 'duration': 5.963}, {'end': 518.149, 'text': 'Think of it as 100 slices across.', 'start': 515.428, 'duration': 2.721}, {'end': 523.533, 'text': 'And then you can fill whatever amount of slices that you want.', 'start': 519.11, 'duration': 4.423}, {'end': 526.695, 'text': 'So we want it to cover the entire thing.', 'start': 524.293, 'duration': 2.402}, {'end': 528.777, 'text': 'So we want 100 viewport heights.', 'start': 526.735, 'duration': 2.042}, {'end': 532.761, 'text': "So we're going to set it to 100 VH and save.", 'start': 529.298, 'duration': 3.463}, {'end': 533.842, 'text': "And now it's at 100.", 'start': 533.221, 'duration': 0.621}, {'end': 541.708, 'text': "And by the way, the space you're seeing up here is just from the margin from the heading by default.", 'start': 533.842, 'duration': 7.866}, {'end': 547.674, 'text': "Actually, you know what I'll do is I'll just zero out all the margin and padding by using an asterisk right here.", 'start': 541.949, 'duration': 5.725}, {'end': 550.384, 'text': 'Okay, so this is actually called a reset.', 'start': 548.643, 'duration': 1.741}, {'end': 556.366, 'text': "We're going to set margin zero and padding zero by default.", 'start': 550.444, 'duration': 5.922}, {'end': 557.366, 'text': 'There we go.', 'start': 556.986, 'duration': 0.38}, {'end': 559.947, 'text': 'All right, so we have 100 VH.', 'start': 557.946, 'duration': 2.001}], 'summary': 'Using the vh css unit to set the website to cover the entire viewport with 100 viewport heights.', 'duration': 79.084, 'max_score': 480.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE480863.jpg'}], 'start': 323.179, 'title': 'Css and vh styling', 'summary': 'Covers css styling in atom for the body, including zeroing out the margin, changing font to arial, font size to 17 pixels, font color to #926239, and line height to 1.6. it also discusses styling the showcase area with a background image using the vh css unit and explaining viewport height concept.', 'chapters': [{'end': 407.862, 'start': 323.179, 'title': 'Css styling in atom', 'summary': 'Covers adding css styling for the body in atom, including zeroing out the margin, changing the font to arial, increasing font size to 17 pixels, setting font color to brownish (#926239), and adjusting the line height to 1.6.', 'duration': 84.683, 'highlights': ['Changing font to Arial with backup of Helvetica and Sans Serif using Emmett: FF font family colon A tab.', 'Increasing font size to 17 pixels.', 'Setting font color to brownish (#926239).', 'Zeroing out the margin for the body.']}, {'end': 582.82, 'start': 407.862, 'title': 'Styling showcase image with vh', 'summary': 'Covers styling the showcase area with a background image and setting its height using the vh css unit, emphasizing the importance of responsiveness and explaining the concept of viewport height.', 'duration': 174.958, 'highlights': ['Explaining the concept of viewport height (VH) and its role in setting the height of the showcase area Viewport height (VH) is used to set the height of the showcase area, ensuring responsiveness across different devices and browsers by covering the entire viewport with 100 VH.', 'Demonstrating the use of VH to set specific proportions of the viewport height for the showcase area The VH unit is demonstrated by setting the showcase area to take up 50 VH, showcasing its flexibility in adjusting the size based on a percentage of the viewport height.', 'Utilizing the asterisk (*) to reset margin and padding to zero for the entire page The asterisk (*) is utilized to reset the margin and padding to zero by default, effectively implementing a reset for the entire page layout.']}], 'duration': 259.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE323179.jpg', 'highlights': ['Changing font to Arial with backup of Helvetica and Sans Serif using Emmett: FF font family colon A tab.', 'Increasing font size to 17 pixels.', 'Setting font color to brownish (#926239).', 'Zeroing out the margin for the body.', 'Explaining the concept of viewport height (VH) and its role in setting the height of the showcase area Viewport height (VH) is used to set the height of the showcase area, ensuring responsiveness across different devices and browsers by covering the entire viewport with 100 VH.', 'Demonstrating the use of VH to set specific proportions of the viewport height for the showcase area The VH unit is demonstrated by setting the showcase area to take up 50 VH, showcasing its flexibility in adjusting the size based on a percentage of the viewport height.', 'Utilizing the asterisk (*) to reset margin and padding to zero for the entire page The asterisk (*) is utilized to reset the margin and padding to zero by default, effectively implementing a reset for the entire page layout.']}, {'end': 781.935, 'segs': [{'end': 684.244, 'src': 'heatmap', 'start': 596.539, 'weight': 0, 'content': [{'end': 599.201, 'text': 'okay, and then we also want to set the position.', 'start': 596.539, 'duration': 2.662}, {'end': 600.421, 'text': 'i want to center the image.', 'start': 599.201, 'duration': 1.22}, {'end': 607.546, 'text': "so we're going to set background dash position and we're going to set it to center.", 'start': 600.421, 'duration': 7.125}, {'end': 607.906, 'text': 'all right.', 'start': 607.546, 'duration': 0.36}, {'end': 609.367, 'text': "so now let's go ahead and save it.", 'start': 607.906, 'duration': 1.461}, {'end': 610.147, 'text': 'and there we go.', 'start': 609.367, 'duration': 0.78}, {'end': 617.674, 'text': "so now, if i go ahead and i resize this, You'll see that it's going to be 100 viewport heights.", 'start': 610.147, 'duration': 7.527}, {'end': 622.856, 'text': "Now, if I add some content below it, under the header, let's put in a section.", 'start': 618.374, 'duration': 4.482}, {'end': 625.817, 'text': "I'm going to give it an ID of section-a.", 'start': 623.316, 'duration': 2.501}, {'end': 631.558, 'text': "All right, and then we'll just put some content.", 'start': 626.157, 'duration': 5.401}, {'end': 633.599, 'text': "We'll say lorem 100 tab.", 'start': 631.598, 'duration': 2.001}, {'end': 636.5, 'text': "Actually, let's put that in a paragraph.", 'start': 634.839, 'duration': 1.661}, {'end': 641.545, 'text': 'so lorem 100 tab save.', 'start': 638.504, 'duration': 3.041}, {'end': 647.287, 'text': 'and now, even though i have some content in there, we have to scroll down to see it, because the image, the header,', 'start': 641.545, 'duration': 5.742}, {'end': 650.308, 'text': 'takes up a hundred viewport heights, all right.', 'start': 647.287, 'duration': 3.021}, {'end': 656.27, 'text': "so that's that's the main ingredient in creating this, this full screen landing page.", 'start': 650.308, 'duration': 5.962}, {'end': 663.915, 'text': "now i don't want to just stop here and leave you with this, even though we've really covered the, the viewport height.", 'start': 657.972, 'duration': 5.943}, {'end': 665.675, 'text': "so we're going to continue to style this.", 'start': 663.915, 'duration': 1.76}, {'end': 667.936, 'text': 'now, this text and this content.', 'start': 665.675, 'duration': 2.261}, {'end': 669.077, 'text': 'i want it to be in the middle.', 'start': 667.936, 'duration': 1.141}, {'end': 671.098, 'text': "here. there's a few things you could do.", 'start': 669.077, 'duration': 2.021}, {'end': 676.06, 'text': "you could add, you know, padding to the to the top, you could center it, but we're going to use flexbox,", 'start': 671.098, 'duration': 4.962}, {'end': 684.244, 'text': 'which makes it really easy to align things and is really the recommended way to do things like this, at least recommended by me.', 'start': 676.06, 'duration': 8.184}], 'summary': 'Styling the full-screen landing page with 100 viewport heights and using flexbox for alignment.', 'duration': 42.699, 'max_score': 596.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE596539.jpg'}, {'end': 726.662, 'src': 'embed', 'start': 702.935, 'weight': 2, 'content': [{'end': 709.497, 'text': "Okay, now, there's different properties we can use here to change the layout, and I don't want it to go across like this.", 'start': 702.935, 'duration': 6.562}, {'end': 710.517, 'text': 'I want it to go down.', 'start': 709.557, 'duration': 0.96}, {'end': 715.059, 'text': 'So the default is actually a flex row, but we want to change it to a column.', 'start': 711.037, 'duration': 4.022}, {'end': 722.961, 'text': "And we can do that by saying flex-direction, and we're going to set it to column, and we'll save that.", 'start': 715.459, 'duration': 7.502}, {'end': 726.662, 'text': "And now it's going to go vertically instead of horizontally.", 'start': 723.081, 'duration': 3.581}], 'summary': 'Changing flex layout from row to column for vertical alignment.', 'duration': 23.727, 'max_score': 702.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE702935.jpg'}], 'start': 582.82, 'title': 'Front-end design techniques', 'summary': 'Demonstrates creating a full screen landing page with 100 viewport heights, discusses using flexbox for easy alignment, and explains practical examples of flexbox properties for layout manipulation.', 'chapters': [{'end': 663.915, 'start': 582.82, 'title': 'Creating full screen landing page', 'summary': "Demonstrates adding background size property as 'cover' and setting background position to center, resulting in a full screen landing page with 100 viewport heights and scrolling required for additional content.", 'duration': 81.095, 'highlights': ["The chapter explains adding background size property as 'cover' to create a full screen landing page with 100 viewport heights.", 'The tutorial highlights setting background position to center for centering the image on the landing page.', 'The transcript emphasizes that scrolling is required to view additional content due to the header occupying 100 viewport heights.']}, {'end': 702.21, 'start': 663.915, 'title': 'Styling with flexbox', 'summary': 'Discusses using flexbox to align content in the middle, which is recommended for easy alignment and makes it a flex container, aligning the content horizontally.', 'duration': 38.295, 'highlights': ['Using flexbox to align content in the middle, recommended for easy alignment and making it a flex container', 'Setting the showcase to display flex, aligning content horizontally']}, {'end': 781.935, 'start': 702.935, 'title': 'Flexbox layout and alignment', 'summary': 'Explains how to change a flex container layout from row to column, align it to the center horizontally and vertically, and add padding, demonstrating a practical example of using flexbox properties for layout manipulation.', 'duration': 79, 'highlights': ['The default flex container layout was changed from a row to a column using the flex-direction property, resulting in a vertical layout instead of a horizontal one.', 'The flex container was aligned to the center horizontally using the justify-content property, and then aligned to the center vertically using the align-items property, achieving a perfectly centered layout.', 'Additional padding was added to the sides of the flex container to improve its appearance when the window size is reduced.']}], 'duration': 199.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE582820.jpg', 'highlights': ["The chapter explains adding background size property as 'cover' to create a full screen landing page with 100 viewport heights.", 'Using flexbox to align content in the middle, recommended for easy alignment and making it a flex container', 'The default flex container layout was changed from a row to a column using the flex-direction property, resulting in a vertical layout instead of a horizontal one.']}, {'end': 944.365, 'segs': [{'end': 831.17, 'src': 'embed', 'start': 806.813, 'weight': 0, 'content': [{'end': 812.758, 'text': "And I'm going to set the font size to 50 pixels.", 'start': 806.813, 'duration': 5.945}, {'end': 814.38, 'text': 'So make it bigger.', 'start': 813.519, 'duration': 0.861}, {'end': 819.605, 'text': "And then I'm going to set a margin bottom.", 'start': 815.241, 'duration': 4.364}, {'end': 823.467, 'text': "actually, no, we don't need the margin bottom.", 'start': 820.686, 'duration': 2.781}, {'end': 828.009, 'text': "i initially was i was going to do that because i didn't have this reset up here at first.", 'start': 823.467, 'duration': 4.542}, {'end': 831.17, 'text': "but i'm just going to leave the reset all right.", 'start': 828.009, 'duration': 3.161}], 'summary': 'Setting font size to 50 pixels, adjusting margin, and leaving reset.', 'duration': 24.357, 'max_score': 806.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE806813.jpg'}, {'end': 883.739, 'src': 'embed', 'start': 852.684, 'weight': 1, 'content': [{'end': 856.507, 'text': "So we're going to say font size, and we're going to set that to 20 pixels.", 'start': 852.684, 'duration': 3.823}, {'end': 858.508, 'text': 'All right.', 'start': 856.647, 'duration': 1.861}, {'end': 862.871, 'text': "And then for the button, or it's actually a link formatted as a button.", 'start': 858.968, 'duration': 3.903}, {'end': 865.673, 'text': 'So showcase, remember we gave it a class of button.', 'start': 862.951, 'duration': 2.722}, {'end': 872.915, 'text': "So for that, we're going to change the font size to 20.", 'start': 867.295, 'duration': 5.62}, {'end': 874.956, 'text': 'font size to 18 pixels.', 'start': 872.915, 'duration': 2.041}, {'end': 882.358, 'text': "And we're going to take the underline off, so text, decoration.", 'start': 876.796, 'duration': 5.562}, {'end': 883.739, 'text': "We're going to set that to none.", 'start': 882.398, 'duration': 1.341}], 'summary': 'Setting font size to 20 pixels for button, removing underline.', 'duration': 31.055, 'max_score': 852.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE852684.jpg'}], 'start': 781.935, 'title': 'Styling web elements', 'summary': 'Covers styling h1, paragraph, and button/link elements, setting font sizes and padding, and removing default margins and underlines.', 'chapters': [{'end': 944.365, 'start': 781.935, 'title': 'Styling web elements', 'summary': 'Covers styling h1, paragraph, and button/link elements, setting font sizes and padding, and removing default margins and underlines.', 'duration': 162.43, 'highlights': ['The H1 font size is set to 50 pixels, making it larger.', 'The paragraph font size is set to 20 pixels for increased readability.', 'The button/link font size is changed to 18 pixels, with the underline removed and a brown color applied, along with a border, padding, and border radius for styling.']}], 'duration': 162.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE781935.jpg', 'highlights': ['The H1 font size is set to 50 pixels, making it larger.', 'The paragraph font size is set to 20 pixels for increased readability.', 'The button/link font size is changed to 18 pixels, with the underline removed and a brown color applied, along with a border, padding, and border radius for styling.']}, {'end': 1356.725, 'segs': [{'end': 973.186, 'src': 'embed', 'start': 947.034, 'weight': 2, 'content': [{'end': 952.059, 'text': "Now, when I make this smaller, you'll see that it kind of messes up.", 'start': 947.034, 'duration': 5.025}, {'end': 958.305, 'text': "That's because we need to add a text align center to the items in the showcase as well.", 'start': 952.419, 'duration': 5.886}, {'end': 964.592, 'text': "So right under align item center, let's do text align center.", 'start': 958.385, 'duration': 6.207}, {'end': 966.984, 'text': 'There we go.', 'start': 966.624, 'duration': 0.36}, {'end': 973.186, 'text': "Now the line height for the heading, you'll see when it breaks into two lines.", 'start': 968.765, 'duration': 4.421}], 'summary': 'Adding text align center to items fixed the display issue.', 'duration': 26.152, 'max_score': 947.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE947034.jpg'}, {'end': 1075.169, 'src': 'heatmap', 'start': 1001.076, 'weight': 3, 'content': [{'end': 1007.321, 'text': "So real quick, let's just say showcase class button on its hover state.", 'start': 1001.076, 'duration': 6.245}, {'end': 1010.323, 'text': 'We want to add a background.', 'start': 1008.201, 'duration': 2.122}, {'end': 1017.246, 'text': 'of this color here and we want to make the color of the text white.', 'start': 1011.804, 'duration': 5.442}, {'end': 1021.948, 'text': 'okay. so now we have that hover effect.', 'start': 1017.246, 'duration': 4.702}, {'end': 1023.769, 'text': 'all right, so the showcase is done.', 'start': 1021.948, 'duration': 1.821}, {'end': 1025.51, 'text': "now let's move on to the sections.", 'start': 1023.769, 'duration': 1.741}, {'end': 1027.17, 'text': "i'm going to go back to the html.", 'start': 1025.51, 'duration': 1.66}, {'end': 1028.79, 'text': "let's just make this a little bigger.", 'start': 1027.17, 'duration': 1.62}, {'end': 1038.974, 'text': "all right, and we have our section a here and we're going to have a section b as well.", 'start': 1028.79, 'duration': 10.184}, {'end': 1044.43, 'text': "so i'll just copy this whole thing And we'll go ahead and paste that in.", 'start': 1038.974, 'duration': 5.456}, {'end': 1046.732, 'text': "And we'll change this to Section B.", 'start': 1044.47, 'duration': 2.262}, {'end': 1049.554, 'text': "And then we're going to have a Section C.", 'start': 1046.732, 'duration': 2.822}, {'end': 1052.477, 'text': 'Section C is actually going to have three divs within it.', 'start': 1049.554, 'duration': 2.923}, {'end': 1057.401, 'text': "So let's say Section ID will be Section-C.", 'start': 1052.717, 'duration': 4.684}, {'end': 1064.387, 'text': "And then in here, we're going to have a div with the class of Box 1.", 'start': 1058.442, 'duration': 5.945}, {'end': 1066.269, 'text': "And let's put Lorem.", 'start': 1064.387, 'duration': 1.882}, {'end': 1067.67, 'text': "We'll put 20 words in here.", 'start': 1066.309, 'duration': 1.361}, {'end': 1072.067, 'text': "And yeah, so let's copy that.", 'start': 1069.746, 'duration': 2.321}, {'end': 1075.169, 'text': "We're going to have box one, box two and box three.", 'start': 1072.087, 'duration': 3.082}], 'summary': 'Adding hover effect to showcase class button and creating sections a, b, and c with divs and content.', 'duration': 27.714, 'max_score': 1001.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE1001076.jpg'}, {'end': 1127.57, 'src': 'embed', 'start': 1089.956, 'weight': 0, 'content': [{'end': 1098.54, 'text': "We're going to add some padding to we're going to start with Section A, so ID Section A, and we're going to add 20 pixels padding.", 'start': 1089.956, 'duration': 8.584}, {'end': 1105.532, 'text': 'Okay, so 20 pixels padding.', 'start': 1104.091, 'duration': 1.441}, {'end': 1109.916, 'text': "Let's add a background of the brown color.", 'start': 1105.853, 'duration': 4.063}, {'end': 1119.764, 'text': "Now we can't see any text because the text color by default is that brown color.", 'start': 1114.72, 'duration': 5.044}, {'end': 1122.786, 'text': "So we're going to go ahead and just change the color to white.", 'start': 1119.884, 'duration': 2.902}, {'end': 1127.57, 'text': "All right, and then let's just text align center.", 'start': 1122.806, 'duration': 4.764}], 'summary': 'Adding 20 pixels padding, brown background, and changing text color to white with center alignment.', 'duration': 37.614, 'max_score': 1089.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE1089956.jpg'}, {'end': 1188.175, 'src': 'embed', 'start': 1159.189, 'weight': 1, 'content': [{'end': 1165.872, 'text': "And then for section C, I want these three divs to be aligned horizontally, so we're going to turn them into flex items.", 'start': 1159.189, 'duration': 6.683}, {'end': 1173.995, 'text': "So we're going to say ID section C we want to display as flex.", 'start': 1166.692, 'duration': 7.303}, {'end': 1179.177, 'text': "Okay, once I save that, you'll see that they'll automatically align horizontally.", 'start': 1175.075, 'duration': 4.102}, {'end': 1188.175, 'text': 'So what I want to do is each, the first and the last box, box one and box three, I want those to have a dark background.', 'start': 1180.473, 'duration': 7.702}], 'summary': 'Align 3 divs horizontally using flexbox. set dark background for 1st and 3rd box.', 'duration': 28.986, 'max_score': 1159.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE1159189.jpg'}], 'start': 947.034, 'title': 'Css landing page project', 'summary': 'Covers the creation of section a, section b, and section c in a css landing page project, including adding padding, background color, text alignment, flexbox alignment, and color adjustments, aiming to create a visually appealing and diverse front-end project.', 'chapters': [{'end': 1028.79, 'start': 947.034, 'title': 'Styling showcase and sections', 'summary': 'Covers styling the showcase with text alignment, line height adjustments, and button hover effect, then moving on to the sections.', 'duration': 81.756, 'highlights': ['The showcase is styled by adding text alignment and line height to the items, improving the appearance of the heading with a line height set to 1.2.', 'Button hover effect is implemented by adding a background color and changing the text color to white for the showcase class button.', 'The chapter then proceeds to focus on styling the sections in the HTML.']}, {'end': 1356.725, 'start': 1028.79, 'title': 'Css landing page project', 'summary': 'Covers the creation of section a, section b, and section c in a css landing page project, including adding padding, background color, text alignment, flexbox alignment, and color adjustments, aiming to create a visually appealing and diverse front-end project.', 'duration': 327.935, 'highlights': ['The chapter covers the creation of Section A, Section B, and Section C in a CSS landing page project, including adding padding, background color, text alignment, flexbox alignment, and color adjustments, aiming to create a visually appealing and diverse front-end project.', 'Section C is structured to have three divs aligned horizontally using flex items, with specific styling for the first and last divs to have a dark brown background, achieving a visually appealing layout.', 'The tutorial includes specific CSS instructions for each section, such as adding 20 pixels padding to Section A and Section B, setting a very light gray background for Section B, and adjusting the background and color for the three divs within Section C to create a visually appealing design.', 'The creator emphasizes the diversity of content, mentioning previous projects like an Ionic 3 mobile app, and encourages support through subscriptions, likes, social media follows, and Patreon, aiming to engage and reach a wide audience.', 'The creator promotes support through Patreon, highlighting special content for patrons, special deals on future courses, and email support for all YouTube videos and projects, directing interested individuals to patreon.com/traverseemedia.']}], 'duration': 409.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hVdTQWASliE/pics/hVdTQWASliE947034.jpg', 'highlights': ['The chapter covers the creation of Section A, Section B, and Section C in a CSS landing page project, including adding padding, background color, text alignment, flexbox alignment, and color adjustments, aiming to create a visually appealing and diverse front-end project.', 'Section C is structured to have three divs aligned horizontally using flex items, with specific styling for the first and last divs to have a dark brown background, achieving a visually appealing layout.', 'The showcase is styled by adding text alignment and line height to the items, improving the appearance of the heading with a line height set to 1.2.', 'Button hover effect is implemented by adding a background color and changing the text color to white for the showcase class button.', 'The tutorial includes specific CSS instructions for each section, such as adding 20 pixels padding to Section A and Section B, setting a very light gray background for Section B, and adjusting the background and color for the three divs within Section C to create a visually appealing design.']}], 'highlights': ['The tutorial demonstrates creating a full screen landing page with a full-width and full-height background image using flexbox for layout and complete responsiveness.', 'Flexbox is used to align the content and boxes on the landing page, ensuring proper layout and design.', 'The video is sponsored by dev mountain, a 12-week design and development boot camp aimed at preparing individuals for full-time jobs in the industry.', 'The process of saving an image for a project from pexels.com and creating project folders is explained.', "The usage of a plugin called 'emit' for quickly generating HTML and CSS structure in the text editor Atom is demonstrated.", 'The importance of using pexels.com for free stock photography and the availability of high-quality images in different sizes is emphasized.', 'The main image showcase area will have a header tag with an ID of showcase.', "The header will contain an H1 with the text 'Welcome to the beach' and a paragraph with 15 words of sample text.", 'A styled button link with a class of button will be created using the A tag.', 'Setting up a local server using Adam live server plugin.', 'Focusing on showcasing the image by holding off on the rest of the HTML.', 'Changing font to Arial with backup of Helvetica and Sans Serif using Emmett: FF font family colon A tab.', 'Increasing font size to 17 pixels.', 'Setting font color to brownish (#926239).', 'Zeroing out the margin for the body.', 'Explaining the concept of viewport height (VH) and its role in setting the height of the showcase area Viewport height (VH) is used to set the height of the showcase area, ensuring responsiveness across different devices and browsers by covering the entire viewport with 100 VH.', 'Demonstrating the use of VH to set specific proportions of the viewport height for the showcase area The VH unit is demonstrated by setting the showcase area to take up 50 VH, showcasing its flexibility in adjusting the size based on a percentage of the viewport height.', 'Utilizing the asterisk (*) to reset margin and padding to zero for the entire page The asterisk (*) is utilized to reset the margin and padding to zero by default, effectively implementing a reset for the entire page layout.', "The chapter explains adding background size property as 'cover' to create a full screen landing page with 100 viewport heights.", 'Using flexbox to align content in the middle, recommended for easy alignment and making it a flex container', 'The default flex container layout was changed from a row to a column using the flex-direction property, resulting in a vertical layout instead of a horizontal one.', 'The H1 font size is set to 50 pixels, making it larger.', 'The paragraph font size is set to 20 pixels for increased readability.', 'The button/link font size is changed to 18 pixels, with the underline removed and a brown color applied, along with a border, padding, and border radius for styling.', 'The chapter covers the creation of Section A, Section B, and Section C in a CSS landing page project, including adding padding, background color, text alignment, flexbox alignment, and color adjustments, aiming to create a visually appealing and diverse front-end project.', 'Section C is structured to have three divs aligned horizontally using flex items, with specific styling for the first and last divs to have a dark brown background, achieving a visually appealing layout.', 'The showcase is styled by adding text alignment and line height to the items, improving the appearance of the heading with a line height set to 1.2.', 'Button hover effect is implemented by adding a background color and changing the text color to white for the showcase class button.', 'The tutorial includes specific CSS instructions for each section, such as adding 20 pixels padding to Section A and Section B, setting a very light gray background for Section B, and adjusting the background and color for the three divs within Section C to create a visually appealing design.']}