title
Scrolling Activated CSS3 Animation Tutorial (1 of 2)

description
http://goo.gl/BBse40 - Design + Code a Professional Android App from Scratch * **Join DesignCourse Premium for 1-on-1 Design Training with Me:** http://goo.gl/cSGu9C Project Files: http://www.designcourse.com/videos/scrolling-based-css3-animation-tutorial-1-of-2/64 Activating CSS animations based on scrolling is a relatively new front-end development technique. We'll take a look at a basic example using jQuery to help you get your feet wet in this two part video tutorial. Follow us: Facebook: http://www.facebook.com/designcourses Twitter: http://twitter.com/designcoursecom Google+: http://plus.google.com/+DesignCourse Dribbble: http://dribbble.com/designcourse - - - - - - - - - - - - - - - - - - - - - - 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': 'Scrolling Activated CSS3 Animation Tutorial (1 of 2)', 'heatmap': [{'end': 620.343, 'start': 592.468, 'weight': 0.777}, {'end': 952.002, 'start': 931.446, 'weight': 0.811}, {'end': 970.007, 'start': 956.523, 'weight': 1}], 'summary': 'Learn scroll-based css3 animations over two days, access project files, and subscribe for free. explore using 12-grid system in photoshop to create responsive layouts and create vector graphics. create transparent png, organize files, and rapidly produce html and css files.', 'chapters': [{'end': 91.724, 'segs': [{'end': 40.819, 'src': 'embed', 'start': 12.602, 'weight': 0, 'content': [{'end': 14.684, 'text': 'Hello, Gary Simon here of designcourse.com.', 'start': 12.602, 'duration': 2.082}, {'end': 20.289, 'text': "Today we're going to take a look at scroll activated or scroll based CSS3 animations.", 'start': 14.704, 'duration': 5.585}, {'end': 23.653, 'text': "So here's an example of what I'm talking about.", 'start': 20.81, 'duration': 2.843}, {'end': 36.099, 'text': "All right, so that example there isn't what we're going to be covering.", 'start': 33.578, 'duration': 2.521}, {'end': 38.059, 'text': "We're going to be covering something else that's a little bit different.", 'start': 36.119, 'duration': 1.94}, {'end': 40.819, 'text': 'This is going to span over two days,', 'start': 38.619, 'duration': 2.2}], 'summary': 'Covering scroll-based css3 animations over two days.', 'duration': 28.217, 'max_score': 12.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E12602.jpg'}, {'end': 80.937, 'src': 'embed', 'start': 55.062, 'weight': 1, 'content': [{'end': 60.403, 'text': "they're available for free in the description below here in YouTube, and I will take you to a link on designcourse.com,", 'start': 55.062, 'duration': 5.341}, {'end': 61.844, 'text': 'where you can download the files.', 'start': 60.403, 'duration': 1.441}, {'end': 62.664, 'text': 'You just have to register.', 'start': 61.864, 'duration': 0.8}, {'end': 62.964, 'text': "It's free.", 'start': 62.704, 'duration': 0.26}, {'end': 67.207, 'text': "And then of course, as always, subscribe here on YouTube if you haven't.", 'start': 63.664, 'duration': 3.543}, {'end': 68.828, 'text': "All right, so let's get started.", 'start': 67.367, 'duration': 1.461}, {'end': 72.19, 'text': 'Okay, so make sure you download the project file.', 'start': 69.628, 'duration': 2.562}, {'end': 77.014, 'text': "So if you are at designcourse.com for this specific video or you're on YouTube,", 'start': 72.23, 'duration': 4.784}, {'end': 80.937, 'text': 'click on the link to go to designcourse.com and then click download project files.', 'start': 77.014, 'duration': 3.923}], 'summary': 'Access free project files on designcourse.com after registering, and subscribe on youtube.', 'duration': 25.875, 'max_score': 55.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E55062.jpg'}], 'start': 12.602, 'title': 'Scroll-based css3 animations', 'summary': 'Covers the process of designing and setting up scroll-based css3 animations over two days, including accessing project files and subscribing for free.', 'chapters': [{'end': 91.724, 'start': 12.602, 'title': 'Scroll-based css3 animations', 'summary': 'Covers the process of designing and setting up scroll-based css3 animations over two days, including accessing project files and subscribing for free.', 'duration': 79.122, 'highlights': ['The chapter spans over two days, focusing on designing and setting up scroll-based CSS3 animations.', 'Access to the project files is available for free on designcourse.com, requiring registration.', 'Subscription on YouTube is encouraged for accessing additional content and updates.']}], 'duration': 79.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E12602.jpg', 'highlights': ['The chapter spans over two days, focusing on designing and setting up scroll-based CSS3 animations.', 'Access to the project files is available for free on designcourse.com, requiring registration.', 'Subscription on YouTube is encouraged for accessing additional content and updates.']}, {'end': 602.051, 'segs': [{'end': 146.77, 'src': 'embed', 'start': 92.665, 'weight': 0, 'content': [{'end': 95.646, 'text': 'yeah, project, sorry, the grid.psd.', 'start': 92.665, 'duration': 2.981}, {'end': 103.55, 'text': 'alright, so basically never messed around with responsive design using a grid system.', 'start': 95.646, 'duration': 7.904}, {'end': 117.156, 'text': "well, basically right here we have 12 grids and it's basically a way to help you manage and organize your layout mockup here in Photoshop and be able to easily translate it once we start doing the HTML and CSS.", 'start': 103.55, 'duration': 13.606}, {'end': 117.776, 'text': 'so again,', 'start': 117.156, 'duration': 0.62}, {'end': 134.924, 'text': 'the purpose here is to basically create a fake kind of design for the purposes of doing a cool sort of CSS3 animation activated when you scroll down on a site.', 'start': 117.776, 'duration': 17.148}, {'end': 140.507, 'text': "So this is something that we're seeing that's a little bit more increasingly popular, I would say, that front end developers are doing.", 'start': 135.044, 'duration': 5.463}, {'end': 141.527, 'text': 'And it looks pretty cool.', 'start': 140.667, 'duration': 0.86}, {'end': 143.548, 'text': "So let's go ahead.", 'start': 141.587, 'duration': 1.961}, {'end': 144.409, 'text': "I'm going to hide the grid.", 'start': 143.568, 'duration': 0.841}, {'end': 146.77, 'text': 'and hide that as well.', 'start': 145.369, 'duration': 1.401}], 'summary': 'Using a 12-grid system to create a design for css3 animation, increasingly popular among front-end developers.', 'duration': 54.105, 'max_score': 92.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E92665.jpg'}, {'end': 248.219, 'src': 'embed', 'start': 203.049, 'weight': 2, 'content': [{'end': 207.712, 'text': 'hold Shift and Alt and scale that sucker up and just try to get it in the middle here.', 'start': 203.049, 'duration': 4.663}, {'end': 212.475, 'text': "All right, so basically I'm using Source Sans Pro for this.", 'start': 208.373, 'duration': 4.102}, {'end': 213.195, 'text': "It's a free font.", 'start': 212.535, 'duration': 0.66}, {'end': 214.376, 'text': 'You can find it on Google.', 'start': 213.215, 'duration': 1.161}, {'end': 216.998, 'text': "And I'm using the lightweight all right?", 'start': 214.936, 'duration': 2.062}, {'end': 227.264, 'text': "Okay, so now what we want to do is focus on an area down here where we're going to basically animate two images into place, okay?", 'start': 218.118, 'duration': 9.146}, {'end': 231.708, 'text': 'And so one will be a cell phone, the other one will be a monitor.', 'start': 228.726, 'duration': 2.982}, {'end': 233.669, 'text': "And you know what? We're going to make three actually instead.", 'start': 231.808, 'duration': 1.861}, {'end': 235.251, 'text': "And one's going to be like a tablet.", 'start': 233.709, 'duration': 1.542}, {'end': 239.113, 'text': 'And these are going to be like vector slash abstract.', 'start': 236.051, 'duration': 3.062}, {'end': 243.716, 'text': "They're not going to be actual, you know, photorealistic things.", 'start': 239.133, 'duration': 4.583}, {'end': 248.219, 'text': "So what we're going to do is just take out, left-click, drag, select the rounded rectangle tool.", 'start': 243.776, 'duration': 4.443}], 'summary': 'Using source sans pro, a free font, to animate three vector images - cell phone, monitor, and tablet.', 'duration': 45.17, 'max_score': 203.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E203049.jpg'}, {'end': 587.027, 'src': 'embed', 'start': 552.275, 'weight': 5, 'content': [{'end': 554.897, 'text': "So we'll take the direct selection tool on this layer.", 'start': 552.275, 'duration': 2.622}, {'end': 558.5, 'text': 'Maybe right around there.', 'start': 554.917, 'duration': 3.583}, {'end': 562.324, 'text': 'Hold shift and drag that in.', 'start': 558.52, 'duration': 3.804}, {'end': 564.766, 'text': 'Use your arrow keys if you need to align it better.', 'start': 562.404, 'duration': 2.362}, {'end': 574.924, 'text': "Alright, so now we'll take this tablet and maybe position it right around here.", 'start': 568.308, 'duration': 6.616}, {'end': 577.504, 'text': 'All right.', 'start': 577.244, 'duration': 0.26}, {'end': 587.027, 'text': 'so the idea is, once we scroll down here, these things are going to be kind of off here to the side and as well as the phone will be off over here.', 'start': 577.504, 'duration': 9.523}], 'summary': 'Position tablet and phone off to the side, align using direct selection tool.', 'duration': 34.752, 'max_score': 552.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E552275.jpg'}], 'start': 92.665, 'title': 'Designing with grid system & vector graphics', 'summary': 'Explores using a 12-grid system in photoshop to create responsive layouts for html and css, and creating vector graphics of devices with specific dimensions and color codes for design projects.', 'chapters': [{'end': 227.264, 'start': 92.665, 'title': 'Using grid system for responsive design', 'summary': 'Discusses using a 12-grid system in photoshop to create a layout mockup for translating into html and css, with a focus on creating css3 animation activated by scrolling, a growing trend among front-end developers.', 'duration': 134.599, 'highlights': ['The 12-grid system in Photoshop is used to manage and organize layout mockups for easy translation into HTML and CSS, facilitating responsive design.', 'The chapter highlights the trend of front-end developers creating CSS3 animation activated by scrolling, indicating its growing popularity in the industry.', 'The discussion includes practical steps such as creating a temporary rectangle and adding text using the Source Sans Pro font for the CSS animation design.', 'The use of Source Sans Pro, a free font available on Google, and focusing on lightweight design are emphasized for the CSS animation layout.', "The chapter emphasizes the importance of having content 'above the fold' for scroll-based activated CSS3 animation design."]}, {'end': 602.051, 'start': 228.726, 'title': 'Creating vector graphics for devices', 'summary': 'Covers creating three vector graphics of a phone, monitor, and tablet, with specific dimensions and color codes, to be animated into position in a design project.', 'duration': 373.325, 'highlights': ['Creating three vector graphics of a phone, monitor, and tablet, with specific dimensions and color codes, to be animated into position in a design project.', "Demonstrating the process of duplicating and scaling the graphics, such as scaling down the phone and making adjustments to the tablet's dimensions.", 'Emphasizing the importance of positioning and aligning the graphics accurately for the design project.', 'Utilizing keyboard shortcuts and tools like the rounded rectangle and direct selection tool for efficient graphic creation and editing.']}], 'duration': 509.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E92665.jpg', 'highlights': ['The 12-grid system in Photoshop facilitates responsive design for HTML and CSS.', 'Front-end developers are increasingly using CSS3 animation activated by scrolling.', 'Practical steps for creating CSS animation design include using Source Sans Pro font.', "Emphasis on lightweight design and content 'above the fold' for CSS animation layout.", 'Creating vector graphics of devices with specific dimensions and color codes for design projects.', 'Importance of accurate positioning and alignment of vector graphics for the design project.', 'Efficient graphic creation and editing using keyboard shortcuts and tools like the rounded rectangle.']}, {'end': 1110.3, 'segs': [{'end': 654.957, 'src': 'embed', 'start': 629.127, 'weight': 0, 'content': [{'end': 634.889, 'text': "24-bit right here, all right, so it's only 2.3 kb, so it's pretty light.", 'start': 629.127, 'duration': 5.762}, {'end': 638.131, 'text': "and then we'll save this and i'm going to go to a different.", 'start': 634.889, 'duration': 3.242}, {'end': 644.339, 'text': "i'm going to pause real quick and go to a different folder And inside my project folder I'm going to create some files or folders rather.", 'start': 638.131, 'duration': 6.208}, {'end': 645.961, 'text': "One's going to be HTML.", 'start': 644.359, 'duration': 1.602}, {'end': 652.613, 'text': "We're going to go inside of it, create a new folder, images, enter into that, and we'll call this foam.", 'start': 646.602, 'duration': 6.011}, {'end': 654.957, 'text': 'All right.', 'start': 654.577, 'duration': 0.38}], 'summary': 'Transcript: creating 2.3 kb html folder with images and foam.', 'duration': 25.83, 'max_score': 629.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E629127.jpg'}, {'end': 689.649, 'src': 'embed', 'start': 665.387, 'weight': 2, 'content': [{'end': 673.914, 'text': "We'll take our tablet, control E or command E, control A and then control C to copy, control N, hit enter, control V to paste.", 'start': 665.387, 'duration': 8.527}, {'end': 677.778, 'text': "I know I'm going really fast and save that again.", 'start': 673.934, 'duration': 3.844}, {'end': 678.859, 'text': "And we'll call this tablet.", 'start': 677.798, 'duration': 1.061}, {'end': 681.644, 'text': "And I'm going actually really fast.", 'start': 680.543, 'duration': 1.101}, {'end': 683.525, 'text': "I've done so much recording.", 'start': 681.684, 'duration': 1.841}, {'end': 689.649, 'text': "I've done like two hours of recording today for a different network that I do tutorials for.", 'start': 683.545, 'duration': 6.104}], 'summary': 'Recorded 2 hours of tutorials for a different network.', 'duration': 24.262, 'max_score': 665.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E665387.jpg'}, {'end': 801.756, 'src': 'embed', 'start': 770.753, 'weight': 4, 'content': [{'end': 773.454, 'text': "So, you know, if you don't have Sublime Text too, don't worry.", 'start': 770.753, 'duration': 2.701}, {'end': 778.337, 'text': "Like I said, just open up Notepad or if you're using Dreamweaver, you know, no big deal.", 'start': 773.474, 'duration': 4.863}, {'end': 782.779, 'text': "Just create a new file and I'm going to hit Control S to save this.", 'start': 778.377, 'duration': 4.402}, {'end': 786.741, 'text': "And, oh man, I'm completely in the wrong area.", 'start': 783.64, 'duration': 3.101}, {'end': 789.683, 'text': "Project, I think that's it.", 'start': 788.582, 'duration': 1.101}, {'end': 791.604, 'text': 'HTML, yes.', 'start': 790.423, 'duration': 1.181}, {'end': 794.065, 'text': "All right, so I'm gonna name this index.html.", 'start': 791.924, 'duration': 2.141}, {'end': 801.756, 'text': 'All right, and so now what we have to do is start writing out our HTML just to get everything set up.', 'start': 795.373, 'duration': 6.383}], 'summary': 'Creating a new html file named index.html to write html code.', 'duration': 31.003, 'max_score': 770.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E770753.jpg'}, {'end': 960.504, 'src': 'heatmap', 'start': 931.446, 'weight': 0.811, 'content': [{'end': 935.91, 'text': 'Yeah, jQuery.com slash download.', 'start': 931.446, 'duration': 4.464}, {'end': 938.872, 'text': 'You can download this right here.', 'start': 936.79, 'duration': 2.082}, {'end': 941.314, 'text': 'You just right click and save link as.', 'start': 938.912, 'duration': 2.402}, {'end': 952.002, 'text': 'And I got to go back and what the heck, recent places, HTML, create a new folder, call that JS, and then just call this jQuery.', 'start': 942.334, 'duration': 9.668}, {'end': 955.983, 'text': 'All right.', 'start': 953.422, 'duration': 2.561}, {'end': 960.504, 'text': 'And then we have to go to 1140px.com.', 'start': 956.523, 'duration': 3.981}], 'summary': 'Download jquery from jquery.com and create a new folder for it, then go to 1140px.com.', 'duration': 29.058, 'max_score': 931.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E931446.jpg'}, {'end': 988.926, 'src': 'heatmap', 'start': 956.523, 'weight': 1, 'content': [{'end': 960.504, 'text': 'And then we have to go to 1140px.com.', 'start': 956.523, 'duration': 3.981}, {'end': 970.007, 'text': 'And this is our basically a minimal responsive framework and then download that and open that up.', 'start': 961.304, 'duration': 8.703}, {'end': 973.359, 'text': 'And let me get that, get out of there.', 'start': 971.898, 'duration': 1.461}, {'end': 975.28, 'text': 'They want me to buy this thing.', 'start': 973.379, 'duration': 1.901}, {'end': 976.6, 'text': "It's just an evaluation copy.", 'start': 975.32, 'duration': 1.28}, {'end': 980.702, 'text': 'I never buy it, but I in there, we just have a CSS folder.', 'start': 976.62, 'duration': 4.082}, {'end': 988.926, 'text': 'Um, we can hit extract and basically you want to go to your folder.', 'start': 980.722, 'duration': 8.204}], 'summary': 'Minimal responsive framework at 1140px.com for css extraction.', 'duration': 32.403, 'max_score': 956.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E956523.jpg'}, {'end': 1028.41, 'src': 'embed', 'start': 988.966, 'weight': 1, 'content': [{'end': 994.789, 'text': "I'm doing this off screen because I have so many different folders and projects from clients and stuff.", 'start': 988.966, 'duration': 5.823}, {'end': 998.89, 'text': 'Let me go to design course.com, blah, blah, blah.', 'start': 995.009, 'duration': 3.881}, {'end': 999.831, 'text': 'Find this.', 'start': 999.411, 'duration': 0.42}, {'end': 1018.719, 'text': 'all right so project HTML you wanna save that in HTML right there okay alright so now if we go back to our editor Oops, wrong one, sorry.', 'start': 1004.389, 'duration': 14.33}, {'end': 1021.923, 'text': 'All right, so this is what we have.', 'start': 1018.739, 'duration': 3.184}, {'end': 1025.988, 'text': 'We have our JS file, jQuery there.', 'start': 1022.504, 'duration': 3.484}, {'end': 1028.41, 'text': 'We have 1140px.css.', 'start': 1026.568, 'duration': 1.842}], 'summary': 'The speaker is navigating through various folders and projects, discussing a js file, jquery, and 1140px.css.', 'duration': 39.444, 'max_score': 988.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E988966.jpg'}, {'end': 1101.631, 'src': 'embed', 'start': 1059.58, 'weight': 5, 'content': [{'end': 1061.201, 'text': 'basically getting everything working.', 'start': 1059.58, 'duration': 1.621}, {'end': 1063.402, 'text': "So this, you know, I'm not sure.", 'start': 1061.261, 'duration': 2.141}, {'end': 1065.043, 'text': "We'll see how it goes tomorrow.", 'start': 1063.562, 'duration': 1.481}, {'end': 1070.146, 'text': 'This may be a one or a two part or maybe a three part video tutorial.', 'start': 1065.123, 'duration': 5.023}, {'end': 1070.926, 'text': "So we'll see.", 'start': 1070.166, 'duration': 0.76}, {'end': 1071.687, 'text': 'All right.', 'start': 1070.946, 'duration': 0.741}, {'end': 1076.89, 'text': "So as always, check out design course dot com if you haven't yet and subscribe here on YouTube.", 'start': 1071.707, 'duration': 5.183}, {'end': 1082.293, 'text': "And if you do go to your subscription settings on YouTube and there's like a little, you know what.", 'start': 1076.93, 'duration': 5.363}, {'end': 1087.275, 'text': "maybe I should just show you, because a lot of people I didn't even know this until recently myself.", 'start': 1082.293, 'duration': 4.982}, {'end': 1101.631, 'text': "If you go to, like my subscriptions and this person I'm subscribed to and you click right here, get an email for each upload from.", 'start': 1089.739, 'duration': 11.892}], 'summary': 'Video tutorial may be one to three parts, check subscriptions for email notifications.', 'duration': 42.051, 'max_score': 1059.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E1059580.jpg'}], 'start': 602.792, 'title': 'Creating transparent png, organizing files, html, and css', 'summary': 'Covers creating a transparent png, reducing file size to 2.3 kb, organizing files and folders, rapid creation of html and css files, and spending two hours recording tutorials for a different network.', 'chapters': [{'end': 664.906, 'start': 602.792, 'title': 'Creating transparent png and organizing files', 'summary': 'Covers creating a transparent png, reducing the file size to 2.3 kb, and organizing files and folders for a project.', 'duration': 62.114, 'highlights': ['Creating a transparent PNG with a file size of 2.3 kb', 'Organizing files and folders within a project directory', 'Using keyboard shortcuts for efficient workflow']}, {'end': 1110.3, 'start': 665.387, 'title': 'Creating html and css files', 'summary': 'Covers the rapid creation of html and css files, including the process of copying, pasting, and saving, as well as setting up the essential components for a web project, with a mention of spending two hours recording tutorials for a different network.', 'duration': 444.913, 'highlights': ['The process involves rapid actions such as copying with shortcuts (Control C), pasting (Control V), and saving files, with a mention of doing two hours of recording for a different network.', "Setting up the essential components for a web project, including opening a folder in an HTML editor (Sublime Text 2), saving the file as 'index.html', and starting to write out the HTML code.", 'Mentioning the possibility of the tutorial being a one, two, or three-part video series, and encouraging viewers to subscribe for daily video tutorials on YouTube and visit the website designcourse.com.']}], 'duration': 507.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tuivYaBTU3E/pics/tuivYaBTU3E602792.jpg', 'highlights': ['Creating a transparent PNG with a file size of 2.3 kb', 'Organizing files and folders within a project directory', 'Using keyboard shortcuts for efficient workflow', 'The process involves rapid actions such as copying with shortcuts (Control C), pasting (Control V), and saving files, with a mention of doing two hours of recording for a different network', "Setting up the essential components for a web project, including opening a folder in an HTML editor (Sublime Text 2), saving the file as 'index.html', and starting to write out the HTML code", 'Mentioning the possibility of the tutorial being a one, two, or three-part video series, and encouraging viewers to subscribe for daily video tutorials on YouTube and visit the website designcourse.com']}], 'highlights': ['Access to project files available for free on designcourse.com, requiring registration', 'Learn scroll-based CSS3 animations over two days', 'Subscription on YouTube is encouraged for accessing additional content and updates', 'The 12-grid system in Photoshop facilitates responsive design for HTML and CSS', 'Creating a transparent PNG with a file size of 2.3 kb', 'Organizing files and folders within a project directory', 'Front-end developers are increasingly using CSS3 animation activated by scrolling', 'Practical steps for creating CSS animation design include using Source Sans Pro font', "Emphasis on lightweight design and content 'above the fold' for CSS animation layout", 'Creating vector graphics of devices with specific dimensions and color codes for design projects', 'Importance of accurate positioning and alignment of vector graphics for the design project', 'Efficient graphic creation and editing using keyboard shortcuts and tools like the rounded rectangle', 'Using keyboard shortcuts for efficient workflow', "Setting up the essential components for a web project, including opening a folder in an HTML editor (Sublime Text 2), saving the file as 'index.html', and starting to write out the HTML code", 'Mentioning the possibility of the tutorial being a one, two, or three-part video series, and encouraging viewers to subscribe for daily video tutorials on YouTube and visit the website designcourse.com', 'The process involves rapid actions such as copying with shortcuts (Control C), pasting (Control V), and saving files, with a mention of doing two hours of recording for a different network']}