title
Creative SVG Backgrounds for Modern Web Design

description
https://coursetro.com -- In this tutorial, I show you how to create creative SVG backgrounds and then how to integrate them via HTML and CSS. Enjoy this quicky! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Creative SVG Backgrounds for Modern Web Design', 'heatmap': [{'end': 160.621, 'start': 138.985, 'weight': 0.73}, {'end': 201.172, 'start': 186.682, 'weight': 0.813}, {'end': 656.933, 'start': 544.717, 'weight': 0.774}, {'end': 701.456, 'start': 689.469, 'weight': 0.902}, {'end': 1104.171, 'start': 1085.454, 'weight': 0.75}, {'end': 1157.027, 'start': 1144.643, 'weight': 0.826}], 'summary': 'Learn to use svgs for trendy landing pages and web layout design, create cutout effects with adobe illustrator, implement in browser with html/css, use vector tools to design colorful landing pages, and style svg images for web design with css, layout adjustments, and responsiveness.', 'chapters': [{'end': 279.293, 'segs': [{'end': 43.969, 'src': 'embed', 'start': 2.807, 'weight': 0, 'content': [{'end': 4.948, 'text': 'hey, everyone, gary simon, of course, retro,', 'start': 2.807, 'duration': 2.141}, {'end': 16.593, 'text': 'and today i wanted to do a tutorial on uh svgs and using them as both background images and also not in order to create the sort of uh,', 'start': 4.948, 'duration': 11.645}, {'end': 17.533, 'text': "it's kind of trendy.", 'start': 16.593, 'duration': 0.94}, {'end': 23.576, 'text': "i've been seeing a lot in 2018 this type of landing page, as you can see here on my monitor, uh,", 'start': 17.533, 'duration': 6.043}, {'end': 34.943, 'text': "where basically you have different cutouts in the svg itself, and i'm going to show you exactly how to do that using a adobe illustrator, cc,", 'start': 23.576, 'duration': 11.367}, {'end': 36.023, 'text': "though you don't have to use it.", 'start': 34.943, 'duration': 1.08}, {'end': 43.709, 'text': "you can use any vector application, and then i'm also going to show you how to actually make it a reality in the browser with html and css.", 'start': 36.023, 'duration': 7.686}, {'end': 43.969, 'text': 'all right.', 'start': 43.709, 'duration': 0.26}], 'summary': 'Tutorial on using svgs for trendy landing pages, with adobe illustrator, cc, and html/css.', 'duration': 41.162, 'max_score': 2.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg2807.jpg'}, {'end': 111.586, 'src': 'embed', 'start': 85.552, 'weight': 5, 'content': [{'end': 90.995, 'text': "All right, so we'll say this just as the above the fold portion of a web layout.", 'start': 85.552, 'duration': 5.443}, {'end': 97.138, 'text': "And by the way, what I'm doing here, this could also work with something that's for mobile or for apps or whatever too.", 'start': 91.075, 'duration': 6.063}, {'end': 105.103, 'text': 'All right, so what I want to do is I will just start off with the pen tool in and of itself.', 'start': 97.158, 'duration': 7.945}, {'end': 111.586, 'text': "and I'm gonna start up here up top by just putting an anchor point right on the upper left corner.", 'start': 106.183, 'duration': 5.403}], 'summary': 'Demonstrating web layout with pen tool, adaptable for mobile or apps.', 'duration': 26.034, 'max_score': 85.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg85552.jpg'}, {'end': 160.621, 'src': 'heatmap', 'start': 125.034, 'weight': 1, 'content': [{'end': 136.523, 'text': "we have one, two and then now this section will cut it out from the SVG so that it's pure white and that way the navigation can go here alright.", 'start': 125.034, 'duration': 11.489}, {'end': 138.985, 'text': "so I'm just gonna come down a little bit.", 'start': 136.523, 'duration': 2.462}, {'end': 150.074, 'text': "I'm going to hold shift and just to drag out to create a bezier curve and then just end it right around, I'd say right around there.", 'start': 138.985, 'duration': 11.089}, {'end': 155.898, 'text': "I'm just eyeballing it really, and this is one of these common trends I'm starting to see more of,", 'start': 150.074, 'duration': 5.824}, {'end': 160.621, 'text': "like some type of unique cutout where there's a navigation here.", 'start': 155.898, 'duration': 4.723}], 'summary': 'Creating a unique cutout from the svg for navigation.', 'duration': 25.04, 'max_score': 125.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg125034.jpg'}, {'end': 223.572, 'src': 'heatmap', 'start': 186.682, 'weight': 0.813, 'content': [{'end': 188.723, 'text': "I'd rather have a gradient.", 'start': 186.682, 'duration': 2.041}, {'end': 191.725, 'text': 'so if I click on the gradient over here, click it with a great.', 'start': 188.723, 'duration': 3.002}, {'end': 201.172, 'text': "the gradient to over here, arm, it's going to use Leonard linear G and then just drag, kinda like a diagonal, alright,", 'start': 191.725, 'duration': 9.447}, {'end': 204.914, 'text': "and again there's no right or wrong, and this is just the approach I'm taking.", 'start': 201.172, 'duration': 3.742}, {'end': 209.797, 'text': "so for the first caller, switch to RGB here I don't know.", 'start': 204.914, 'duration': 4.883}, {'end': 214.069, 'text': "maybe I'll have something like a blue.", 'start': 209.797, 'duration': 4.272}, {'end': 223.572, 'text': "I didn't have one like really specific in mind.", 'start': 221.431, 'duration': 2.141}], 'summary': 'Using a gradient tool to create a diagonal linear g, no specific color in mind.', 'duration': 36.89, 'max_score': 186.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg186682.jpg'}, {'end': 236.137, 'src': 'embed', 'start': 204.914, 'weight': 2, 'content': [{'end': 209.797, 'text': "so for the first caller, switch to RGB here I don't know.", 'start': 204.914, 'duration': 4.883}, {'end': 214.069, 'text': "maybe I'll have something like a blue.", 'start': 209.797, 'duration': 4.272}, {'end': 223.572, 'text': "I didn't have one like really specific in mind.", 'start': 221.431, 'duration': 2.141}, {'end': 225.313, 'text': 'Something like right around there will be good.', 'start': 223.632, 'duration': 1.681}, {'end': 229.714, 'text': 'So that color code is 2AA9FF right there.', 'start': 226.153, 'duration': 3.561}, {'end': 230.895, 'text': 'All right.', 'start': 229.734, 'duration': 1.161}, {'end': 231.895, 'text': 'Hit enter.', 'start': 231.475, 'duration': 0.42}, {'end': 236.137, 'text': "We'll take this second color picker and we'll go back to RGB.", 'start': 232.475, 'duration': 3.662}], 'summary': 'Caller selects color code 2aa9ff and switches to rgb.', 'duration': 31.223, 'max_score': 204.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg204914.jpg'}, {'end': 288.88, 'src': 'embed', 'start': 260.358, 'weight': 6, 'content': [{'end': 262.8, 'text': "But I'm happy with this right here.", 'start': 260.358, 'duration': 2.442}, {'end': 265.302, 'text': "It's pretty subtle, but it does have nice color.", 'start': 262.82, 'duration': 2.482}, {'end': 268.745, 'text': "So now we could just call it quits, and that's it.", 'start': 265.542, 'duration': 3.203}, {'end': 270.206, 'text': 'You could have a logo over here.', 'start': 268.765, 'duration': 1.441}, {'end': 272.048, 'text': 'You have your navigation over here.', 'start': 270.626, 'duration': 1.422}, {'end': 274.349, 'text': "And that's that.", 'start': 273.809, 'duration': 0.54}, {'end': 275.49, 'text': 'But we can add even more.', 'start': 274.41, 'duration': 1.08}, {'end': 279.293, 'text': 'We can do you know here, in Adobe Illustrator at least,', 'start': 275.51, 'duration': 3.783}, {'end': 287.519, 'text': 'and I know other vector applications have it just the ability to cut out easily from this shape to create more interesting,', 'start': 279.293, 'duration': 8.226}, {'end': 288.88, 'text': 'a more interesting background here.', 'start': 287.519, 'duration': 1.361}], 'summary': 'Satisfied with current design, but can add more using adobe illustrator for a more interesting background.', 'duration': 28.522, 'max_score': 260.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg260358.jpg'}], 'start': 2.807, 'title': 'Using svgs and web layout design', 'summary': 'Covers using svgs for trendy landing pages and creating web layout above the fold design. it demonstrates creating cutout effects using adobe illustrator and implementing them in the browser with html and css, and also discusses creating svg cutouts and gradients with specific color codes applicable to mobile and apps.', 'chapters': [{'end': 84.732, 'start': 2.807, 'title': 'Using svgs for trendy landing pages', 'summary': 'Discusses using svgs for trendy landing pages, demonstrating how to create cutout effects using adobe illustrator and then implementing it in the browser with html and css.', 'duration': 81.925, 'highlights': ['The tutorial demonstrates creating trendy landing pages using SVGs, which has been popular in 2018.', 'The speaker uses Adobe Illustrator to create the SVGs but mentions that any vector drawing application with a pen tool can be used.', "The chapter emphasizes that viewers don't need to have Adobe Illustrator to benefit from the tutorial.", 'The speaker shows how to implement the created SVGs in the browser using HTML and CSS.']}, {'end': 125.034, 'start': 85.552, 'title': 'Web layout above the fold design', 'summary': 'Discusses creating a web layout above the fold, using the pen tool to place anchor points and guides, applicable to mobile and apps.', 'duration': 39.482, 'highlights': ['Using the pen tool to place anchor points and guides for web layout design.', 'Applicability to mobile and apps for layout design.']}, {'end': 279.293, 'start': 125.034, 'title': 'Creating svg cutout and gradient in adobe illustrator', 'summary': 'Demonstrates creating a cutout in an svg image for navigation, using a gradient with specific color codes, and discussing the possibility of adding more colors and elements to the design.', 'duration': 154.259, 'highlights': ['Creating a cutout in the SVG image for navigation, using the approach of creating bezier curves and lines with perfectly correct angles and holding shift for unique cutout designs.', 'Using a gradient with specific color codes, such as 2AA9FF and 3FF9FF, and discussing the option of adding more colors to the gradient.', 'Discussing the possibility of adding more elements to the design, such as a logo, and navigation, and exploring further options for design enhancements.']}], 'duration': 276.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg2807.jpg', 'highlights': ['The tutorial demonstrates creating trendy landing pages using SVGs, popular in 2018.', 'Creating a cutout in the SVG image for navigation using bezier curves and lines.', 'Using a gradient with specific color codes, such as 2AA9FF and 3FF9FF.', 'Using Adobe Illustrator to create the SVGs but any vector drawing application can be used.', 'Implementing the created SVGs in the browser using HTML and CSS.', 'Applicability to mobile and apps for layout design.', 'Discussing the possibility of adding more elements to the design, such as a logo and navigation.']}, {'end': 596.888, 'segs': [{'end': 376.542, 'src': 'embed', 'start': 279.293, 'weight': 0, 'content': [{'end': 287.519, 'text': 'and I know other vector applications have it just the ability to cut out easily from this shape to create more interesting,', 'start': 279.293, 'duration': 8.226}, {'end': 288.88, 'text': 'a more interesting background here.', 'start': 287.519, 'duration': 1.361}, {'end': 290.842, 'text': "So I think I'll do that.", 'start': 288.98, 'duration': 1.862}, {'end': 293.984, 'text': 'And one thing that you can do.', 'start': 292.183, 'duration': 1.801}, {'end': 299.168, 'text': 'I mean, once you start to understand the vector tools and all of the different things you can do, you can just have fun with it.', 'start': 293.984, 'duration': 5.184}, {'end': 302.05, 'text': "So I'm going to take the ellipse tool.", 'start': 299.228, 'duration': 2.822}, {'end': 308.064, 'text': 'All right, just drag out something around that size for now.', 'start': 303.823, 'duration': 4.241}, {'end': 311.466, 'text': 'Control-C, Control-F to duplicate.', 'start': 309.345, 'duration': 2.121}, {'end': 317.748, 'text': 'All right, notice I kind of put it directly in the center over here, holding Shift, waiting for those guidelines to show up.', 'start': 311.486, 'duration': 6.262}, {'end': 319.088, 'text': 'Control-C, Control-F.', 'start': 317.928, 'duration': 1.16}, {'end': 322.949, 'text': 'Control-C, Control-F.', 'start': 321.609, 'duration': 1.34}, {'end': 324.93, 'text': 'Maybe one more time.', 'start': 324.09, 'duration': 0.84}, {'end': 325.87, 'text': 'So I have like five of them.', 'start': 324.95, 'duration': 0.92}, {'end': 328.111, 'text': "All right, now we're going to take all of them.", 'start': 326.59, 'duration': 1.521}, {'end': 332.301, 'text': "And we're going to go to Window and then Pathfinder.", 'start': 329.878, 'duration': 2.423}, {'end': 334.303, 'text': "It's showing up on my other screen.", 'start': 332.321, 'duration': 1.982}, {'end': 337.486, 'text': "And we're just going to unite them.", 'start': 335.584, 'duration': 1.902}, {'end': 342.811, 'text': 'And since that has happened, oops, I think I also had the background.', 'start': 338.827, 'duration': 3.984}, {'end': 343.392, 'text': 'There you go.', 'start': 343.071, 'duration': 0.321}, {'end': 344.553, 'text': 'Now we want to unite them.', 'start': 343.612, 'duration': 0.941}, {'end': 346.234, 'text': 'Now we have the single shape right here.', 'start': 344.593, 'duration': 1.641}, {'end': 351.179, 'text': 'What I want to do is, you know, we could leave it like this.', 'start': 348.397, 'duration': 2.782}, {'end': 352.72, 'text': "that's fine.", 'start': 352.02, 'duration': 0.7}, {'end': 357.161, 'text': 'but i want to kind of smooth these out, these, uh, these edges right there.', 'start': 352.72, 'duration': 4.441}, {'end': 363.703, 'text': "so to do that you can use, um, the small smooth tool, and that's right here.", 'start': 357.161, 'duration': 6.542}, {'end': 365.423, 'text': "so i'm just going to go over this area.", 'start': 363.703, 'duration': 1.72}, {'end': 367.984, 'text': "i'm just going to left click and that notice.", 'start': 365.423, 'duration': 2.561}, {'end': 370.724, 'text': "now it's just smooth those out ever so slightly.", 'start': 367.984, 'duration': 2.74}, {'end': 374.385, 'text': "you can do it several times and it'll make it even smoother.", 'start': 370.724, 'duration': 3.661}, {'end': 376.542, 'text': "I think I'm happy with that.", 'start': 375.481, 'duration': 1.061}], 'summary': 'Demonstrates using vector tools to create a more interesting background, including duplicating and uniting shapes, then smoothing the edges for a final result.', 'duration': 97.249, 'max_score': 279.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg279293.jpg'}, {'end': 511.493, 'src': 'embed', 'start': 477.858, 'weight': 1, 'content': [{'end': 484.52, 'text': "And then we'll take this and we'll just kind of make it more on the pinkish side.", 'start': 477.858, 'duration': 6.662}, {'end': 487.401, 'text': "All right, so it's kind of subtle.", 'start': 484.54, 'duration': 2.861}, {'end': 489.801, 'text': "And that's the look I'm going for.", 'start': 487.961, 'duration': 1.84}, {'end': 491.482, 'text': "So that's the first one.", 'start': 490.462, 'duration': 1.02}, {'end': 493.963, 'text': 'We could do other unique stuff.', 'start': 492.442, 'duration': 1.521}, {'end': 495.323, 'text': 'We could take the Polygon tool.', 'start': 493.983, 'duration': 1.34}, {'end': 509.671, 'text': 'Alright, and so we have like a 1, 2, 3, 4, 5, 6, a hexagon and we have these, you can barely see them, these little corner radiuses.', 'start': 498.604, 'duration': 11.067}, {'end': 511.493, 'text': 'Pull these in.', 'start': 510.892, 'duration': 0.601}], 'summary': 'Creating a pinkish look with subtle details and unique shapes using the polygon tool.', 'duration': 33.635, 'max_score': 477.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg477858.jpg'}, {'end': 570.597, 'src': 'embed', 'start': 544.717, 'weight': 6, 'content': [{'end': 549.982, 'text': "So these are the three shapes that we're gonna use for this sort of colorful landing page.", 'start': 544.717, 'duration': 5.265}, {'end': 561.711, 'text': "And so real quickly, I'm just gonna take these and where's my layers at? And we can click this, collect for export.", 'start': 550.522, 'duration': 11.189}, {'end': 563.532, 'text': 'So we can do that for each one of these.', 'start': 561.971, 'duration': 1.561}, {'end': 567.455, 'text': "Let's see here, here, and here.", 'start': 565.634, 'duration': 1.821}, {'end': 570.597, 'text': 'Probably could have selected all three and just clicked it once.', 'start': 567.475, 'duration': 3.122}], 'summary': 'Using three shapes for a colorful landing page, exporting each for collecting', 'duration': 25.88, 'max_score': 544.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg544717.jpg'}], 'start': 279.293, 'title': 'Vector tools and designing colorful landing page', 'summary': 'Discusses using vector tools to create a more interesting background in adobe illustrator, and covers the process of designing a colorful landing page with smooth edges, unique design elements, and exporting for web use.', 'chapters': [{'end': 352.72, 'start': 279.293, 'title': 'Vector tools and techniques', 'summary': 'Discusses using vector tools to create a more interesting background, demonstrating the process of duplicating and uniting shapes to create a single shape in adobe illustrator.', 'duration': 73.427, 'highlights': ['The process of duplicating and uniting shapes to create a single shape in Adobe Illustrator.', 'Demonstrating the usage of vector tools to create a more interesting background.', 'Exploring the ability to cut out easily from a shape in vector applications.', 'Utilizing the ellipse tool and duplicating shapes by using Control-C, Control-F.']}, {'end': 596.888, 'start': 352.72, 'title': 'Designing colorful landing page', 'summary': 'Covers the process of designing a colorful landing page, including using the smooth tool to create smooth edges, adding unique design elements like geometric shapes and gradients, and exporting the design for web use.', 'duration': 244.168, 'highlights': ['Using the smooth tool to create smooth edges and improve the design aesthetics.', 'Adding unique design elements like geometric shapes and gradients to enhance the visual appeal of the landing page.', 'Exporting the design for web use by collecting the elements for export and naming the layers for organization.']}], 'duration': 317.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg279293.jpg', 'highlights': ['Demonstrating the usage of vector tools to create a more interesting background.', 'Adding unique design elements like geometric shapes and gradients to enhance the visual appeal.', 'Using the smooth tool to create smooth edges and improve the design aesthetics.', 'The process of duplicating and uniting shapes to create a single shape in Adobe Illustrator.', 'Exploring the ability to cut out easily from a shape in vector applications.', 'Utilizing the ellipse tool and duplicating shapes by using Control-C, Control-F.', 'Exporting the design for web use by collecting the elements for export and naming the layers for organization.']}, {'end': 1167.925, 'segs': [{'end': 651.088, 'src': 'embed', 'start': 623.067, 'weight': 0, 'content': [{'end': 625.168, 'text': 'And then also an empty images folder.', 'start': 623.067, 'duration': 2.101}, {'end': 626.228, 'text': "That's where we're going to put those.", 'start': 625.208, 'duration': 1.02}, {'end': 628.969, 'text': "So select folder, and now it's exported them.", 'start': 626.329, 'duration': 2.64}, {'end': 634.914, 'text': 'Awesome So now we can go ahead and get started on the coding portion.', 'start': 629.77, 'duration': 5.144}, {'end': 639.618, 'text': 'So to do that, I have that folder opened up with the images.', 'start': 635.455, 'duration': 4.163}, {'end': 642.521, 'text': 'We need to create an index HTML file.', 'start': 639.999, 'duration': 2.522}, {'end': 646.364, 'text': "By the way, I'm using Visual Studio Code.", 'start': 644.342, 'duration': 2.022}, {'end': 651.088, 'text': 'This is free and it gives you some handy snippets.', 'start': 646.384, 'duration': 4.704}], 'summary': 'Preparing to code with visual studio code and an images folder.', 'duration': 28.021, 'max_score': 623.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg623067.jpg'}, {'end': 723.111, 'src': 'heatmap', 'start': 689.469, 'weight': 0.902, 'content': [{'end': 690.249, 'text': "And there's not going to be much.", 'start': 689.469, 'duration': 0.78}, {'end': 693.371, 'text': 'So the very first two elements I want to place here.', 'start': 690.69, 'duration': 2.681}, {'end': 701.456, 'text': 'So if you think about this in terms of HTML, in terms of what comes first, first we have the body tag.', 'start': 694.252, 'duration': 7.204}, {'end': 705.459, 'text': 'This will contain the BGSVG as the background.', 'start': 701.716, 'duration': 3.743}, {'end': 711.763, 'text': 'And then on top of that, next comes the two left and right images.', 'start': 706.099, 'duration': 5.664}, {'end': 715.025, 'text': 'So that would be this one and this one.', 'start': 711.903, 'duration': 3.122}, {'end': 717.227, 'text': "And we'll use position absolute for that.", 'start': 715.105, 'duration': 2.122}, {'end': 723.111, 'text': "So we'll have image source equals forward slash images, left ISVG.", 'start': 717.887, 'duration': 5.224}], 'summary': 'In html, the body tag is first, containing the bgsvg background, followed by two left and right images using position absolute.', 'duration': 33.642, 'max_score': 689.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg689469.jpg'}, {'end': 955.478, 'src': 'embed', 'start': 925.985, 'weight': 6, 'content': [{'end': 929.866, 'text': 'By the way, you need node.js and npm as well before you can run that command.', 'start': 925.985, 'duration': 3.881}, {'end': 935.228, 'text': 'But npm install http-server-g for global.', 'start': 929.886, 'duration': 5.342}, {'end': 941.29, 'text': 'So that looks like, for instance, npm i, and then i is a shorthand for install.', 'start': 935.248, 'duration': 6.042}, {'end': 943.871, 'text': 'It would be http-server-g.', 'start': 941.77, 'duration': 2.101}, {'end': 946.716, 'text': 'You only have to run that once.', 'start': 945.694, 'duration': 1.022}, {'end': 948.759, 'text': 'Then you can just run HPServer from anything.', 'start': 946.756, 'duration': 2.003}, {'end': 955.478, 'text': "And now it's gonna give us a little quick server at localhost 8080.", 'start': 949.581, 'duration': 5.897}], 'summary': 'Install http-server-g globally using npm for quick server setup at localhost 8080.', 'duration': 29.493, 'max_score': 925.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg925985.jpg'}, {'end': 1014.225, 'src': 'embed', 'start': 981.019, 'weight': 4, 'content': [{'end': 981.959, 'text': 'Pretty ugly.', 'start': 981.019, 'duration': 0.94}, {'end': 982.64, 'text': "So don't worry.", 'start': 981.999, 'duration': 0.641}, {'end': 984.56, 'text': "We'll fix that momentarily.", 'start': 983.18, 'duration': 1.38}, {'end': 985.421, 'text': 'All right.', 'start': 985.161, 'duration': 0.26}, {'end': 991.003, 'text': "So coming back here to our main CSS file, let's just hit Control-B.", 'start': 985.501, 'duration': 5.502}, {'end': 994.825, 'text': "And now, so let's see.", 'start': 992.004, 'duration': 2.821}, {'end': 995.646, 'text': 'We have our left.', 'start': 994.865, 'duration': 0.781}, {'end': 996.986, 'text': 'Now we need a right.', 'start': 996.126, 'duration': 0.86}, {'end': 1002.669, 'text': 'The position, of course, will be absolute as well.', 'start': 999.907, 'duration': 2.762}, {'end': 1007.431, 'text': 'And then if I could actually spell it or type it right.', 'start': 1003.509, 'duration': 3.922}, {'end': 1014.225, 'text': "And then this one, we're going to have top by about 20%.", 'start': 1009.522, 'duration': 4.703}], 'summary': 'Fixing css layout, adding right position with 20% top.', 'duration': 33.206, 'max_score': 981.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg981019.jpg'}, {'end': 1113.518, 'src': 'heatmap', 'start': 1085.454, 'weight': 5, 'content': [{'end': 1087.617, 'text': "Let's check out what we have so far in the browser.", 'start': 1085.454, 'duration': 2.163}, {'end': 1091.083, 'text': "Main, let's see here, css, main.css.", 'start': 1088.419, 'duration': 2.664}, {'end': 1096.845, 'text': 'By the way, this is an ideal development environment.', 'start': 1094.083, 'duration': 2.762}, {'end': 1101.629, 'text': 'Normally I would use something that would auto-refresh or auto-reload the browser and stuff upon file changes,', 'start': 1097.246, 'duration': 4.383}, {'end': 1104.171, 'text': "but I didn't want to have all that set up for this tutorial.", 'start': 1101.629, 'duration': 2.542}, {'end': 1106.813, 'text': "So now we're actually getting there pretty quickly.", 'start': 1104.611, 'duration': 2.202}, {'end': 1109.114, 'text': "So let's keep on going.", 'start': 1107.033, 'duration': 2.081}, {'end': 1111.056, 'text': "It's actually not very much left.", 'start': 1109.555, 'duration': 1.501}, {'end': 1113.518, 'text': 'I think just three more rule sets after this.', 'start': 1111.076, 'duration': 2.442}], 'summary': 'Setting up the development environment with manual browser refresh, making quick progress with three more rule sets left.', 'duration': 28.064, 'max_score': 1085.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg1085454.jpg'}, {'end': 1167.925, 'src': 'heatmap', 'start': 1144.643, 'weight': 3, 'content': [{'end': 1147.944, 'text': "so now let's go back.", 'start': 1144.643, 'duration': 3.301}, {'end': 1151.265, 'text': 'refresh, there we go.', 'start': 1147.944, 'duration': 3.321}, {'end': 1157.027, 'text': 'so I hopefully that was a pretty good a primer,', 'start': 1151.265, 'duration': 5.762}, {'end': 1167.925, 'text': "just on using you know being very creative with your SVG graphics and and using it relatively quickly to create something that's pretty colorful and vibrant.", 'start': 1157.027, 'duration': 10.898}], 'summary': 'Using svg graphics creatively to quickly create colorful and vibrant visuals.', 'duration': 29.965, 'max_score': 1144.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg1144643.jpg'}], 'start': 596.928, 'title': 'Creating and styling svg images for web design', 'summary': 'Covers setting up folders for svg images and coding process using visual studio code, creating svg backgrounds and css styling for a web page, including html structure, css properties, and use of an npm package, and creating vibrant and colorful svg graphics emphasizing css styling, layout adjustments, size, positioning, alignment, and responsiveness.', 'chapters': [{'end': 651.088, 'start': 596.928, 'title': 'Creating svg images for web design', 'summary': 'Covers setting up folders for svg images and starting the coding process using visual studio code for web design.', 'duration': 54.16, 'highlights': ['Setting up folders for SVG images and an empty images folder for the web project.', 'Using Visual Studio Code for coding, which provides handy snippets and is free.', 'Selecting the folder with the images to create an index HTML file for the web project.']}, {'end': 955.478, 'start': 651.148, 'title': 'Creating svg backgrounds and css styling', 'summary': 'Details the process of creating svg backgrounds and css styling for a web page, including the structure of the html, the setup of css properties, and the use of an npm package for server setup.', 'duration': 304.33, 'highlights': ['Setting up the structure of the HTML', 'Defining CSS properties for background and text elements', 'Using an npm package for server setup']}, {'end': 1167.925, 'start': 955.478, 'title': 'Creating vibrant svg graphics', 'summary': 'Demonstrates how to create vibrant and colorful svg graphics relatively quickly, emphasizing css styling and layout adjustments, with specific emphasis on size, positioning, and alignment, and avoiding responsiveness.', 'duration': 212.447, 'highlights': ['The tutorial focuses on creating vibrant and colorful SVG graphics using CSS styling and layout adjustments, emphasizing size, positioning, alignment, and avoiding responsiveness.', 'The chapter provides specific CSS details, including absolute positioning, Z index, padding, list style, floating elements, and font size adjustments.', 'The speaker mentions the use of an ideal development environment for the tutorial, highlighting the efficiency and speed of the process.', 'The tutorial emphasizes the quick and efficient creation of vibrant and colorful SVG graphics, with the speaker indicating that the demonstration is almost complete, with just three more rule sets left to cover.']}], 'duration': 570.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OjIxscGV-Qg/pics/OjIxscGV-Qg596928.jpg', 'highlights': ['Setting up folders for SVG images and an empty images folder for the web project.', 'Using Visual Studio Code for coding, which provides handy snippets and is free.', 'Selecting the folder with the images to create an index HTML file for the web project.', 'The tutorial focuses on creating vibrant and colorful SVG graphics using CSS styling and layout adjustments.', 'The chapter provides specific CSS details, including absolute positioning, Z index, padding, list style, floating elements, and font size adjustments.', 'The speaker mentions the use of an ideal development environment for the tutorial, highlighting the efficiency and speed of the process.', 'Using an npm package for server setup.', 'The tutorial emphasizes the quick and efficient creation of vibrant and colorful SVG graphics.']}], 'highlights': ['Creating trendy landing pages using SVGs, popular in 2018', 'Using Adobe Illustrator to create the SVGs but any vector drawing application can be used', 'Demonstrating the usage of vector tools to create a more interesting background', 'Using a gradient with specific color codes, such as 2AA9FF and 3FF9FF', 'Implementing the created SVGs in the browser using HTML and CSS', 'Setting up folders for SVG images and an empty images folder for the web project', 'Using Visual Studio Code for coding, which provides handy snippets and is free', 'The tutorial focuses on creating vibrant and colorful SVG graphics using CSS styling and layout adjustments', 'Exporting the design for web use by collecting the elements for export and naming the layers for organization', 'Applicability to mobile and apps for layout design']}