title
Mobile First Responsive Contact Form Featuring Grid CSS

description
In this tutorial we will be building a responsive mobile first contact form using HTML and CSS. We will use CSS3 styling along with a bit of Grid CSS layout. Well also throw in some icons from font awesome and a simple entry animation using animate.css. This will be the front-end UI. We will implement the back end to capture the data in a later video. PART 2 - IMPLEMENTING FIREBASE! https://www.youtube.com/watch?v=PP4Tr0l08NE CODE: Code for this project http://www.traversymedia.com/downloads/responsiveform.zip 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': 'Mobile First Responsive Contact Form Featuring Grid CSS', 'heatmap': [{'end': 1035.836, 'start': 1015.25, 'weight': 0.751}, {'end': 1124.989, 'start': 1103.726, 'weight': 0.785}, {'end': 1622.94, 'start': 1567.355, 'weight': 0.802}, {'end': 1694.369, 'start': 1639.562, 'weight': 0.992}], 'summary': 'Tutorial covers building a mobile-first responsive contact form using css3 techniques and grid css, setting up live server in vs code, creating a wrapper div and styling html forms, styling website elements, and creating a grid-based contact form with css, including media queries and font awesome icons.', 'chapters': [{'end': 67.694, 'segs': [{'end': 45.361, 'src': 'embed', 'start': 7.665, 'weight': 0, 'content': [{'end': 8.246, 'text': "hey, what's going on?", 'start': 7.665, 'duration': 0.581}, {'end': 13.451, 'text': "guys? in this project we're going to build a mobile first responsive contact form.", 'start': 8.246, 'duration': 5.205}, {'end': 16.172, 'text': "now we're going to be using some css3 techniques.", 'start': 13.451, 'duration': 2.721}, {'end': 18.876, 'text': "we're going to use a little bit of grid css.", 'start': 16.172, 'duration': 2.704}, {'end': 20.177, 'text': "now we're just building the ui.", 'start': 18.876, 'duration': 1.301}, {'end': 21.438, 'text': "we're not going to build a back end.", 'start': 20.177, 'duration': 1.261}, {'end': 24.321, 'text': "what i'm going to do is i'm going to save that for another video.", 'start': 21.438, 'duration': 2.883}, {'end': 29.046, 'text': "we'll implement this probably in php or some kind of back end server side language.", 'start': 24.321, 'duration': 4.725}, {'end': 30.847, 'text': "But we're going to build the front end.", 'start': 29.746, 'duration': 1.101}, {'end': 32.089, 'text': "Now this is what it's going to look like.", 'start': 30.887, 'duration': 1.202}, {'end': 35.151, 'text': 'And when I say mobile first, what I mean is just that.', 'start': 32.128, 'duration': 3.023}, {'end': 45.361, 'text': "We start off with designing it for a mobile screen, for small screens, and then we'll gradually add in media queries to change it for larger screens.", 'start': 35.572, 'duration': 9.789}], 'summary': 'Building a mobile-first responsive contact form using css3 and grid layout, front end only.', 'duration': 37.696, 'max_score': 7.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY7665.jpg'}, {'end': 75.763, 'src': 'embed', 'start': 45.481, 'weight': 1, 'content': [{'end': 47.682, 'text': "So this is what it's going to look like on mobile screens.", 'start': 45.481, 'duration': 2.201}, {'end': 50.824, 'text': "And as I go up, you'll see when I hit around 700 pixels,", 'start': 48.062, 'duration': 2.762}, {'end': 56.767, 'text': "it's going to change and the grid is going to change so that we have one fractional and two fractionals.", 'start': 50.824, 'duration': 5.943}, {'end': 60.329, 'text': 'OK, a fractional is just a unit in in the CSS grid layout.', 'start': 56.867, 'duration': 3.462}, {'end': 65.232, 'text': "So that's what it'll look like on desktops as a max width of, I think, 1170, I think.", 'start': 61.03, 'duration': 4.202}, {'end': 67.694, 'text': 'all right.', 'start': 67.373, 'duration': 0.321}, {'end': 69.896, 'text': "so that's what we'll be building in this video.", 'start': 67.694, 'duration': 2.202}, {'end': 75.763, 'text': "guys, like i said, we will later on do a back end so that it'll actually send an email.", 'start': 69.896, 'duration': 5.867}], 'summary': 'Demonstration of responsive layout with grid changes at 700 pixels and 1170 max width. backend to send email later.', 'duration': 30.282, 'max_score': 45.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY45481.jpg'}], 'start': 7.665, 'title': 'Building a mobile-first contact form ui', 'summary': 'Covers the construction of a mobile-first responsive contact form using css3 techniques, focusing on grid css and designing for small screens first, then gradually incorporating media queries for larger screens.', 'chapters': [{'end': 67.694, 'start': 7.665, 'title': 'Mobile-first contact form ui', 'summary': 'Covers building a mobile-first responsive contact form using css3 techniques, including grid css and designing for small screens first, then gradually adding media queries for larger screens.', 'duration': 60.029, 'highlights': ['The project involves building a mobile-first responsive contact form using CSS3 techniques, including grid CSS.', 'The design process begins with creating a layout for mobile screens and then gradually adding media queries to accommodate larger screens.', 'The grid layout changes at around 700 pixels to display one fractional and two fractionals.', 'The back end implementation is planned for a separate video, possibly using PHP or other server-side language.']}], 'duration': 60.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY7665.jpg', 'highlights': ['The project involves building a mobile-first responsive contact form using CSS3 techniques, including grid CSS.', 'The design process begins with creating a layout for mobile screens and then gradually adding media queries to accommodate larger screens.', 'The grid layout changes at around 700 pixels to display one fractional and two fractionals.', 'The back end implementation is planned for a separate video, possibly using PHP or other server-side language.']}, {'end': 311.728, 'segs': [{'end': 125.778, 'src': 'embed', 'start': 67.694, 'weight': 1, 'content': [{'end': 69.896, 'text': "so that's what we'll be building in this video.", 'start': 67.694, 'duration': 2.202}, {'end': 75.763, 'text': "guys, like i said, we will later on do a back end so that it'll actually send an email.", 'start': 69.896, 'duration': 5.867}, {'end': 78.826, 'text': "um, or maybe we'll implement like firebase or something like that.", 'start': 75.763, 'duration': 3.063}, {'end': 79.087, 'text': "i don't know.", 'start': 78.826, 'duration': 0.261}, {'end': 82.11, 'text': 'you guys can leave some suggestions in the comments.', 'start': 79.087, 'duration': 3.023}, {'end': 83.231, 'text': "uh, but that's what we'll be doing.", 'start': 82.11, 'duration': 1.121}, {'end': 84.272, 'text': "so let's get started.", 'start': 83.231, 'duration': 1.041}, {'end': 91.176, 'text': 'So if you guys really like my videos and you learn a lot from them and maybe have a couple extra dollars to spare, check out my Patreon page.', 'start': 84.833, 'duration': 6.343}, {'end': 93.697, 'text': "I'm working on creating special content for patrons.", 'start': 91.216, 'duration': 2.481}, {'end': 100.36, 'text': "You also get special deals on future courses, and there's even an email support tier for all YouTube videos and projects.", 'start': 94.037, 'duration': 6.323}, {'end': 103.622, 'text': 'To learn more, visit patreon.com slash traverseemedia.', 'start': 100.44, 'duration': 3.182}, {'end': 104.82, 'text': 'right guys.', 'start': 104.56, 'duration': 0.26}, {'end': 106.902, 'text': "so we're gonna get started here now.", 'start': 104.82, 'duration': 2.082}, {'end': 111.566, 'text': 'usually in these types of videos front-end html css i use the atom text editor.', 'start': 106.902, 'duration': 4.664}, {'end': 119.232, 'text': 'if you guys follow my channel, you probably know that i usually use vs code for for more back end stuff or even like angular cli stuff,', 'start': 111.566, 'duration': 7.666}, {'end': 121.074, 'text': 'where i use the command line a lot.', 'start': 119.232, 'duration': 1.842}, {'end': 124.937, 'text': "but i've been using vs code more lately and i'm leaning towards that over, adam.", 'start': 121.074, 'duration': 3.863}, {'end': 125.778, 'text': "i think it's faster.", 'start': 124.937, 'duration': 0.841}], 'summary': 'Building a front-end project, considering back-end implementation, and promoting patreon for special content and support.', 'duration': 58.084, 'max_score': 67.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY67694.jpg'}, {'end': 275.475, 'src': 'embed', 'start': 242.827, 'weight': 0, 'content': [{'end': 246.189, 'text': "So we're going to go ahead and put a link tag in here to style dot CSS.", 'start': 242.827, 'duration': 3.362}, {'end': 254.882, 'text': 'all right now to start the server, all we have to do is right click and say open live server, and that should open up automatically.', 'start': 248.157, 'duration': 6.725}, {'end': 262.727, 'text': "the default port is going to be 50, uh, 5500, and there's obviously there's nothing here because we don't have anything in our body yet.", 'start': 254.882, 'duration': 7.845}, {'end': 266.709, 'text': "so we're going to start with the html, which is going to be actually very simple.", 'start': 262.727, 'duration': 3.982}, {'end': 275.475, 'text': "so we're going to create a container, so a div with the class of container, and then inside that we're going to have an h1 with the class of brand.", 'start': 266.709, 'duration': 8.766}], 'summary': 'Setting up a link tag in style.css and starting the server on port 5500 to create a basic html structure with a container and an h1 element.', 'duration': 32.648, 'max_score': 242.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY242827.jpg'}], 'start': 67.694, 'title': 'Building email feature and live server setup', 'summary': 'Covers building an email feature and promoting patreon support, along with setting up live server in vs code for front-end development, including the installation process, usage of live server extension, and creating a basic html layout.', 'chapters': [{'end': 104.82, 'start': 67.694, 'title': 'Building email feature and patreon support', 'summary': 'Covers building an email feature and promoting patreon support, offering special content and deals, with an option for email support.', 'duration': 37.126, 'highlights': ['The chapter covers building an email feature and promoting Patreon support, offering special content and deals, with an option for email support.', 'The video will focus on building a back end to send emails and possibly implementing Firebase.', "Viewers are encouraged to check out the creator's Patreon page for special content, deals on future courses, and email support for YouTube videos and projects."]}, {'end': 311.728, 'start': 104.82, 'title': 'Setting up live server in vs code', 'summary': 'Discusses setting up live server in vs code for front-end development, including the installation process, usage of live server extension, and creating a basic html layout.', 'duration': 206.908, 'highlights': ['Using VS Code over Atom for front-end development The speaker prefers using VS Code over Atom for front-end development, finding it faster and more suitable for the task.', 'Switching from Atom live server to VS Code live server The speaker transitions from using Atom live server to VS Code live server for opening the project on localhost, finding it more convenient and efficient.', "Installing Live Server extension in VS Code The process of installing the Live Server extension in VS Code is explained, emphasizing its simplicity by searching for and clicking on 'install'.", 'Creating a basic HTML layout using VS Code The speaker demonstrates creating a basic HTML layout using VS Code with the help of Emmet, including adding a viewport meta tag for responsiveness and linking to a CSS file.', 'Plans for backend development in the future The speaker mentions plans for future backend development, indicating a shift in focus from front-end to backend in upcoming videos.']}], 'duration': 244.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY67694.jpg', 'highlights': ['The chapter covers building an email feature and promoting Patreon support, offering special content and deals, with an option for email support.', 'The video will focus on building a back end to send emails and possibly implementing Firebase.', "Viewers are encouraged to check out the creator's Patreon page for special content, deals on future courses, and email support for YouTube videos and projects.", 'Using VS Code over Atom for front-end development The speaker prefers using VS Code over Atom for front-end development, finding it faster and more suitable for the task.', 'Switching from Atom live server to VS Code live server The speaker transitions from using Atom live server to VS Code live server for opening the project on localhost, finding it more convenient and efficient.', "Installing Live Server extension in VS Code The process of installing the Live Server extension in VS Code is explained, emphasizing its simplicity by searching for and clicking on 'install'.", 'Creating a basic HTML layout using VS Code The speaker demonstrates creating a basic HTML layout using VS Code with the help of Emmet, including adding a viewport meta tag for responsiveness and linking to a CSS file.', 'Plans for backend development in the future The speaker mentions plans for future backend development, indicating a shift in focus from front-end to backend in upcoming videos.']}, {'end': 587.684, 'segs': [{'end': 355.418, 'src': 'embed', 'start': 311.748, 'weight': 0, 'content': [{'end': 316.933, 'text': "All right, so let's go ahead and create another div with the class of wrapper.", 'start': 311.748, 'duration': 5.185}, {'end': 320.243, 'text': "This is actually going to be what we're going to apply the grid to.", 'start': 317.58, 'duration': 2.663}, {'end': 324.446, 'text': "And in this wrapper, we're going to have basically two divs.", 'start': 321.123, 'duration': 3.323}, {'end': 327.249, 'text': "One's going to be for the company info.", 'start': 324.767, 'duration': 2.482}, {'end': 333.835, 'text': 'And let me just grab the finished product real quick just so I can show you.', 'start': 327.95, 'duration': 5.885}, {'end': 340.521, 'text': 'So this here, this is going to be company info, and this is going to be contact.', 'start': 335.857, 'duration': 4.664}, {'end': 342.143, 'text': 'Those are going to be the two divs.', 'start': 340.761, 'duration': 1.382}, {'end': 343.384, 'text': "So let's say company info.", 'start': 342.203, 'duration': 1.181}, {'end': 346.367, 'text': 'Dash info.', 'start': 345.205, 'duration': 1.162}, {'end': 349.791, 'text': "And then under that we'll have contact.", 'start': 347.969, 'duration': 1.822}, {'end': 354.157, 'text': 'And if you guys hear my son upstairs, I apologize for that.', 'start': 351.653, 'duration': 2.504}, {'end': 355.418, 'text': "He's being kind of loud.", 'start': 354.337, 'duration': 1.081}], 'summary': 'Creating a wrapper div to apply grid, containing company info and contact divs.', 'duration': 43.67, 'max_score': 311.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY311748.jpg'}, {'end': 547.484, 'src': 'embed', 'start': 519.988, 'weight': 2, 'content': [{'end': 524.169, 'text': "Let's also give it a rose attribute to make it a little bigger, a little higher.", 'start': 519.988, 'duration': 4.181}, {'end': 525.79, 'text': 'All right.', 'start': 524.19, 'duration': 1.6}, {'end': 527.451, 'text': "And then we're also going to need a submit button.", 'start': 525.81, 'duration': 1.641}, {'end': 529.312, 'text': "I'm also going to put that in a paragraph.", 'start': 527.571, 'duration': 1.741}, {'end': 531.193, 'text': 'So this is going to have a.', 'start': 530.172, 'duration': 1.021}, {'end': 539.601, 'text': "we'll just do button so button and we'll just say submit, alright.", 'start': 531.193, 'duration': 8.408}, {'end': 540.402, 'text': "so that's our form.", 'start': 539.601, 'duration': 0.801}, {'end': 547.484, 'text': "let's save it, and it looks absolutely horrible because forms look atrocious without any css.", 'start': 540.402, 'duration': 7.082}], 'summary': 'Created a form with rose attribute, submit button, and mentioned need for css', 'duration': 27.496, 'max_score': 519.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY519988.jpg'}, {'end': 596.37, 'src': 'embed', 'start': 567.617, 'weight': 1, 'content': [{'end': 570.699, 'text': "And I'm just going to apply a box sizing property.", 'start': 567.617, 'duration': 3.082}, {'end': 573.182, 'text': 'So box dash sizing.', 'start': 571.24, 'duration': 1.942}, {'end': 575.103, 'text': "And we're going to set it to border box.", 'start': 573.622, 'duration': 1.481}, {'end': 580.26, 'text': "All right, and what that's going to do is it's going to take whenever there's any width,", 'start': 576.237, 'duration': 4.023}, {'end': 585.343, 'text': "it's going to factor in the margin and the padding into that width, okay, instead of adding it onto it.", 'start': 580.26, 'duration': 5.083}, {'end': 587.684, 'text': 'So we want to make sure we do that for everything.', 'start': 585.743, 'duration': 1.941}, {'end': 593.348, 'text': "And then we're going to say for the body, we want a background of blue.", 'start': 588.565, 'duration': 4.783}, {'end': 596.37, 'text': "Now the blue we're doing is actually going to be a hexadecimal.", 'start': 593.388, 'duration': 2.982}], 'summary': 'Applying box-sizing: border-box property to factor in margin and padding into the width; setting a blue hexadecimal background for the body.', 'duration': 28.753, 'max_score': 567.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY567617.jpg'}], 'start': 311.748, 'title': 'Creating a wrapper div and html form styling', 'summary': 'Details creating a div with a class of wrapper to apply a grid and two divs for company info and contact, and covers styling a contact form with a focus on applying box-sizing property for consistent width calculation.', 'chapters': [{'end': 355.418, 'start': 311.748, 'title': 'Creating a wrapper div with company info and contact', 'summary': 'Details the creation of a div with the class of wrapper to apply a grid, containing two divs for company info and contact, with a brief interruption mentioning noise in the background.', 'duration': 43.67, 'highlights': ['The creation of a div with the class of wrapper to apply a grid is detailed, along with the inclusion of two divs for company info and contact.', 'Mention of noise in the background is briefly acknowledged.']}, {'end': 587.684, 'start': 357.316, 'title': 'Html form styling', 'summary': 'Covers creating a company info section with an address, phone number, and email, followed by styling a contact form using css with a focus on applying box-sizing property to all elements for consistent width calculation.', 'duration': 230.368, 'highlights': ['Creating a company info section with address, phone number, and email The company info section is created with an address, phone number (all fives), and email (test@acme.test).', 'Styling a contact form using CSS The contact form is styled using CSS, but appears horrible without any CSS applied, emphasizing the need for CSS for improved appearance.', 'Applying box-sizing property to all elements for consistent width calculation The box-sizing property is applied to all elements to factor in margin and padding into the width calculation, ensuring consistent sizing for elements.']}], 'duration': 275.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY311748.jpg', 'highlights': ['The box-sizing property is applied to all elements for consistent width calculation.', 'The creation of a div with the class of wrapper to apply a grid is detailed, along with the inclusion of two divs for company info and contact.', 'Creating a company info section with address, phone number, and email.', 'The contact form is styled using CSS, but appears horrible without any CSS applied, emphasizing the need for CSS for improved appearance.', 'Mention of noise in the background is briefly acknowledged.']}, {'end': 983.713, 'segs': [{'end': 694.399, 'src': 'embed', 'start': 614.845, 'weight': 1, 'content': [{'end': 619.589, 'text': "What the heck? So let's see what else we're doing for the body.", 'start': 614.845, 'duration': 4.744}, {'end': 620.57, 'text': "Let's set the color.", 'start': 619.689, 'duration': 0.881}, {'end': 622.211, 'text': 'The color is going to be a dark blue.', 'start': 620.63, 'duration': 1.581}, {'end': 625.033, 'text': "That's also going to be a hexadecimal value of 485E74.", 'start': 622.611, 'duration': 2.422}, {'end': 628.456, 'text': 'And you can see that that is a dark blue.', 'start': 625.313, 'duration': 3.143}, {'end': 635.444, 'text': "Let's also set the line height to be a little bigger.", 'start': 632.742, 'duration': 2.702}, {'end': 639.727, 'text': 'So line height is basically the space in between the text.', 'start': 635.564, 'duration': 4.163}, {'end': 642.148, 'text': "So it's going to be 1.6.", 'start': 639.947, 'duration': 2.201}, {'end': 644.57, 'text': "We're also going to set the font family.", 'start': 642.148, 'duration': 2.422}, {'end': 647.232, 'text': 'So font family.', 'start': 646.191, 'duration': 1.041}, {'end': 649.613, 'text': "And I'm actually going to use this right here.", 'start': 647.952, 'duration': 1.661}, {'end': 652.135, 'text': "I don't know how to pronounce this.", 'start': 649.633, 'duration': 2.502}, {'end': 653.336, 'text': 'Segoe UI.', 'start': 652.295, 'duration': 1.041}, {'end': 658.739, 'text': 'And then with a backup of Tahoma, Geneva, Verdana, and then Sans Serif.', 'start': 653.936, 'duration': 4.803}, {'end': 660.38, 'text': "So that's what our font's going to be.", 'start': 659.12, 'duration': 1.26}, {'end': 662.662, 'text': "So if I save this, you'll see that it'll update.", 'start': 660.481, 'duration': 2.181}, {'end': 664.643, 'text': 'All right, so we have our blue background.', 'start': 663.242, 'duration': 1.401}, {'end': 666.763, 'text': 'We have our font change.', 'start': 664.683, 'duration': 2.08}, {'end': 671.625, 'text': 'Last thing that I want to do in the body is just add a little bit of padding.', 'start': 666.763, 'duration': 4.862}, {'end': 676.066, 'text': "We're gonna pass, set it to 1m and save All right.", 'start': 671.625, 'duration': 4.441}, {'end': 677.326, 'text': "so that's the body.", 'start': 676.066, 'duration': 1.26}, {'end': 680.667, 'text': "next we're gonna move on to the container, which wraps around everything.", 'start': 677.326, 'duration': 3.341}, {'end': 694.399, 'text': "We're gonna set a width for the container or, I'm sorry, a max width, because we want this to be responsive max width of 1170 pixels, Okay.", 'start': 680.667, 'duration': 13.732}], 'summary': 'Styling the body with dark blue color, line height 1.6, font family segoe ui, and adding padding. setting max width of container to 1170 pixels for responsiveness.', 'duration': 79.554, 'max_score': 614.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY614845.jpg'}, {'end': 951.438, 'src': 'embed', 'start': 916.332, 'weight': 0, 'content': [{'end': 918.294, 'text': 'You can see now it has a light blue background.', 'start': 916.332, 'duration': 1.962}, {'end': 923.699, 'text': "Let's see, I also want to add a little bit of style to the H3 and the UL right here.", 'start': 918.314, 'duration': 5.385}, {'end': 933.963, 'text': "So let's say dot company info H3 and also company info UL.", 'start': 925.456, 'duration': 8.507}, {'end': 937.626, 'text': 'Okay, so I want both to be aligned to the center.', 'start': 935.024, 'duration': 2.602}, {'end': 940.769, 'text': 'Save that.', 'start': 940.149, 'duration': 0.62}, {'end': 947.034, 'text': 'And also for the margin, I want it to be zero everywhere except the bottom.', 'start': 941.83, 'duration': 5.204}, {'end': 948.175, 'text': 'I want to do one rem.', 'start': 947.074, 'duration': 1.101}, {'end': 951.438, 'text': "And that's it.", 'start': 950.938, 'duration': 0.5}], 'summary': 'Styling the webpage with light blue background, center-aligned h3 and ul, and specific margin settings.', 'duration': 35.106, 'max_score': 916.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY916332.jpg'}], 'start': 588.565, 'title': 'Styling website elements in css', 'summary': 'Covers styling the website body, elements, and containers in css, with details on setting background colors, font styles, text alignment, and other design elements for a visually appealing web page.', 'chapters': [{'end': 666.763, 'start': 588.565, 'title': 'Styling website body in css', 'summary': 'Covers styling the website body in css, including setting a blue background color using hexadecimal values, changing the text color to dark blue, adjusting the line height to 1.6, and specifying the font family as segoe ui with backup options.', 'duration': 78.198, 'highlights': ['Setting a blue background color using hexadecimal value 92BDE7 for the website body.', 'Changing the text color to dark blue using the hexadecimal value 485E74.', 'Adjusting the line height to 1.6 for better spacing between the text.', 'Specifying the font family as Segoe UI with backup options of Tahoma, Geneva, Verdana, and Sans Serif.']}, {'end': 983.713, 'start': 666.763, 'title': 'Styling web page elements', 'summary': 'Covers the process of styling various web page elements, including setting container width, removing bullets from unordered lists, centering text, adding background colors, and applying box shadows.', 'duration': 316.95, 'highlights': ['Set max width of 1170 pixels for the container and apply auto margin on left and right. The max width of 1170 pixels is set for the container, ensuring a responsive layout, and auto margin is applied to center the container.', 'Remove bullets and default padding from unordered lists to apply to any unordered list on the page. The list style is set to none and default padding is removed from the unordered lists, which applies to all unordered lists on the page.', "Center the brand's text and change the color of 'Acme' in the H1 tag to white by wrapping it in a span. The text of the brand is centered, and the color of 'Acme' in the H1 tag is changed to white by wrapping it in a span and setting the color to white.", 'Add a box shadow around the wrapper with an RGBA value of 72, 94, 116, and an opacity of 0.7, and apply padding of 1m to all elements inside the wrapper. A box shadow with specific RGBA values and opacity is added around the wrapper, and 1m padding is applied to all elements directly inside the wrapper.', 'Give the company info area a light blue background and align the H3 and unordered list to the center with a bottom margin of 1rem. The company info area is styled with a light blue background, and the H3 and unordered list inside it are aligned to the center with a bottom margin of 1rem.']}], 'duration': 395.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY588565.jpg', 'highlights': ['Set max width of 1170 pixels for the container and apply auto margin on left and right.', 'Give the company info area a light blue background and align the H3 and unordered list to the center with a bottom margin of 1rem.', "Center the brand's text and change the color of 'Acme' in the H1 tag to white by wrapping it in a span.", 'Add a box shadow around the wrapper with an RGBA value of 72, 94, 116, and an opacity of 0.7, and apply padding of 1m to all elements inside the wrapper.', 'Setting a blue background color using hexadecimal value 92BDE7 for the website body.']}, {'end': 1780.167, 'segs': [{'end': 1044.319, 'src': 'heatmap', 'start': 1015.25, 'weight': 0.751, 'content': [{'end': 1018.131, 'text': "And we're going to say we want the grid template columns.", 'start': 1015.25, 'duration': 2.881}, {'end': 1021.892, 'text': 'Grid template columns.', 'start': 1020.972, 'duration': 0.92}, {'end': 1024.953, 'text': "We're going to do one fractional and one fractional.", 'start': 1021.912, 'duration': 3.041}, {'end': 1029.214, 'text': "And if I save that, it'll split it up into one and one.", 'start': 1025.733, 'duration': 3.481}, {'end': 1030.395, 'text': 'All right.', 'start': 1029.233, 'duration': 1.162}, {'end': 1035.836, 'text': "And if you want to know more about the grid CSS, I'd suggest watching the crash course that I did.", 'start': 1030.494, 'duration': 5.342}, {'end': 1039.077, 'text': "I just did it like, I don't know, a week and a half ago.", 'start': 1036.715, 'duration': 2.362}, {'end': 1041.698, 'text': "We're also going to add a little bit of grid gap.", 'start': 1039.957, 'duration': 1.741}, {'end': 1044.319, 'text': "We'll say 20 pixels.", 'start': 1043.018, 'duration': 1.301}], 'summary': 'The speaker discusses grid template columns, fractional units, grid gap, and suggests watching a css crash course.', 'duration': 29.069, 'max_score': 1015.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY1015250.jpg'}, {'end': 1133.673, 'src': 'heatmap', 'start': 1103.726, 'weight': 0.785, 'content': [{'end': 1106.229, 'text': "okay, now we haven't applied that class yet.", 'start': 1103.726, 'duration': 2.503}, {'end': 1121.808, 'text': "so let's go back to our HTML and the paragraph with the message we're going to give a class of full and the paragraph with the submit button we're going to give a class of full and then what we'll do is we'll say grid,", 'start': 1106.229, 'duration': 15.579}, {'end': 1124.989, 'text': "column and we're going to say one to three.", 'start': 1121.808, 'duration': 3.181}, {'end': 1128.371, 'text': 'So we basically want it to stretch out one to three.', 'start': 1125.67, 'duration': 2.701}, {'end': 1133.673, 'text': "So if I save it, you'll see now they're on their own line and they're actually going to stretch out all the way.", 'start': 1128.391, 'duration': 5.282}], 'summary': "Applying 'full' class to paragraph and submit button, and using 'grid' column to stretch out 1 to 3.", 'duration': 29.947, 'max_score': 1103.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY1103726.jpg'}, {'end': 1410.398, 'src': 'embed', 'start': 1368.171, 'weight': 1, 'content': [{'end': 1378.914, 'text': "Yeah, so we can go right here where we have the button, the input in the text area, and we'll add a border of one pixel Solid.", 'start': 1368.171, 'duration': 10.743}, {'end': 1394.773, 'text': "and for the color we're going to use that that c9e, C9e, 6ff and save, and now we have a light blue border and Okay, let's see.", 'start': 1378.914, 'duration': 15.859}, {'end': 1396.837, 'text': "So we're just about done with the mobile version.", 'start': 1394.933, 'duration': 1.904}, {'end': 1402.937, 'text': 'Um, Yeah, that looks good.', 'start': 1396.857, 'duration': 6.08}, {'end': 1410.398, 'text': "Now, if I were to make this bigger, it's not going to change.", 'start': 1404.357, 'duration': 6.041}], 'summary': 'Mobile version almost complete, light blue border added to button, input, and text area.', 'duration': 42.227, 'max_score': 1368.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY1368171.jpg'}, {'end': 1622.94, 'src': 'heatmap', 'start': 1567.355, 'weight': 0.802, 'content': [{'end': 1568.756, 'text': "so let's go ahead and grab the.", 'start': 1567.355, 'duration': 1.401}, {'end': 1574.595, 'text': 'yeah, that confused me.', 'start': 1572.034, 'duration': 2.561}, {'end': 1575.755, 'text': 'so this is the finished one.', 'start': 1574.595, 'duration': 1.16}, {'end': 1577.556, 'text': 'you see, we have the icons.', 'start': 1575.755, 'duration': 1.801}, {'end': 1580.457, 'text': "I'm just gonna close that so we don't get confused.", 'start': 1577.556, 'duration': 2.901}, {'end': 1580.957, 'text': "so it's.", 'start': 1580.457, 'duration': 0.5}, {'end': 1582.458, 'text': "let's just search for the font.", 'start': 1580.957, 'duration': 1.501}, {'end': 1587.02, 'text': 'awesome CDN.', 'start': 1582.458, 'duration': 4.562}, {'end': 1588.8, 'text': 'it should be the first link here.', 'start': 1587.02, 'duration': 1.78}, {'end': 1592.482, 'text': 'so grab the link tag and copy.', 'start': 1588.8, 'duration': 3.682}, {'end': 1599.124, 'text': "we're gonna go up to the top of the HTML file and we'll put it in right above our style CSS.", 'start': 1592.482, 'duration': 6.642}, {'end': 1604.805, 'text': 'we just wrap this so you guys can see everything All right.', 'start': 1599.124, 'duration': 5.681}, {'end': 1608.488, 'text': 'So now that we have font awesome, we can now add our icons.', 'start': 1604.825, 'duration': 3.663}, {'end': 1611.411, 'text': "I'm going to go right where we have the street name inside the ally.", 'start': 1608.508, 'duration': 2.903}, {'end': 1613.672, 'text': "We're going to have an eye tag with a class of F.A.", 'start': 1611.431, 'duration': 2.241}, {'end': 1615.714, 'text': 'and also a class of F.A.', 'start': 1614.173, 'duration': 1.541}, {'end': 1617.255, 'text': 'Dash Road.', 'start': 1616.295, 'duration': 0.96}, {'end': 1622.94, 'text': "And we're going to put a space after it like that.", 'start': 1617.275, 'duration': 5.665}], 'summary': 'Adding font awesome icons to html files for improved visual appeal.', 'duration': 55.585, 'max_score': 1567.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY1567355.jpg'}, {'end': 1608.488, 'src': 'embed', 'start': 1577.556, 'weight': 0, 'content': [{'end': 1580.457, 'text': "I'm just gonna close that so we don't get confused.", 'start': 1577.556, 'duration': 2.901}, {'end': 1580.957, 'text': "so it's.", 'start': 1580.457, 'duration': 0.5}, {'end': 1582.458, 'text': "let's just search for the font.", 'start': 1580.957, 'duration': 1.501}, {'end': 1587.02, 'text': 'awesome CDN.', 'start': 1582.458, 'duration': 4.562}, {'end': 1588.8, 'text': 'it should be the first link here.', 'start': 1587.02, 'duration': 1.78}, {'end': 1592.482, 'text': 'so grab the link tag and copy.', 'start': 1588.8, 'duration': 3.682}, {'end': 1599.124, 'text': "we're gonna go up to the top of the HTML file and we'll put it in right above our style CSS.", 'start': 1592.482, 'duration': 6.642}, {'end': 1604.805, 'text': 'we just wrap this so you guys can see everything All right.', 'start': 1599.124, 'duration': 5.681}, {'end': 1608.488, 'text': 'So now that we have font awesome, we can now add our icons.', 'start': 1604.825, 'duration': 3.663}], 'summary': 'Adding font awesome cdn link to html file for icons.', 'duration': 30.932, 'max_score': 1577.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY1577556.jpg'}, {'end': 1694.369, 'src': 'heatmap', 'start': 1639.562, 'weight': 0.992, 'content': [{'end': 1640.262, 'text': "Let's go back.", 'start': 1639.562, 'duration': 0.7}, {'end': 1641.583, 'text': 'And now we have our icons.', 'start': 1640.382, 'duration': 1.201}, {'end': 1642.844, 'text': 'All right.', 'start': 1642.564, 'duration': 0.28}, {'end': 1645.286, 'text': "So last thing we're going to do is the animate CSS.", 'start': 1642.864, 'duration': 2.422}, {'end': 1648.288, 'text': "So I'm going to say animate CSS CDN.", 'start': 1645.826, 'duration': 2.462}, {'end': 1653.332, 'text': "And we're going to grab this right here.", 'start': 1648.388, 'duration': 4.944}, {'end': 1654.813, 'text': "We'll say copy link tag.", 'start': 1653.372, 'duration': 1.441}, {'end': 1657.155, 'text': 'Put it in right under font awesome.', 'start': 1655.374, 'duration': 1.781}, {'end': 1664.051, 'text': "And all we're going to do is we're just going to add two classes to the wrapper.", 'start': 1660.369, 'duration': 3.682}, {'end': 1670.414, 'text': "So we're going to add animated, which just tells it that we want it to use animate CSS.", 'start': 1664.071, 'duration': 6.343}, {'end': 1678.178, 'text': 'And then whatever the type of animation we want, the one we want is, actually let me check, bounce in left.', 'start': 1670.874, 'duration': 7.304}, {'end': 1682.28, 'text': 'So bounce in left.', 'start': 1679.619, 'duration': 2.661}, {'end': 1684.001, 'text': 'And save.', 'start': 1683.381, 'duration': 0.62}, {'end': 1685.462, 'text': "And let's reload.", 'start': 1684.601, 'duration': 0.861}, {'end': 1687.743, 'text': "And you'll see it just comes in from the left.", 'start': 1685.902, 'duration': 1.841}, {'end': 1690.168, 'text': "So that's going to be it for this video.", 'start': 1688.368, 'duration': 1.8}, {'end': 1694.369, 'text': 'Like I said, I will look into doing a backend setup for this.', 'start': 1690.528, 'duration': 3.841}], 'summary': 'Added animate css cdn and applied bounce in left animation to the wrapper.', 'duration': 54.807, 'max_score': 1639.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY1639562.jpg'}], 'start': 984.633, 'title': 'Creating grid-based contact form with css', 'summary': 'Covers the creation of a grid-based contact form using css, including defining grid layout, styling form elements, adding media queries for responsive design, integrating font awesome icons, and applying animate.css for animations.', 'chapters': [{'end': 1780.167, 'start': 984.633, 'title': 'Creating grid-based contact form with css', 'summary': 'Covers the creation of a grid-based contact form using css, including defining grid layout, styling form elements, adding media queries for responsive design, integrating font awesome icons, and applying animate.css for animations.', 'duration': 795.534, 'highlights': ['Creation of grid-based contact form using CSS The chapter focuses on creating a grid-based contact form using CSS, demonstrating the use of display grid and grid template columns to structure the form layout, with specific styling for form elements and labels.', 'Integration of Font Awesome icons and Animate.css for animations The tutorial also includes the integration of Font Awesome icons and Animate.css for adding visual elements and animations to the contact form, enhancing user experience and visual appeal.', 'Inclusion of media queries for responsive design Additionally, the chapter covers the implementation of media queries to ensure responsive design, allowing the contact form to adapt to different screen sizes, thus enhancing the overall user experience across devices.']}], 'duration': 795.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sb5qOa3R4hY/pics/Sb5qOa3R4hY984633.jpg', 'highlights': ['Creation of grid-based contact form using CSS The chapter focuses on creating a grid-based contact form using CSS, demonstrating the use of display grid and grid template columns to structure the form layout, with specific styling for form elements and labels.', 'Integration of Font Awesome icons and Animate.css for animations The tutorial also includes the integration of Font Awesome icons and Animate.css for adding visual elements and animations to the contact form, enhancing user experience and visual appeal.', 'Inclusion of media queries for responsive design Additionally, the chapter covers the implementation of media queries to ensure responsive design, allowing the contact form to adapt to different screen sizes, thus enhancing the overall user experience across devices.']}], 'highlights': ['The project involves building a mobile-first responsive contact form using CSS3 techniques, including grid CSS.', 'The design process begins with creating a layout for mobile screens and then gradually adding media queries to accommodate larger screens.', 'The grid layout changes at around 700 pixels to display one fractional and two fractionals.', 'The back end implementation is planned for a separate video, possibly using PHP or other server-side language.', 'The chapter covers building an email feature and promoting Patreon support, offering special content and deals, with an option for email support.', 'The video will focus on building a back end to send emails and possibly implementing Firebase.', "Viewers are encouraged to check out the creator's Patreon page for special content, deals on future courses, and email support for YouTube videos and projects.", 'Using VS Code over Atom for front-end development The speaker prefers using VS Code over Atom for front-end development, finding it faster and more suitable for the task.', 'Switching from Atom live server to VS Code live server The speaker transitions from using Atom live server to VS Code live server for opening the project on localhost, finding it more convenient and efficient.', "Installing Live Server extension in VS Code The process of installing the Live Server extension in VS Code is explained, emphasizing its simplicity by searching for and clicking on 'install'.", 'Creating a basic HTML layout using VS Code The speaker demonstrates creating a basic HTML layout using VS Code with the help of Emmet, including adding a viewport meta tag for responsiveness and linking to a CSS file.', 'Plans for backend development in the future The speaker mentions plans for future backend development, indicating a shift in focus from front-end to backend in upcoming videos.', 'The box-sizing property is applied to all elements for consistent width calculation.', 'The creation of a div with the class of wrapper to apply a grid is detailed, along with the inclusion of two divs for company info and contact.', 'Creating a company info section with address, phone number, and email.', 'The contact form is styled using CSS, but appears horrible without any CSS applied, emphasizing the need for CSS for improved appearance.', 'Mention of noise in the background is briefly acknowledged.', 'Set max width of 1170 pixels for the container and apply auto margin on left and right.', 'Give the company info area a light blue background and align the H3 and unordered list to the center with a bottom margin of 1rem.', "Center the brand's text and change the color of 'Acme' in the H1 tag to white by wrapping it in a span.", 'Add a box shadow around the wrapper with an RGBA value of 72, 94, 116, and an opacity of 0.7, and apply padding of 1m to all elements inside the wrapper.', 'Setting a blue background color using hexadecimal value 92BDE7 for the website body.', 'Creation of grid-based contact form using CSS The chapter focuses on creating a grid-based contact form using CSS, demonstrating the use of display grid and grid template columns to structure the form layout, with specific styling for form elements and labels.', 'Integration of Font Awesome icons and Animate.css for animations The tutorial also includes the integration of Font Awesome icons and Animate.css for adding visual elements and animations to the contact form, enhancing user experience and visual appeal.', 'Inclusion of media queries for responsive design Additionally, the chapter covers the implementation of media queries to ensure responsive design, allowing the contact form to adapt to different screen sizes, thus enhancing the overall user experience across devices.']}