title
Here's 1 Trick to EASILY Make An Awesome Looking Website

description
https://bit.ly/3qhmoGh - Take my UI Design Bootcamp Now! -- Want to learn UI/UX? https://designcourse.com​ -- Today, I'm going to show you a pretty snazzy trick that will allow you to create highly illustrative and animated UI's without a lot of hassle. You don't need to be a great illustrator, UI designer or coder to pull this one off. Let's get started! #ui #illustration #legit - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: 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 Designcourse.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': "Here's 1 Trick to EASILY Make An Awesome Looking Website", 'heatmap': [{'end': 598.147, 'start': 565.775, 'weight': 0.811}, {'end': 671.443, 'start': 641.499, 'weight': 1}], 'summary': 'Learn how to efficiently convert high-quality vector graphics into vibrant ui illustrations with parallax effect, prepare purchased vector illustrations in adobe illustrator for webpage backgrounds, create responsive svg designs, troubleshoot cloud animations, and implement parallax effect using relics.js library for experimentation and fine-tuning.', 'chapters': [{'end': 93.16, 'segs': [{'end': 93.16, 'src': 'embed', 'start': 55.798, 'weight': 0, 'content': [{'end': 61.943, 'text': 'You could try to learn how to do it yourself, but that takes a lot of time because UI design is not illustration.', 'start': 55.798, 'duration': 6.145}, {'end': 62.804, 'text': 'Or you can.', 'start': 61.963, 'duration': 0.841}, {'end': 70.588, 'text': 'use one of the many asset sites for illustrations, where you can either purchase one or you can get one for free.', 'start': 64.785, 'duration': 5.803}, {'end': 74.39, 'text': "now, usually the type of illustrations i'm talking about, they're really high quality.", 'start': 70.588, 'duration': 3.802}, {'end': 78.792, 'text': 'so usually you have to spend a few bucks literally just a few bucks, um in order to buy them.', 'start': 74.39, 'duration': 4.402}, {'end': 82.374, 'text': "and that's exactly what i'm going to be doing in this uh, tutorial here.", 'start': 78.792, 'duration': 3.582}, {'end': 88.157, 'text': 'and just to show you again, this is a um, this is from graphicriver.net.', 'start': 82.374, 'duration': 5.783}, {'end': 90.358, 'text': 'um, and this is just an illustration i found for 12 bucks.', 'start': 88.157, 'duration': 2.201}, {'end': 93.16, 'text': "all right, it's really nice,", 'start': 91.599, 'duration': 1.561}], 'summary': 'Consider using asset sites to purchase high-quality illustrations for a few bucks, such as one found for $12 on graphicriver.net.', 'duration': 37.362, 'max_score': 55.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg55798.jpg'}], 'start': 0.209, 'title': 'Converting vector graphics to ui illustrations', 'summary': 'Discusses the efficient conversion of high-quality vector graphics into vibrant user interface illustrations with parallax effect using asset sites like graphicriver.net, enabling savings in time and cost for ui designers.', 'chapters': [{'end': 93.16, 'start': 0.209, 'title': 'Converting vector graphics to ui illustrations', 'summary': 'Discusses quickly converting high-quality vector graphics into vibrant user interface illustrations with parallax effect using asset sites, such as graphicriver.net, where illustrations can be purchased for a few bucks, saving time and cost for ui designers.', 'duration': 92.951, 'highlights': ['UI designers can quickly convert high-quality vector graphics into vibrant user interface illustrations with parallax effect using asset sites like graphicriver.net, where illustrations can be purchased for a few bucks.', 'Learning to do illustrative UI design takes a lot of time as UI design is not illustration, and hiring an illustrator can be costly.', 'The tutorial showcases purchasing an illustration for 12 bucks from graphicriver.net as an example of obtaining high-quality illustrations for a low cost.']}], 'duration': 92.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg209.jpg', 'highlights': ['UI designers can quickly convert high-quality vector graphics into vibrant user interface illustrations with parallax effect using asset sites like graphicriver.net, where illustrations can be purchased for a few bucks.', 'The tutorial showcases purchasing an illustration for 12 bucks from graphicriver.net as an example of obtaining high-quality illustrations for a low cost.', 'Learning to do illustrative UI design takes a lot of time as UI design is not illustration, and hiring an illustrator can be costly.']}, {'end': 346.77, 'segs': [{'end': 148.059, 'src': 'embed', 'start': 119.898, 'weight': 1, 'content': [{'end': 122.94, 'text': "you're about to watch me do a really cool UI design trick.", 'start': 119.898, 'duration': 3.042}, {'end': 126.382, 'text': "But what if you're just absolutely horrible at UI design in general?", 'start': 123.38, 'duration': 3.002}, {'end': 132.186, 'text': "Well, that's why you should take my UI design bootcamp at the sponsor of this video, which is scrimba.com.", 'start': 126.502, 'duration': 5.684}, {'end': 134.268, 'text': "At scrimba, you don't just watch videos.", 'start': 132.427, 'duration': 1.841}, {'end': 139.092, 'text': "no, no, you're actually able to modify code in the browser while you learn.", 'start': 134.608, 'duration': 4.484}, {'end': 146.017, 'text': 'my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer,', 'start': 139.092, 'duration': 6.925}, {'end': 148.059, 'text': "and they're packed with interactive challenges.", 'start': 146.017, 'duration': 2.042}], 'summary': 'Ui design bootcamp at scrimba.com offers 100+ interactive lessons for becoming an awesome ui designer.', 'duration': 28.161, 'max_score': 119.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg119898.jpg'}, {'end': 184.902, 'src': 'embed', 'start': 159.086, 'weight': 2, 'content': [{'end': 163.728, 'text': 'now there are many different sites that you can buy vector illustrations from.', 'start': 159.086, 'duration': 4.642}, {'end': 174.793, 'text': "um, there's many that are free, but in my experience, uh, the free ones, i you're not going to get something that, in my opinion, unless you're lucky,", 'start': 163.728, 'duration': 11.065}, {'end': 181.799, 'text': "something that's really of a high level quality And also, chances are, there's going to be a lot of people using the free stuff,", 'start': 174.793, 'duration': 7.006}, {'end': 183.1, 'text': "so it won't be 100% unique.", 'start': 181.799, 'duration': 1.301}, {'end': 184.902, 'text': "If that's something that's important to you.", 'start': 183.62, 'duration': 1.282}], 'summary': 'Various sites offer vector illustrations; free ones lack quality and uniqueness.', 'duration': 25.816, 'max_score': 159.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg159086.jpg'}, {'end': 299.225, 'src': 'embed', 'start': 271.824, 'weight': 0, 'content': [{'end': 281.599, 'text': 'And my idea behind choosing this one is that I could basically take this background right here,', 'start': 271.824, 'duration': 9.775}, {'end': 287.901, 'text': 'make that the background of the entire webpage and then take this graphic and fill it out all the way.', 'start': 281.599, 'duration': 6.302}, {'end': 292.563, 'text': "And so I'm gonna show you exactly also how to apply the parallax as well.", 'start': 288.521, 'duration': 4.042}, {'end': 296.564, 'text': "So again, you don't have to buy this, obviously to follow along.", 'start': 293.103, 'duration': 3.461}, {'end': 299.225, 'text': 'but if you wanna follow along, just to see and just watch.', 'start': 296.564, 'duration': 2.661}], 'summary': 'Using the chosen background, fill out the graphic and apply parallax effect on the webpage.', 'duration': 27.401, 'max_score': 271.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg271824.jpg'}], 'start': 93.16, 'title': 'Ui design preparation', 'summary': 'Covers preparing a purchased vector illustration in adobe illustrator for use as a webpage background, applying parallax effect, and mentions a ui design bootcamp course on scrimba.com.', 'chapters': [{'end': 346.77, 'start': 93.16, 'title': 'Ui design preparation in adobe illustrator', 'summary': 'Discusses preparing a purchased vector illustration from graphicriver.net in adobe illustrator, adjusting it for use as a webpage background, and applying parallax effect, with a mention of a ui design bootcamp course on scrimba.com.', 'duration': 253.61, 'highlights': ['Purchased a vector illustration from graphicriver.net for $12 and planned to use it as a webpage background, demonstrating the application of parallax effect. The specific vector illustration was purchased for $12 and is intended to be used as a webpage background with a demonstration of applying the parallax effect.', 'Advertised a UI design bootcamp course on scrimba.com with over 100 lessons and interactive challenges for a low monthly fee. Promotion of a UI design bootcamp course on scrimba.com, featuring over 100 lessons and interactive challenges for a low monthly fee.', 'Highlighted the importance of purchasing vector illustrations for higher quality and uniqueness compared to free options. Emphasized the importance of purchasing vector illustrations for higher quality and uniqueness compared to free options.']}], 'duration': 253.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg93160.jpg', 'highlights': ['Purchased a vector illustration from graphicriver.net for $12 and planned to use it as a webpage background, demonstrating the application of parallax effect.', 'Advertised a UI design bootcamp course on scrimba.com with over 100 lessons and interactive challenges for a low monthly fee.', 'Highlighted the importance of purchasing vector illustrations for higher quality and uniqueness compared to free options.']}, {'end': 617.62, 'segs': [{'end': 396.623, 'src': 'embed', 'start': 347.511, 'weight': 1, 'content': [{'end': 355.273, 'text': 'Now next up, the way I envision this is to take everything and scale it out to the sides,', 'start': 347.511, 'duration': 7.762}, {'end': 358.754, 'text': 'just to where it kind of cuts off some of the trees on the left and the right.', 'start': 355.273, 'duration': 3.481}, {'end': 366.88, 'text': "So when we export this from, or we save this from Adobe Illustrator, it's going to automatically cut these off.", 'start': 359.634, 'duration': 7.246}, {'end': 369.602, 'text': "It won't include that in the SVG.", 'start': 366.92, 'duration': 2.682}, {'end': 374.667, 'text': "Now, you can see this little, there's a little element here that's barely noticeable.", 'start': 370.083, 'duration': 4.584}, {'end': 380.291, 'text': "So I'm going to have to go to my artboard tool here and just push that up a little bit.", 'start': 374.687, 'duration': 5.604}, {'end': 385.155, 'text': 'And then the next part, which is a little bit time consuming, is I need to select.', 'start': 380.932, 'duration': 4.223}, {'end': 394.242, 'text': 'all of the various shapes in preparation for the parallax effect.', 'start': 386.096, 'duration': 8.146}, {'end': 396.623, 'text': 'And so nothing is grouped up here.', 'start': 394.582, 'duration': 2.041}], 'summary': 'Scaling out elements, adjusting for export, and preparing for parallax effect in adobe illustrator.', 'duration': 49.112, 'max_score': 347.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg347511.jpg'}, {'end': 449.736, 'src': 'embed', 'start': 418.309, 'weight': 0, 'content': [{'end': 423.931, 'text': 'because all of these layers get exported in SVG code as ID names.', 'start': 418.309, 'duration': 5.622}, {'end': 428.173, 'text': 'So the layer name is the ID name, the ID attribute in HTML.', 'start': 424.252, 'duration': 3.921}, {'end': 429.554, 'text': 'So this is going to be mountain.', 'start': 428.213, 'duration': 1.341}, {'end': 432.275, 'text': 'All right.', 'start': 431.995, 'duration': 0.28}, {'end': 435.116, 'text': 'Next up will be these trees.', 'start': 432.675, 'duration': 2.441}, {'end': 440.158, 'text': 'So like this tree, maybe that tree.', 'start': 437.937, 'duration': 2.221}, {'end': 444.235, 'text': "Actually, no, that doesn't make sense.", 'start': 442.975, 'duration': 1.26}, {'end': 446.236, 'text': 'Let me just take these trees.', 'start': 444.255, 'duration': 1.981}, {'end': 449.736, 'text': "We'll group them and we'll call these tree one.", 'start': 446.316, 'duration': 3.42}], 'summary': 'Layers in svg code exported with id names, e.g. mountain, tree one.', 'duration': 31.427, 'max_score': 418.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg418309.jpg'}, {'end': 617.62, 'src': 'heatmap', 'start': 565.775, 'weight': 4, 'content': [{'end': 571.92, 'text': "We're going to create an images folder and we'll just call this illustration and we'll change this to SVG.", 'start': 565.775, 'duration': 6.145}, {'end': 574.922, 'text': 'Save and okay.', 'start': 572.52, 'duration': 2.402}, {'end': 575.483, 'text': 'All right.', 'start': 575.243, 'duration': 0.24}, {'end': 579.526, 'text': "Now we're actually not going to use the SVG code or image.", 'start': 576.544, 'duration': 2.982}, {'end': 582.869, 'text': "We're going to copy the code from here.", 'start': 580.207, 'duration': 2.662}, {'end': 585.551, 'text': "Of course, there's a lot of cleanup you can do with this.", 'start': 583.069, 'duration': 2.482}, {'end': 591.926, 'text': "But for now, before we get to that step, I'll just quickly outline.", 'start': 587.725, 'duration': 4.201}, {'end': 595.567, 'text': 'I just have boilerplate HTML and an index.html file.', 'start': 591.946, 'duration': 3.621}, {'end': 598.147, 'text': "We're linking up our CSS main.css.", 'start': 595.707, 'duration': 2.44}, {'end': 604.268, 'text': "We're using SAS here for this, although I don't even know if I'm using SAS at all features, so you don't have to necessarily.", 'start': 598.227, 'duration': 6.041}, {'end': 606.149, 'text': "And that's basically it.", 'start': 604.928, 'duration': 1.221}, {'end': 610.109, 'text': "So I'm going to right click, open with live server, which is a live server extension.", 'start': 606.209, 'duration': 3.9}, {'end': 612.57, 'text': 'And there we go.', 'start': 611.47, 'duration': 1.1}, {'end': 617.62, 'text': "And let's get started with some initial markup here.", 'start': 614.478, 'duration': 3.142}], 'summary': 'Creating an images folder, converting to svg, using sas, and initializing live server.', 'duration': 25.674, 'max_score': 565.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg565775.jpg'}], 'start': 347.511, 'title': 'Illustration creation and svg export', 'summary': 'Covers scaling elements for svg export, preparing for parallax effect, grouping elements as svg code, creating an illustration with grouped elements, and using live server extension for previewing the markup.', 'chapters': [{'end': 449.736, 'start': 347.511, 'title': 'Design scaling and svg export', 'summary': 'Involves scaling out elements for svg export, adjusting elements for parallax effect, and grouping elements for svg code. it includes the process of preparing elements for parallax effect and grouping them for svg export.', 'duration': 102.225, 'highlights': ['The process involves scaling out elements to cut off some trees for SVG export, ensuring that those elements are not included in the SVG file.', 'The next step is adjusting elements and selecting various shapes in preparation for the parallax effect, which is a little time-consuming.', 'The chapter also details the process of selecting and grouping various elements such as the mountain range and trees for SVG export, with each layer getting exported as an ID name in the SVG code.']}, {'end': 617.62, 'start': 449.757, 'title': 'Illustration creation and export process', 'summary': 'Details the process of creating an illustration, including grouping elements into trees, hills, and lakes, and exporting it as an svg file, with a mention of using a live server extension for previewing the markup.', 'duration': 167.863, 'highlights': ['The process involves grouping elements into trees, hills, and lakes before exporting the illustration as an SVG file.', 'The speaker uses a live server extension for previewing the markup.', 'The speaker mentions creating an images folder and saving the illustration as an SVG file in the current project folder.', 'The transcript also mentions using SAS for styling, although the speaker is uncertain about using all its features.']}], 'duration': 270.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg347511.jpg', 'highlights': ['The process involves grouping elements into trees, hills, and lakes before exporting the illustration as an SVG file.', 'The process involves scaling out elements to cut off some trees for SVG export, ensuring that those elements are not included in the SVG file.', 'The chapter also details the process of selecting and grouping various elements such as the mountain range and trees for SVG export, with each layer getting exported as an ID name in the SVG code.', 'The next step is adjusting elements and selecting various shapes in preparation for the parallax effect, which is a little time-consuming.', 'The speaker uses a live server extension for previewing the markup.']}, {'end': 1053.868, 'segs': [{'end': 671.443, 'src': 'heatmap', 'start': 618.581, 'weight': 0, 'content': [{'end': 624.684, 'text': "So what we're gonna have is an overall container that will hold everything.", 'start': 618.581, 'duration': 6.103}, {'end': 628.206, 'text': "So I'm using M abbreviations for that.", 'start': 624.704, 'duration': 3.502}, {'end': 630.408, 'text': 'H1 is gonna be go camping.', 'start': 628.827, 'duration': 1.581}, {'end': 638.877, 'text': 'Paragraph is gonna be, do something fun with your family.', 'start': 632.932, 'duration': 5.945}, {'end': 640.398, 'text': "You're boring.", 'start': 639.677, 'duration': 0.721}, {'end': 644.081, 'text': "Alright, and then we take our SVG and we're gonna put it in here.", 'start': 641.499, 'duration': 2.582}, {'end': 648.584, 'text': "Now the reason I'm not gonna use an image tag for the SVG is because I do wanna animate specific elements.", 'start': 644.101, 'duration': 4.483}, {'end': 655.47, 'text': "within. there's a lot of it here, just going all the way to the very bottom.", 'start': 650.866, 'duration': 4.604}, {'end': 662.656, 'text': "we're going to go and paste that in and we're going to hit save and we're going to see how utterly ugly everything is.", 'start': 655.47, 'duration': 7.186}, {'end': 666.499, 'text': 'but as you can see, it almost you know already spans out all right.', 'start': 662.656, 'duration': 3.843}, {'end': 671.443, 'text': 'so now what we want to do is we want to get that background color.', 'start': 666.499, 'duration': 4.944}], 'summary': 'Creating a web container with specific elements and svg for animation.', 'duration': 30.003, 'max_score': 618.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg618581.jpg'}, {'end': 847.503, 'src': 'embed', 'start': 813.308, 'weight': 1, 'content': [{'end': 821.137, 'text': "All right, so now what we wanna do is we're going to deal with our SVG graphic itself.", 'start': 813.308, 'duration': 7.829}, {'end': 824.08, 'text': 'So our SVG graphic currently.', 'start': 822.098, 'duration': 1.982}, {'end': 832.593, 'text': "Actually I don't even have to do a width 100%, because I did have that by default.", 'start': 827.97, 'duration': 4.623}, {'end': 833.674, 'text': 'but we want to get this.', 'start': 832.593, 'duration': 1.081}, {'end': 836.696, 'text': 'make sure that it is positioned to the bottom.', 'start': 833.674, 'duration': 3.022}, {'end': 847.503, 'text': "So let's take our SVG and we're going to say position absolute, bottom is going to be zero, left will be zero.", 'start': 837.436, 'duration': 10.067}], 'summary': 'Adjust svg graphic position to bottom with absolute positioning.', 'duration': 34.195, 'max_score': 813.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg813308.jpg'}, {'end': 911.531, 'src': 'embed', 'start': 876.186, 'weight': 5, 'content': [{'end': 882.428, 'text': 'Oh, I forgot to name my group for my clouds.', 'start': 876.186, 'duration': 6.242}, {'end': 884.691, 'text': "That's very frustrating.", 'start': 883.53, 'duration': 1.161}, {'end': 888.534, 'text': "All right, well, you know what we can do? That's okay, we can go back.", 'start': 885.111, 'duration': 3.423}, {'end': 894.919, 'text': 'Did I close that out? Oh no, I think I did.', 'start': 890.355, 'duration': 4.564}, {'end': 897.748, 'text': "Oh, I'm an idiot.", 'start': 897.068, 'duration': 0.68}, {'end': 901.609, 'text': 'I realized I can just open up the freaking SVG that I used.', 'start': 897.868, 'duration': 3.741}, {'end': 906.45, 'text': 'So code, nature, images.', 'start': 903.069, 'duration': 3.381}, {'end': 910.251, 'text': "Oh, I didn't put it in images? Okay, I put it right there.", 'start': 907.21, 'duration': 3.041}, {'end': 911.531, 'text': 'All right, there we go.', 'start': 910.271, 'duration': 1.26}], 'summary': 'Struggling to name cloud group, opening svg for code, nature, images.', 'duration': 35.345, 'max_score': 876.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg876186.jpg'}, {'end': 1024.155, 'src': 'embed', 'start': 971.772, 'weight': 3, 'content': [{'end': 977.654, 'text': 'Now we can reference in CSS cloud one animation.', 'start': 971.772, 'duration': 5.882}, {'end': 987.137, 'text': "we'll do cloud anim, for this one will be for like seven seconds alternate, reverse, so it goes back and forth and then also infinite,", 'start': 977.654, 'duration': 9.483}, {'end': 988.178, 'text': "and we'll just say linear.", 'start': 987.137, 'duration': 1.041}, {'end': 994.743, 'text': 'cloud two will be the same thing, except in order to give it a little bit different.', 'start': 989.318, 'duration': 5.425}, {'end': 1000.147, 'text': "um, animation duration, we make this 10 seconds, so it'll look like they're independent of each other,", 'start': 994.743, 'duration': 5.404}, {'end': 1002.349, 'text': "and then we'll go ahead and create the keyframe animation.", 'start': 1000.147, 'duration': 2.202}, {'end': 1016.214, 'text': "so keyframes up cloud anim from nope, we're gonna go yeah, from transform, translate X.", 'start': 1002.349, 'duration': 13.865}, {'end': 1018.534, 'text': 'so we want to move it on the x-axis 0.', 'start': 1016.214, 'duration': 2.32}, {'end': 1024.155, 'text': "so we're gonna start from its original point and then copy that, paste that,", 'start': 1018.534, 'duration': 5.621}], 'summary': 'Creating two cloud animations: one for 7 seconds and the other for 10 seconds, moving back and forth on the x-axis.', 'duration': 52.383, 'max_score': 971.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg971772.jpg'}], 'start': 618.581, 'title': 'Creating responsive svg design and cloud animation troubleshooting', 'summary': 'Covers creating a responsive svg design, utilizing m abbreviations for container, setting element styles, and applying animations to achieve seamless design and visual hierarchy. it also addresses troubleshooting and adjusting cloud animations in an svg file, involving graphic selection, class addition, animation duration setting, and keyframe animation creation.', 'chapters': [{'end': 875.566, 'start': 618.581, 'title': 'Creating responsive svg design', 'summary': 'Explains the process of creating a responsive svg design for a web page, including using m abbreviations for container, setting styles for elements and applying animations, with a focus on achieving seamless design and visual hierarchy.', 'duration': 256.985, 'highlights': ['Using M abbreviations for container and setting styles for H1 and paragraph elements. The speaker mentions using M abbreviations for the overall container and setting styles for H1 and paragraph elements to organize the content.', 'Setting specific styles for SVG elements and using position properties for seamless design. The speaker discusses setting specific styles for the SVG elements, including using position properties to achieve a seamless design.', 'Applying animations to the SVG elements for visual enhancement. The chapter emphasizes the use of animations for the SVG elements to enhance the visual appeal of the web page design.']}, {'end': 1053.868, 'start': 876.186, 'title': 'Cloud animation troubleshooting', 'summary': 'Details the process of troubleshooting and adjusting cloud animations in an svg file, including selecting graphics, adding classes, setting animation durations, and creating keyframe animations.', 'duration': 177.682, 'highlights': ['The chapter highlights the process of troubleshooting and adjusting cloud animations in an SVG file, including selecting graphics, adding classes, setting animation durations, and creating keyframe animations.', 'The narrator encounters frustration and acknowledges making mistakes while troubleshooting the cloud animations in the SVG file.', 'The process involves selecting cloud graphics, finding their location in layers, assigning classes, setting animation durations, and creating keyframe animations with specific transform properties.', 'The adjustments made to the cloud animations include setting different animation durations to make them appear independent of each other and ensuring the animations are slow and not too fast.']}], 'duration': 435.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg618581.jpg', 'highlights': ['Applying animations to the SVG elements for visual enhancement.', 'Setting specific styles for SVG elements and using position properties for seamless design.', 'Using M abbreviations for container and setting styles for H1 and paragraph elements.', 'The process involves selecting cloud graphics, finding their location in layers, assigning classes, setting animation durations, and creating keyframe animations with specific transform properties.', 'The adjustments made to the cloud animations include setting different animation durations to make them appear independent of each other and ensuring the animations are slow and not too fast.', 'The narrator encounters frustration and acknowledges making mistakes while troubleshooting the cloud animations in the SVG file.']}, {'end': 1436.059, 'segs': [{'end': 1082.835, 'src': 'embed', 'start': 1054.249, 'weight': 0, 'content': [{'end': 1058.131, 'text': "Now let's get to the parallax portion, which is the fun part, which really makes this all come together.", 'start': 1054.249, 'duration': 3.882}, {'end': 1068.198, 'text': "Instead of doing this the vanilla JavaScript way, we're going to take a shortcut, and we're going to go to relics.js.", 'start': 1060.373, 'duration': 7.825}, {'end': 1070.82, 'text': 'All right, so.', 'start': 1068.218, 'duration': 2.602}, {'end': 1076.952, 'text': "I've actually covered this, I think, I forget how long ago, maybe like two years ago.", 'start': 1072.97, 'duration': 3.982}, {'end': 1080.193, 'text': 'So you can install with NPM, blah, blah, blah.', 'start': 1078.092, 'duration': 2.101}, {'end': 1082.835, 'text': "There's also a CDN.", 'start': 1081.654, 'duration': 1.181}], 'summary': 'Introduction to parallax portion with mention of previous coverage and installation options.', 'duration': 28.586, 'max_score': 1054.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg1054249.jpg'}, {'end': 1148.393, 'src': 'embed', 'start': 1116.651, 'weight': 4, 'content': [{'end': 1128.6, 'text': 'so any class name relics right here will have these properties here, and so we can also define on them or play, apply to them by certain.', 'start': 1116.651, 'duration': 11.949}, {'end': 1135.244, 'text': 'um, let me see here the properties that will control the parallax effect.', 'start': 1128.6, 'duration': 6.644}, {'end': 1145.171, 'text': "so that is data relics, speed right here, and you could put all the way up to 10, all the way to negative 10, and you'll see how,", 'start': 1135.244, 'duration': 9.927}, {'end': 1148.393, 'text': 'um this ends up affecting things.', 'start': 1145.171, 'duration': 3.222}], 'summary': 'Properties like data relics speed can be set from -10 to 10 to control the parallax effect.', 'duration': 31.742, 'max_score': 1116.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg1116651.jpg'}, {'end': 1423.758, 'src': 'embed', 'start': 1366.57, 'weight': 5, 'content': [{'end': 1370.993, 'text': "Tree four, let's just try experimenting and not having them all be the same.", 'start': 1366.57, 'duration': 4.423}, {'end': 1374.316, 'text': "Oh no, now they're flying up.", 'start': 1372.955, 'duration': 1.361}, {'end': 1376.945, 'text': "don't want that.", 'start': 1375.404, 'duration': 1.541}, {'end': 1379.186, 'text': 'perhaps we could try negative five.', 'start': 1376.945, 'duration': 2.241}, {'end': 1387.672, 'text': 'I just want to create a little bit more separation between the individual layers.', 'start': 1379.186, 'duration': 8.486}, {'end': 1388.993, 'text': "I think that's pretty good enough.", 'start': 1387.672, 'duration': 1.321}, {'end': 1390.614, 'text': 'I mean, obviously you get the point.', 'start': 1388.993, 'duration': 1.621}, {'end': 1393.235, 'text': "it's a matter of really experimenting and fine-tuning.", 'start': 1390.614, 'duration': 2.621}, {'end': 1397.178, 'text': 'uh, exactly what you know.', 'start': 1393.235, 'duration': 3.943}, {'end': 1402.221, 'text': 'how you want the parallax to behave.', 'start': 1397.178, 'duration': 5.043}, {'end': 1407.634, 'text': "It's not perfect, but you get the point at this section anyhow.", 'start': 1404.113, 'duration': 3.521}, {'end': 1409.334, 'text': 'Now, is this responsive?', 'start': 1408.154, 'duration': 1.18}, {'end': 1413.175, 'text': 'Yeah, it is responsive, although at a smaller viewport.', 'start': 1409.574, 'duration': 3.601}, {'end': 1422.037, 'text': "I would probably opt to expand this image or the SVG graphics so we can get it up higher, so it's not sitting so low down there.", 'start': 1413.175, 'duration': 8.862}, {'end': 1423.758, 'text': 'That way it can take up more.', 'start': 1422.517, 'duration': 1.241}], 'summary': 'Experimenting with different parallax settings to create more separation between layers, aiming for responsiveness and higher visibility at smaller viewports.', 'duration': 57.188, 'max_score': 1366.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg1366570.jpg'}], 'start': 1054.249, 'title': 'Parallax effect implementation', 'summary': 'Covers implementing parallax effect with relics.js, including using npm to install the library, accessing the library via cdn, and adding the script tag to the html document. it also explains how to implement parallax effect in a web page using data relics with different speeds, emphasizing the need for experimentation and fine-tuning.', 'chapters': [{'end': 1116.651, 'start': 1054.249, 'title': 'Implementing parallax effect with relics.js', 'summary': 'Covers implementing parallax effect with relics.js, including using npm to install the library, accessing the library via cdn, and adding the script tag to the html document.', 'duration': 62.402, 'highlights': ['The chapter covers implementing parallax effect with relics.js, including using NPM to install the library, accessing the library via CDN, and adding the script tag to the HTML document.', 'Using NPM, the library can be installed for easy integration with the project, offering a convenient method for adding parallax effect.', 'Accessing the library via CDN provides an alternative approach to incorporating the parallax effect into the web project.', 'Adding the script tag to the HTML document allows for easy integration of the relics.js library, simplifying the process of implementing the parallax effect.']}, {'end': 1436.059, 'start': 1116.651, 'title': 'Parallax animation tutorial', 'summary': 'Explains how to implement parallax effect in a web page using data relics with different speeds, emphasizing the need for experimentation and fine-tuning.', 'duration': 319.408, 'highlights': ['Implementing parallax effect with data relics of different speeds The tutorial demonstrates implementing parallax effect with data relics having speeds ranging from -5 to 4, emphasizing the need for experimentation and fine-tuning.', 'Emphasis on experimentation and fine-tuning for parallax behavior The speaker stresses the importance of experimentation and fine-tuning to achieve the desired parallax behavior, highlighting the need for individual layer separation and responsive adjustments.', 'Adjusting parallax effect for responsive design The tutorial mentions the need for responsive adjustments, suggesting potential expansion or media queries to optimize the parallax effect for smaller viewports.']}], 'duration': 381.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7C6l2HG0fJg/pics/7C6l2HG0fJg1054249.jpg', 'highlights': ['The chapter covers implementing parallax effect with relics.js, including using NPM to install the library, accessing the library via CDN, and adding the script tag to the HTML document.', 'Using NPM, the library can be installed for easy integration with the project, offering a convenient method for adding parallax effect.', 'Accessing the library via CDN provides an alternative approach to incorporating the parallax effect into the web project.', 'Adding the script tag to the HTML document allows for easy integration of the relics.js library, simplifying the process of implementing the parallax effect.', 'Implementing parallax effect with data relics of different speeds The tutorial demonstrates implementing parallax effect with data relics having speeds ranging from -5 to 4, emphasizing the need for experimentation and fine-tuning.', 'Emphasis on experimentation and fine-tuning for parallax behavior The speaker stresses the importance of experimentation and fine-tuning to achieve the desired parallax behavior, highlighting the need for individual layer separation and responsive adjustments.', 'Adjusting parallax effect for responsive design The tutorial mentions the need for responsive adjustments, suggesting potential expansion or media queries to optimize the parallax effect for smaller viewports.']}], 'highlights': ['UI designers can quickly convert high-quality vector graphics into vibrant user interface illustrations with parallax effect using asset sites like graphicriver.net, where illustrations can be purchased for a few bucks.', 'Purchased a vector illustration from graphicriver.net for $12 and planned to use it as a webpage background, demonstrating the application of parallax effect.', 'The process involves grouping elements into trees, hills, and lakes before exporting the illustration as an SVG file.', 'Applying animations to the SVG elements for visual enhancement.', 'The chapter covers implementing parallax effect with relics.js, including using NPM to install the library, accessing the library via CDN, and adding the script tag to the HTML document.']}