title
Basic Parallax Website With HTML & CSS

description
In this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips along the way CODE: Code for this video http://www.traversymedia.com/downloads/parallaxwebsite.zip SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa BECOME A PATRON: Support me directly for even $1 per month 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': 'Basic Parallax Website With HTML & CSS', 'heatmap': [{'end': 399.423, 'start': 346.05, 'weight': 0.791}, {'end': 472.323, 'start': 437.172, 'weight': 0.762}, {'end': 654.54, 'start': 609.148, 'weight': 0.858}, {'end': 779.057, 'start': 752.717, 'weight': 0.735}, {'end': 1087.067, 'start': 1073.091, 'weight': 0.788}, {'end': 1136.172, 'start': 1094.172, 'weight': 0.787}, {'end': 1236.47, 'start': 1218.146, 'weight': 0.765}], 'summary': "Learn to create a parallax website with fixed background images, utilizing high-quality free stock images and different image sections, and add parallax scrolling effect and responsive design features for mobile devices using html and css. also, discover web development environment setup and sponsored message for dev mountain's 12-week design and development boot camp.", 'chapters': [{'end': 83.193, 'segs': [{'end': 33.252, 'src': 'embed', 'start': 7.352, 'weight': 0, 'content': [{'end': 15.175, 'text': "hey guys, in this quick project we're gonna be building a parallax type of website with some fixed images in the background that we can, you know,", 'start': 7.352, 'duration': 7.823}, {'end': 20.497, 'text': 'we can keep in place and we can scroll and see different parts of the image in the website background.', 'start': 15.175, 'duration': 5.322}, {'end': 21.677, 'text': "so this is what we'll be building.", 'start': 20.497, 'duration': 1.18}, {'end': 23.498, 'text': 'see, we have a high quality image here.', 'start': 21.677, 'duration': 1.821}, {'end': 23.978, 'text': "they're also.", 'start': 23.498, 'duration': 0.48}, {'end': 25.319, 'text': "they're all free stock images.", 'start': 23.978, 'duration': 1.341}, {'end': 27.119, 'text': "I'll show you where to get them.", 'start': 25.319, 'duration': 1.8}, {'end': 28.24, 'text': 'and we just have that.', 'start': 27.119, 'duration': 1.121}, {'end': 33.252, 'text': 'we have them faded out a little bit, we added a little bit of opacity And then we have a heading here.', 'start': 28.24, 'duration': 5.012}], 'summary': 'Building a parallax website with fixed, faded stock images and a heading.', 'duration': 25.9, 'max_score': 7.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ7352.jpg'}, {'end': 83.193, 'src': 'embed', 'start': 45.719, 'weight': 1, 'content': [{'end': 46.499, 'text': 'Same thing here.', 'start': 45.719, 'duration': 0.78}, {'end': 49.101, 'text': 'We have this cityscape.', 'start': 46.539, 'duration': 2.562}, {'end': 51.522, 'text': 'And we can see different parts as we scroll.', 'start': 49.461, 'duration': 2.061}, {'end': 54.344, 'text': 'And then we have the first image at the bottom again.', 'start': 51.902, 'duration': 2.442}, {'end': 60.145, 'text': "all right, so it's very simple, but i think this looks very clean and you guys can use this in in future projects.", 'start': 54.944, 'duration': 5.201}, {'end': 62.946, 'text': "so that's what we'll be building in this mini project.", 'start': 60.145, 'duration': 2.801}, {'end': 64.507, 'text': "so let's get started.", 'start': 62.946, 'duration': 1.561}, {'end': 66.887, 'text': 'this video is sponsored by dev mountain.', 'start': 64.507, 'duration': 2.38}, {'end': 71.068, 'text': "if you're interested in learning web development, ios or ux design,", 'start': 66.887, 'duration': 4.181}, {'end': 77.01, 'text': 'dev mountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 71.068, 'duration': 5.942}, {'end': 80.631, 'text': 'to learn more, visit devmountain.com or click the link in the description below.', 'start': 77.01, 'duration': 3.621}, {'end': 83.193, 'text': "All right guys, so we're going to go ahead and get started.", 'start': 81.351, 'duration': 1.842}], 'summary': 'Building a cityscape in a mini project sponsored by dev mountain for web development, ios, or ux design, aiming to secure a full-time job in the industry.', 'duration': 37.474, 'max_score': 45.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ45719.jpg'}], 'start': 7.352, 'title': 'Creating a parallax website', 'summary': 'Covers building a parallax website with fixed background images, utilizing high-quality free stock images and different image sections, offering a clean design. it also includes a sponsored message by dev mountain for their 12-week design and development boot camp.', 'chapters': [{'end': 83.193, 'start': 7.352, 'title': 'Parallax website with fixed background images', 'summary': 'Covers building a parallax website with fixed background images, including high-quality free stock images and sections with different images, providing a clean and simple design that can be used in future projects. it also includes a sponsored message by dev mountain for their 12-week design and development boot camp.', 'duration': 75.841, 'highlights': ['The project involves building a parallax website with fixed background images, including high-quality free stock images and sections with different images.', 'The website design is simple and clean, suitable for future projects.', 'The video includes a sponsored message by dev mountain for their 12-week design and development boot camp.']}], 'duration': 75.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ7352.jpg', 'highlights': ['The project involves building a parallax website with fixed background images, including high-quality free stock images and sections with different images.', 'The website design is simple and clean, suitable for future projects.', 'The video includes a sponsored message by dev mountain for their 12-week design and development boot camp.']}, {'end': 451.206, 'segs': [{'end': 112.763, 'src': 'embed', 'start': 83.253, 'weight': 0, 'content': [{'end': 86.916, 'text': "Now I'm using Adam for my text editor, but of course you can use whatever you'd like.", 'start': 83.253, 'duration': 3.663}, {'end': 92.361, 'text': "I'm also using the Emmet plugin for a faster HTML for creating divs and stuff like that.", 'start': 86.936, 'duration': 5.425}, {'end': 95.483, 'text': "I'm also using Adam live server,", 'start': 92.901, 'duration': 2.582}, {'end': 101.629, 'text': 'which is a package that will let us just run this file on our local host instead of just running it on the file system.', 'start': 95.483, 'duration': 6.146}, {'end': 102.409, 'text': "But you don't need that.", 'start': 101.649, 'duration': 0.76}, {'end': 106.533, 'text': "That's, you know, it's absolutely fine if you just open up your, your HTML files.", 'start': 102.449, 'duration': 4.084}, {'end': 112.763, 'text': 'Alright, now I have a folder called Parallax Website, and all these files will be available in the description.', 'start': 107.039, 'duration': 5.724}], 'summary': 'Using adam text editor with emmet plugin for faster html creation, and adam live server for local hosting.', 'duration': 29.51, 'max_score': 83.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ83253.jpg'}, {'end': 175.922, 'src': 'embed', 'start': 123.226, 'weight': 1, 'content': [{'end': 135.125, 'text': 'Now for these images you can either get them from the project files or you can go to Pexels.com which is just an awesome site for free stock images.', 'start': 123.226, 'duration': 11.899}, {'end': 137.569, 'text': 'And then I just search for city.', 'start': 135.726, 'duration': 1.843}, {'end': 141.891, 'text': 'And I got this image here, this one, and this one.', 'start': 138.71, 'duration': 3.181}, {'end': 144.171, 'text': 'Okay, so you guys can download those if you want.', 'start': 141.951, 'duration': 2.22}, {'end': 149.593, 'text': 'I got the 1080p, the 920 right here, the large.', 'start': 144.211, 'duration': 5.382}, {'end': 155.154, 'text': 'Okay, so once you get that set up, we can go ahead and start on HTML.', 'start': 150.253, 'duration': 4.901}, {'end': 162.016, 'text': "So I'm using Emmet, so I can do just exclamation tab, and it'll give us kind of our basic HTML structure.", 'start': 155.854, 'duration': 6.162}, {'end': 164.016, 'text': "Let's go ahead and change the title here.", 'start': 162.476, 'duration': 1.54}, {'end': 164.957, 'text': "I'm just going to call this..", 'start': 164.036, 'duration': 0.921}, {'end': 169.898, 'text': 'Parallax website demo.', 'start': 167.056, 'duration': 2.842}, {'end': 175.922, 'text': "And then we also need a style sheet because I don't want to put the style in the HTML.", 'start': 171.399, 'duration': 4.523}], 'summary': 'Using pexels.com, downloaded 1080p and 920 images for a parallax website demo, setting up html with emmet.', 'duration': 52.696, 'max_score': 123.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ123226.jpg'}, {'end': 346.03, 'src': 'embed', 'start': 313.201, 'weight': 2, 'content': [{'end': 316.404, 'text': "They'll do the HTML and then the CSS, go back to the HTML.", 'start': 313.201, 'duration': 3.203}, {'end': 320.947, 'text': 'I just like to do all the HTML and then go to the CSS.', 'start': 316.444, 'duration': 4.503}, {'end': 326.372, 'text': 'So we have our first PImage1 class, which will be our first parallax image.', 'start': 321.027, 'duration': 5.345}, {'end': 327.633, 'text': 'Now we want our section.', 'start': 326.472, 'duration': 1.161}, {'end': 329.674, 'text': "So let's say section.", 'start': 328.453, 'duration': 1.221}, {'end': 331.636, 'text': "We're going to give it a class of section.", 'start': 329.714, 'duration': 1.922}, {'end': 335.039, 'text': "We're also going to give this a class of section-light.", 'start': 332.116, 'duration': 2.923}, {'end': 338.568, 'text': 'So section dash light.', 'start': 336.727, 'duration': 1.841}, {'end': 346.03, 'text': "Okay And then in here we're going to have an H2 and we're just going to say section one.", 'start': 338.588, 'duration': 7.442}], 'summary': 'Creating html and css elements, defining classes and sections.', 'duration': 32.829, 'max_score': 313.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ313201.jpg'}, {'end': 399.423, 'src': 'heatmap', 'start': 346.05, 'weight': 0.791, 'content': [{'end': 350.411, 'text': "And then let's do a paragraph with some dummy text.", 'start': 346.05, 'duration': 4.361}, {'end': 355.833, 'text': 'Now with Adam, I can just type in lorem and then a number.', 'start': 350.491, 'duration': 5.342}, {'end': 357.435, 'text': "So I'm going to say 100.", 'start': 355.893, 'duration': 1.542}, {'end': 359.976, 'text': 'this is going to generate 100 words of dummy text.', 'start': 357.435, 'duration': 2.541}, {'end': 363.497, 'text': "So if I click Tab, you'll see it gives us 100 words.", 'start': 360.016, 'duration': 3.481}, {'end': 367.438, 'text': 'So if we save that and we take a look, it should look like this.', 'start': 364.077, 'duration': 3.361}, {'end': 374.52, 'text': "So now that we have Section 1, let's go on to the next parallax image.", 'start': 369.678, 'duration': 4.842}, {'end': 375.92, 'text': "So I'm just going to copy this.", 'start': 374.54, 'duration': 1.38}, {'end': 380.48, 'text': "And let's just put this right under the section.", 'start': 378.039, 'duration': 2.441}, {'end': 383.22, 'text': "And we're going to call this one PIMG2.", 'start': 380.72, 'duration': 2.5}, {'end': 389.781, 'text': "And then for the text here, let's just say image to text.", 'start': 384.18, 'duration': 5.601}, {'end': 392.782, 'text': "Okay, then we're going to do our next section.", 'start': 390.941, 'duration': 1.841}, {'end': 394.102, 'text': "So I'm just going to copy this.", 'start': 392.802, 'duration': 1.3}, {'end': 399.423, 'text': 'Okay, I tried to make the structure of the HTML extremely simple.', 'start': 394.122, 'duration': 5.301}], 'summary': 'Creating sections with dummy text and parallax images in html.', 'duration': 53.373, 'max_score': 346.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ346050.jpg'}], 'start': 83.253, 'title': 'Web development environment and parallax website creation', 'summary': 'Discusses setting up the web development environment with adam text editor, emmet plugin, and adam live server, and creating a parallax website by structuring html and css, and linking files.', 'chapters': [{'end': 149.593, 'start': 83.253, 'title': 'Setting up a web development environment', 'summary': 'Discusses setting up the web development environment, including the use of adam as a text editor, the emmet plugin for faster html creation, and the adam live server package for running files on localhost. it also covers obtaining images from pexels.com and organizing project files.', 'duration': 66.34, 'highlights': ['The chapter discusses setting up the web development environment, including the use of Adam as a text editor, the Emmet plugin for faster HTML creation, and the Adam live server package for running files on localhost.', 'It also covers obtaining images from Pexels.com and organizing project files.']}, {'end': 451.206, 'start': 150.253, 'title': 'Creating a parallax website', 'summary': 'Covers the process of setting up basic html structure using emmet, creating css file, linking it in html, and structuring html with section and div tags to build a parallax website.', 'duration': 300.953, 'highlights': ['The chapter goes through setting up basic HTML structure using Emmet, creating a CSS file, and linking it inside the HTML. Setting up basic HTML structure, using Emmet, creating CSS file, linking CSS inside HTML.', 'The process of structuring HTML with section and div tags to build a parallax website is explained, with detailed steps on creating sections and parallax images. Structuring HTML with section and div tags, creating sections and parallax images.']}], 'duration': 367.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ83253.jpg', 'highlights': ['The chapter discusses setting up the web development environment, including the use of Adam as a text editor, the Emmet plugin for faster HTML creation, and the Adam live server package for running files on localhost.', 'The chapter goes through setting up basic HTML structure using Emmet, creating a CSS file, and linking it inside the HTML.', 'The process of structuring HTML with section and div tags to build a parallax website is explained, with detailed steps on creating sections and parallax images.', 'It also covers obtaining images from Pexels.com and organizing project files.']}, {'end': 642.144, 'segs': [{'end': 512.249, 'src': 'embed', 'start': 451.266, 'weight': 0, 'content': [{'end': 451.766, 'text': "And that's it.", 'start': 451.266, 'duration': 0.5}, {'end': 453.047, 'text': "That's it for our HTML.", 'start': 451.846, 'duration': 1.201}, {'end': 454.569, 'text': "So let's go take a look.", 'start': 453.248, 'duration': 1.321}, {'end': 458.553, 'text': 'And it looks stupid, but we need to add our CSS.', 'start': 454.809, 'duration': 3.744}, {'end': 470.842, 'text': "OK So let's go back to Adam and go to our CSS and we're going to start off with just adding some styles for the body as well as the HTML tag.", 'start': 458.593, 'duration': 12.249}, {'end': 472.323, 'text': 'All right.', 'start': 472.063, 'duration': 0.26}, {'end': 473.764, 'text': "So we're going to do a few things here.", 'start': 472.383, 'duration': 1.381}, {'end': 476.206, 'text': 'We want to set the height to be 100 percent.', 'start': 473.804, 'duration': 2.402}, {'end': 479.349, 'text': 'We want to set margin to be zero.', 'start': 476.787, 'duration': 2.562}, {'end': 481.17, 'text': "We don't want any margin around the edges.", 'start': 479.389, 'duration': 1.781}, {'end': 487.495, 'text': "And let's set the font size to 16 pixels.", 'start': 481.971, 'duration': 5.524}, {'end': 492.81, 'text': "We're going to set the font family And we're going to set that to Lato.", 'start': 487.556, 'duration': 5.254}, {'end': 502.099, 'text': "And then a backup of, we'll say Sans Serif.", 'start': 494.752, 'duration': 7.347}, {'end': 504.481, 'text': "And then we're also going to set the line height.", 'start': 502.479, 'duration': 2.002}, {'end': 509.867, 'text': "Actually, let's set the weight first, the font weight, which is the boldness.", 'start': 505.142, 'duration': 4.725}, {'end': 512.249, 'text': "We'll set that to 400.", 'start': 509.927, 'duration': 2.322}], 'summary': 'Css added for html: 100% height, 0 margin, 16px font size, lato font family, 400 font weight.', 'duration': 60.983, 'max_score': 451.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ451266.jpg'}, {'end': 575.292, 'src': 'embed', 'start': 548.854, 'weight': 1, 'content': [{'end': 554.358, 'text': "So let's see, we have classes of P, IMG 1, 2, and 3.", 'start': 548.854, 'duration': 5.504}, {'end': 557.481, 'text': "So let's say .PIMG1.", 'start': 554.358, 'duration': 3.123}, {'end': 562.065, 'text': "And for that, we're going to have our background image.", 'start': 559.503, 'duration': 2.562}, {'end': 565.108, 'text': 'Sorry for that banging outside.', 'start': 563.786, 'duration': 1.322}, {'end': 566.289, 'text': 'People are working outside.', 'start': 565.168, 'duration': 1.121}, {'end': 570.59, 'text': 'URL and then we want to point to the to image one.', 'start': 567.428, 'duration': 3.162}, {'end': 574.511, 'text': "you'll see I have an IMG folder with image one dot JPEG.", 'start': 570.59, 'duration': 3.921}, {'end': 575.292, 'text': "that's what I want.", 'start': 574.511, 'duration': 0.781}], 'summary': 'Classes p, img 1, 2, and 3; referencing image one from img folder.', 'duration': 26.438, 'max_score': 548.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ548854.jpg'}, {'end': 648.659, 'src': 'embed', 'start': 620.09, 'weight': 3, 'content': [{'end': 626.134, 'text': "And just to show you what I'm talking about, if we go back to the finished one, you'll see this is 100 percent height.", 'start': 620.09, 'duration': 6.044}, {'end': 629.356, 'text': 'And then these ones, they set to 400.', 'start': 626.554, 'duration': 2.802}, {'end': 632.438, 'text': 'Okay And then the one again down here is 100 percent.', 'start': 629.356, 'duration': 3.082}, {'end': 634.479, 'text': 'Okay Hopefully that makes sense.', 'start': 632.458, 'duration': 2.021}, {'end': 638.542, 'text': "And by the way, that's what our site looks like right now is this.", 'start': 635.58, 'duration': 2.962}, {'end': 642.144, 'text': "Okay So it's coming together.", 'start': 640.483, 'duration': 1.661}, {'end': 648.659, 'text': "Next thing we want to do, and notice that we don't have the parallax effect.", 'start': 643.737, 'duration': 4.922}], 'summary': 'Demonstration of setting different heights for elements, achieving 100% and 400px heights, while working on a website with no parallax effect.', 'duration': 28.569, 'max_score': 620.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ620090.jpg'}], 'start': 451.266, 'title': 'Css styling and background image setup', 'summary': 'Covers adding css styles to the html body and tag, setting properties like height, margin, font size, font family, font weight, line height, and default text color. it also discusses setting up background images using css for classes p, img 1, 2, and 3, with the main image set to 100% height and the others set to 400 pixels, resulting in the site coming together visually.', 'chapters': [{'end': 547.613, 'start': 451.266, 'title': 'Css styling for html', 'summary': 'Covers adding css styles to the html body and html tag, setting properties like height, margin, font size, font family, font weight, line height, and default text color.', 'duration': 96.347, 'highlights': ['Setting the font size to 16 pixels, the font family to Lato, and the backup font to Sans Serif, and also adjusting the font weight to 400.', 'Setting the line height to 1.8 EM and the default text color to 666, resulting in bigger, lighter text with increased line height.', 'Setting the height to 100 percent and the margin to zero to remove any margin around the edges.']}, {'end': 642.144, 'start': 548.854, 'title': 'Css background image setup', 'summary': 'Discusses setting up background images using css for classes p, img 1, 2, and 3, with the main image set to 100% height and the others set to 400 pixels, resulting in the site coming together visually.', 'duration': 93.29, 'highlights': ['Setting up background images for classes P, IMG 1, 2, and 3, with specific file paths and height attributes.', 'The main image is set to 100% height while the others are set to 400 pixels, resulting in the visual layout of the site coming together.', 'Demonstrating the final appearance of the site after implementing the CSS background image setup.']}], 'duration': 190.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ451266.jpg', 'highlights': ['Setting the font size to 16 pixels, the font family to Lato, and the backup font to Sans Serif, and also adjusting the font weight to 400.', 'Setting up background images for classes P, IMG 1, 2, and 3, with specific file paths and height attributes.', 'Setting the height to 100 percent and the margin to zero to remove any margin around the edges.', 'The main image is set to 100% height while the others are set to 400 pixels, resulting in the visual layout of the site coming together.']}, {'end': 925.059, 'segs': [{'end': 675.005, 'src': 'embed', 'start': 643.737, 'weight': 0, 'content': [{'end': 648.659, 'text': "Next thing we want to do, and notice that we don't have the parallax effect.", 'start': 643.737, 'duration': 4.922}, {'end': 651.579, 'text': "It's just showing the image.", 'start': 648.719, 'duration': 2.86}, {'end': 654.54, 'text': "There's no scrolling effect or anything like that.", 'start': 652.32, 'duration': 2.22}, {'end': 659.922, 'text': "So let's add the scrolling effect.", 'start': 657.061, 'duration': 2.861}, {'end': 662.819, 'text': "So we're adding this to all images.", 'start': 661.178, 'duration': 1.641}, {'end': 675.005, 'text': "So right above what we just did, we're going to say PIMG1, PIMG2, and PIMG3 because we want this applied to all of these images.", 'start': 662.919, 'duration': 12.086}], 'summary': 'Adding parallax scrolling effect to all images.', 'duration': 31.268, 'max_score': 643.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ643737.jpg'}, {'end': 779.057, 'src': 'heatmap', 'start': 729.215, 'weight': 1, 'content': [{'end': 732.997, 'text': "We don't want them to repeat either horizontally or vertically.", 'start': 729.215, 'duration': 3.782}, {'end': 738.968, 'text': "OK, now if we save that and take a look, It's going to look like this now.", 'start': 733.017, 'duration': 5.951}, {'end': 743.611, 'text': "Notice there's still no parallax scrolling effect to do that.", 'start': 739.028, 'duration': 4.583}, {'end': 748.774, 'text': 'All we have to do is add a background attachment style.', 'start': 743.711, 'duration': 5.063}, {'end': 752.697, 'text': "So let's go right here and I'm going to say background.", 'start': 748.915, 'duration': 3.782}, {'end': 764.085, 'text': "I hate this keyboard background attachment and we're going to set this to fixed.", 'start': 752.717, 'duration': 11.368}, {'end': 767.047, 'text': "OK, so let's take a look now.", 'start': 765.366, 'duration': 1.681}, {'end': 770.854, 'text': 'And now notice we have that effect.', 'start': 769.093, 'duration': 1.761}, {'end': 772.654, 'text': "Okay, it's as simple as that.", 'start': 771.354, 'duration': 1.3}, {'end': 779.057, 'text': "Now I'm going to put a little comment in here, just so you guys know that if you want to remove that effect,", 'start': 772.674, 'duration': 6.383}], 'summary': 'Demonstrating parallax scrolling effect by adding fixed background attachment.', 'duration': 34.87, 'max_score': 729.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ729215.jpg'}, {'end': 839.419, 'src': 'embed', 'start': 814.445, 'weight': 2, 'content': [{'end': 820.009, 'text': "you'll see that for the sections they're up against the edge and we want to make these look a little better.", 'start': 814.445, 'duration': 5.564}, {'end': 822.85, 'text': 'Also add the background colors and stuff.', 'start': 820.549, 'duration': 2.301}, {'end': 826.733, 'text': "All right, so let's go ahead and add in our section class.", 'start': 823.551, 'duration': 3.182}, {'end': 832.816, 'text': 'OK, so I want these sections to be aligned to the center.', 'start': 829.215, 'duration': 3.601}, {'end': 836.638, 'text': "So we're going to say text align center.", 'start': 832.916, 'duration': 3.722}, {'end': 839.419, 'text': 'And then I just want to add some padding.', 'start': 836.658, 'duration': 2.761}], 'summary': 'Improving website sections by aligning to center and adding padding.', 'duration': 24.974, 'max_score': 814.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ814445.jpg'}], 'start': 643.737, 'title': 'Adding parallax scrolling effect and web design section styling', 'summary': 'Explains adding parallax scrolling effect to images with options to remove the effect and ensure mobile compatibility, and covers website section styling including alignment, padding, background colors, and specific pixel values and color codes for implementation.', 'chapters': [{'end': 814.445, 'start': 643.737, 'title': 'Adding parallax scrolling effect', 'summary': 'Explains how to add a parallax scrolling effect to images, including setting position, opacity, background position, size, and attachment, with the option to remove the effect and address mobile compatibility.', 'duration': 170.708, 'highlights': ['Explaining how to add a parallax scrolling effect to images by setting position, opacity, background position, size, and attachment. Parallax scrolling effect, opacity set to 0.70, background position set to center, background size set to cover, background attachment set to fixed.', 'Providing the option to remove the parallax effect by setting background attachment to scroll and addressing mobile compatibility by adding a media query. Option to remove the parallax effect by setting background attachment to scroll, addressing mobile compatibility.']}, {'end': 925.059, 'start': 814.445, 'title': 'Web design section styling', 'summary': 'Covers the styling of website sections, including alignment, padding, background colors, and classes for light and dark backgrounds, with specific pixel values and color codes provided for implementation.', 'duration': 110.614, 'highlights': ['The chapter covers the styling of website sections, including alignment, padding, background colors, and classes for light and dark backgrounds, with specific pixel values and color codes provided for implementation.', 'Padding is set to 50 pixels on the top and bottom and 80 pixels on the left and right for section alignment.', "Specific color codes provided for implementing light and dark backgrounds, with '282E34' for dark background and '666' for light text color."]}], 'duration': 281.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ643737.jpg', 'highlights': ['Explaining how to add a parallax scrolling effect to images with specific settings such as opacity, background position, size, and attachment.', 'Providing the option to remove the parallax effect by setting background attachment to scroll and addressing mobile compatibility through a media query.', 'Covering the styling of website sections, including alignment, padding, and background colors, with specific pixel values and color codes provided for implementation.']}, {'end': 1246.672, 'segs': [{'end': 1027.354, 'src': 'embed', 'start': 926.337, 'weight': 1, 'content': [{'end': 933.705, 'text': 'Now, the next thing we want to work on is the P text, which we have inside.', 'start': 926.337, 'duration': 7.368}, {'end': 936.487, 'text': "You actually don't see the text yet.", 'start': 934.005, 'duration': 2.482}, {'end': 939.47, 'text': 'We have to position it absolute for us to be able to see it.', 'start': 936.527, 'duration': 2.943}, {'end': 942.634, 'text': 'You can see it up here.', 'start': 941.773, 'duration': 0.861}, {'end': 944.845, 'text': 'right here.', 'start': 943.925, 'duration': 0.92}, {'end': 952.029, 'text': 'but what we want to do is position it absolute and bring it into the middle, make it bigger, make it uppercase and do some other stuff.', 'start': 944.845, 'duration': 7.184}, {'end': 955.471, 'text': "so let's go ahead and add dot p text.", 'start': 952.029, 'duration': 3.442}, {'end': 969.398, 'text': "okay, so for this we're going to say position position is going to be absolute and we want to set top to 50 because we want to bring it down halfway.", 'start': 955.471, 'duration': 13.927}, {'end': 970.859, 'text': 'we want it to be in the middle vertically.', 'start': 969.398, 'duration': 1.461}, {'end': 973.461, 'text': "We're going to set the width of it to 100%.", 'start': 971.759, 'duration': 1.702}, {'end': 979.105, 'text': "We're going to set the text align to center.", 'start': 973.461, 'duration': 5.644}, {'end': 985.65, 'text': "We're going to set the color to the default is going to be black.", 'start': 981.367, 'duration': 4.283}, {'end': 990.153, 'text': "And then let's set the font size.", 'start': 988.132, 'duration': 2.021}, {'end': 995.317, 'text': 'So font size will set to 17 pixels.', 'start': 993.356, 'duration': 1.961}, {'end': 996.138, 'text': "I'm sorry, 27 pixels.", 'start': 995.337, 'duration': 0.801}, {'end': 1005.801, 'text': "And we're going to set letter spacing to 8 pixels.", 'start': 1001.198, 'duration': 4.603}, {'end': 1010.604, 'text': 'Letter spacing is just, you know, the horizontal spacing between each letter of the word.', 'start': 1005.861, 'duration': 4.743}, {'end': 1011.805, 'text': 'All right.', 'start': 1010.624, 'duration': 1.181}, {'end': 1017.268, 'text': "And then let's make it uppercase by saying text transform uppercase.", 'start': 1011.885, 'duration': 5.383}, {'end': 1021.27, 'text': "Okay Let's save that.", 'start': 1017.288, 'duration': 3.982}, {'end': 1021.851, 'text': 'Take a look.', 'start': 1021.33, 'duration': 0.521}, {'end': 1022.611, 'text': 'And there we go.', 'start': 1022.031, 'duration': 0.58}, {'end': 1027.354, 'text': 'So now the words are smack dab in the middle of the images.', 'start': 1023.152, 'duration': 4.202}], 'summary': 'Positioned p text absolutely, centered, increased font size to 27px, and made it uppercase.', 'duration': 101.017, 'max_score': 926.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ926337.jpg'}, {'end': 1151.179, 'src': 'heatmap', 'start': 1094.172, 'weight': 4, 'content': [{'end': 1104.298, 'text': "We'll go right here to P image three where we have the border, and we're just going to add trans, and let's do the same here on the border class.", 'start': 1094.172, 'duration': 10.126}, {'end': 1116.244, 'text': "And let's see, we're going to add dot p text border dot trans.", 'start': 1108.158, 'duration': 8.086}, {'end': 1120.107, 'text': "And let's just set the background color.", 'start': 1117.745, 'duration': 2.362}, {'end': 1124.35, 'text': "We're going to set that to transparent.", 'start': 1122.328, 'duration': 2.022}, {'end': 1128.093, 'text': "All right, so we'll save that.", 'start': 1124.37, 'duration': 3.723}, {'end': 1129.934, 'text': "Let's take a look.", 'start': 1128.113, 'duration': 1.821}, {'end': 1132.736, 'text': "And now these two don't have that background.", 'start': 1130.354, 'duration': 2.382}, {'end': 1136.172, 'text': "I'm actually going to just change the text of that.", 'start': 1134.311, 'duration': 1.861}, {'end': 1137.973, 'text': 'I think I added it to Traverse Media.', 'start': 1136.232, 'duration': 1.741}, {'end': 1140.654, 'text': 'You guys can obviously put whatever you want.', 'start': 1138.773, 'duration': 1.881}, {'end': 1144.196, 'text': 'You guys are free to use this in any project you want.', 'start': 1140.714, 'duration': 3.482}, {'end': 1150.298, 'text': "All my code, anything that's on my YouTube channel is completely open source.", 'start': 1145.976, 'duration': 4.322}, {'end': 1151.179, 'text': "You're free to use.", 'start': 1150.318, 'duration': 0.861}], 'summary': 'Adding transparent background to images and text, open source code available on youtube.', 'duration': 78.088, 'max_score': 1094.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ1094172.jpg'}, {'end': 1217.204, 'src': 'embed', 'start': 1179.674, 'weight': 0, 'content': [{'end': 1180.654, 'text': "so it's responsive.", 'start': 1179.674, 'duration': 0.98}, {'end': 1183.375, 'text': "So let's just add in here a media query.", 'start': 1181.214, 'duration': 2.161}, {'end': 1191.537, 'text': "We're going to say at media and we're going to say max width of five.", 'start': 1183.415, 'duration': 8.122}, {'end': 1192.957, 'text': 'Sorry about that banging, guys.', 'start': 1191.697, 'duration': 1.26}, {'end': 1195.396, 'text': '568 pixels.', 'start': 1194.356, 'duration': 1.04}, {'end': 1199.198, 'text': 'So anything under 568 pixels, this will be in effect.', 'start': 1195.857, 'duration': 3.341}, {'end': 1207.881, 'text': "So we'll say .pimg1, .pimg2, .pimg3.", 'start': 1199.838, 'duration': 8.043}, {'end': 1212.562, 'text': "And we're just going to set the background attachment.", 'start': 1208.761, 'duration': 3.801}, {'end': 1217.204, 'text': "And we're going to set that to scroll.", 'start': 1215.363, 'duration': 1.841}], 'summary': 'Adding a media query with max width of 568 pixels for responsive design.', 'duration': 37.53, 'max_score': 1179.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ1179674.jpg'}, {'end': 1246.672, 'src': 'heatmap', 'start': 1218.146, 'weight': 0.765, 'content': [{'end': 1223.547, 'text': "Okay, so now if we go back and reload, now it's just normal for mobile devices.", 'start': 1218.146, 'duration': 5.401}, {'end': 1227.948, 'text': 'And if I make this bigger, we still have the parallax effect.', 'start': 1224.207, 'duration': 3.741}, {'end': 1232.849, 'text': "All right, so I'm going to go before they start pissing me off with the banging upstairs.", 'start': 1228.908, 'duration': 3.941}, {'end': 1236.47, 'text': 'So hopefully this helped you guys out, you know, understand how to do this.', 'start': 1232.889, 'duration': 3.581}, {'end': 1237.29, 'text': "It's pretty easy.", 'start': 1236.51, 'duration': 0.78}, {'end': 1240.231, 'text': 'I tried to lay out the HTML as simple as possible.', 'start': 1237.73, 'duration': 2.501}, {'end': 1242.551, 'text': 'Feel free to use it in your projects.', 'start': 1241.031, 'duration': 1.52}, {'end': 1246.672, 'text': 'Please subscribe, leave a like if you liked it, and I will see you next time.', 'start': 1242.651, 'duration': 4.021}], 'summary': 'Demonstrated mobile compatibility with parallax effect, simplified html layout for easy use in projects.', 'duration': 28.526, 'max_score': 1218.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ1218146.jpg'}, {'end': 1246.672, 'src': 'embed', 'start': 1241.031, 'weight': 9, 'content': [{'end': 1242.551, 'text': 'Feel free to use it in your projects.', 'start': 1241.031, 'duration': 1.52}, {'end': 1246.672, 'text': 'Please subscribe, leave a like if you liked it, and I will see you next time.', 'start': 1242.651, 'duration': 4.021}], 'summary': 'Encourages subscribing and liking, invites for future sessions.', 'duration': 5.641, 'max_score': 1241.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ1241031.jpg'}], 'start': 926.337, 'title': 'Styling and creating responsive web design features', 'summary': 'Covers styling p text by positioning, aligning, and setting attributes, styling border and background of html elements, and creating a responsive parallax effect with open source code and media queries for mobile devices.', 'chapters': [{'end': 1027.354, 'start': 926.337, 'title': 'Styling p text in web design', 'summary': 'Covers how to style the p text by positioning it absolutely, setting its width to 100%, aligning the text to the center, increasing the font size to 27 pixels, and setting the letter spacing to 8 pixels to bring the text into the middle of the images.', 'duration': 101.017, 'highlights': ['The P text is styled by positioning it absolutely, setting its width to 100%, aligning the text to the center, increasing the font size to 27 pixels, and setting the letter spacing to 8 pixels to bring the text into the middle of the images.', 'The position of the P text is set to absolute and the top is set to 50 to bring it down halfway, achieving vertical centering.', 'The font size of the P text is set to 27 pixels, and the letter spacing is set to 8 pixels to adjust the horizontal spacing between each letter of the word.']}, {'end': 1124.35, 'start': 1028.135, 'title': 'Styling border and background', 'summary': 'Covers styling the border and background of html elements, setting the background color to #111, the text color to white, and a padding of 20 pixels, also adding a transparent background option.', 'duration': 96.215, 'highlights': ['Setting the background color to #111, the text color to white, and a padding of 20 pixels.', "Adding a transparent background option with the class 'trans' to specific elements.", "Applying the 'border' class to set the background color to #111, the text color to white, and a padding of 20 pixels."]}, {'end': 1246.672, 'start': 1124.37, 'title': 'Creating responsive parallax effect', 'summary': 'Covers the process of creating a responsive parallax effect, including open sourcing the code, implementing media queries for mobile devices, and encouraging use in projects.', 'duration': 122.302, 'highlights': ['The chapter emphasizes that all code and content on the YouTube channel is open source and free to use in any project, with the only restriction being not to sell it outright.', 'It demonstrates how to disable the parallax effect for mobile devices using a media query with a maximum width of 568 pixels, ensuring responsiveness.', 'The speaker encourages viewers to subscribe, leave a like if they found the content helpful, and invites them to use the demonstrated code in their projects.']}], 'duration': 320.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttTcnidSdQ/pics/JttTcnidSdQ926337.jpg', 'highlights': ['Covers styling p text by positioning, aligning, and setting attributes, styling border and background of html elements, and creating a responsive parallax effect with open source code and media queries for mobile devices.', 'The P text is styled by positioning it absolutely, setting its width to 100%, aligning the text to the center, increasing the font size to 27 pixels, and setting the letter spacing to 8 pixels to bring the text into the middle of the images.', 'The position of the P text is set to absolute and the top is set to 50 to bring it down halfway, achieving vertical centering.', 'The font size of the P text is set to 27 pixels, and the letter spacing is set to 8 pixels to adjust the horizontal spacing between each letter of the word.', 'Setting the background color to #111, the text color to white, and a padding of 20 pixels.', "Adding a transparent background option with the class 'trans' to specific elements.", "Applying the 'border' class to set the background color to #111, the text color to white, and a padding of 20 pixels.", 'The chapter emphasizes that all code and content on the YouTube channel is open source and free to use in any project, with the only restriction being not to sell it outright.', 'It demonstrates how to disable the parallax effect for mobile devices using a media query with a maximum width of 568 pixels, ensuring responsiveness.', 'The speaker encourages viewers to subscribe, leave a like if they found the content helpful, and invites them to use the demonstrated code in their projects.']}], 'highlights': ['The project involves building a parallax website with fixed background images, including high-quality free stock images and sections with different images.', 'The website design is simple and clean, suitable for future projects.', 'The video includes a sponsored message by dev mountain for their 12-week design and development boot camp.', 'The chapter discusses setting up the web development environment, including the use of Adam as a text editor, the Emmet plugin for faster HTML creation, and the Adam live server package for running files on localhost.', 'The process of structuring HTML with section and div tags to build a parallax website is explained, with detailed steps on creating sections and parallax images.', 'Setting the font size to 16 pixels, the font family to Lato, and the backup font to Sans Serif, and also adjusting the font weight to 400.', 'Explaining how to add a parallax scrolling effect to images with specific settings such as opacity, background position, size, and attachment.', 'Covers styling p text by positioning, aligning, and setting attributes, styling border and background of html elements, and creating a responsive parallax effect with open source code and media queries for mobile devices.', 'The chapter emphasizes that all code and content on the YouTube channel is open source and free to use in any project, with the only restriction being not to sell it outright.']}