title
Did they pull it off? AUTOMATIC Prototype to HTML/CSS!

description
Visit http://linode.com/designcourse for a $20 credit on your new linode account. -- There's a new plugin for Adobe XD (and coming soon for Figma) called Anima. It allows you to click a button and export your XD prototypes to HTML and CSS within a few short seconds. I'm going to be checking out this tool and giving you my thoughts. Let's get started! PS: If you were looking for the reviews for the 7Days7Designs challenge, visit this video! I just uploaded it: https://www.youtube.com/watch?v=hq4IX8h97Ec Check out Anima: https://www.animaapp.com/ -- PS: This is not a sponsored video. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! 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': 'Did they pull it off? AUTOMATIC Prototype to HTML/CSS!', 'heatmap': [{'end': 164.012, 'start': 145.226, 'weight': 0.796}, {'end': 712.906, 'start': 672.782, 'weight': 0.851}], 'summary': 'Explores using the anima plugin for adobe xd to export mockups to html/css, discussing its features, pricing, and code generation process, while also addressing issues like responsiveness, bloated code, and excessive css rules, and evaluating its ability to create pixel-perfect replicas from adobe xd and figma.', 'chapters': [{'end': 113.095, 'segs': [{'end': 30.655, 'src': 'embed', 'start': 0.129, 'weight': 0, 'content': [{'end': 10.524, 'text': "Could it be a truly effective solution for exporting your Adobe XD mockup and prototypes to HTML and CSS? We're going to find out.", 'start': 0.129, 'duration': 10.395}, {'end': 15.377, 'text': "hey everybody, what's up, gary simon here?", 'start': 13.595, 'duration': 1.782}, {'end': 26.57, 'text': 'so just last week or a week and a half ago or so, there was a plugin that released for adobe xd and that is called anima,', 'start': 15.377, 'duration': 11.193}, {'end': 28.853, 'text': 'and you can find it at animaapp.com.', 'start': 26.57, 'duration': 2.283}, {'end': 30.655, 'text': 'by the way, this is not a sponsored video.', 'start': 28.853, 'duration': 1.802}], 'summary': 'Reviewing the effectiveness of anima plugin for exporting adobe xd mockups to html and css.', 'duration': 30.526, 'max_score': 0.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE129.jpg'}, {'end': 126.988, 'src': 'embed', 'start': 96.885, 'weight': 4, 'content': [{'end': 101.327, 'text': 'Now as a front end developer or a designer, you know that you need a personal portfolio.', 'start': 96.885, 'duration': 4.442}, {'end': 108.732, 'text': 'And if you use a website builder like Wix or Squarespace, they lack total customization and they lock you into using their platform.', 'start': 101.887, 'duration': 6.845}, {'end': 113.095, 'text': 'But to be a pro, you need to use the tools that the pros actually use.', 'start': 109.192, 'duration': 3.903}, {'end': 120.881, 'text': 'So level up, start building your own projects and your own portfolio on an enterprise level content management system like WordPress or Drupal.', 'start': 113.476, 'duration': 7.405}, {'end': 126.988, 'text': 'Now, real web development sometimes requires knowledge of spinning up servers, managing domain names and setting up an occasional staging environment.', 'start': 121.161, 'duration': 5.827}], 'summary': 'Front end developers need a personal portfolio; they should use enterprise-level content management systems like wordpress or drupal for total customization and flexibility.', 'duration': 30.103, 'max_score': 96.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE96885.jpg'}], 'start': 0.129, 'title': 'Exporting adobe xd mockup', 'summary': 'Explores the anima plugin for adobe xd, allowing users to export mockups to html/css with a free sign up for one project and additional pricing for unlimited projects. it includes a demonstration and evaluation of its features and the generated code.', 'chapters': [{'end': 113.095, 'start': 0.129, 'title': 'Export adobe xd mockup to html/css', 'summary': 'Explores the anima plugin for adobe xd, which enables users to export mockups and prototypes to html and css with a free sign up for one project and additional pricing for unlimited projects, and the demonstration and evaluation of its features and the generated html and css.', 'duration': 112.966, 'highlights': ['The Anima plugin for Adobe XD allows users to export mockups and prototypes to HTML and CSS, with a free sign up for one project and additional pricing for unlimited projects.', 'The plugin also supports Figma, which is coming soon.', 'Anima offers a free sign up for one project and pricing for unlocking unlimited projects and other features.', 'The chapter includes a demonstration of setting up the Anima plugin and a quick project to showcase its features.', 'The video is sponsored by Linode, emphasizing the need for personal portfolio customization and the use of professional tools.']}], 'duration': 112.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE129.jpg', 'highlights': ['The Anima plugin for Adobe XD allows users to export mockups and prototypes to HTML and CSS, with a free sign up for one project and additional pricing for unlimited projects.', 'Anima offers a free sign up for one project and pricing for unlocking unlimited projects and other features.', 'The chapter includes a demonstration of setting up the Anima plugin and a quick project to showcase its features.', 'The plugin also supports Figma, which is coming soon.', 'The video is sponsored by Linode, emphasizing the need for personal portfolio customization and the use of professional tools.']}, {'end': 341.05, 'segs': [{'end': 140.505, 'src': 'embed', 'start': 113.476, 'weight': 0, 'content': [{'end': 120.881, 'text': 'So level up, start building your own projects and your own portfolio on an enterprise level content management system like WordPress or Drupal.', 'start': 113.476, 'duration': 7.405}, {'end': 126.988, 'text': 'Now, real web development sometimes requires knowledge of spinning up servers, managing domain names and setting up an occasional staging environment.', 'start': 121.161, 'duration': 5.827}, {'end': 132.815, 'text': "And there's no better or simpler way to learn the ins and outs of hosting your website than with Linode Cloud Hosting.", 'start': 127.008, 'duration': 5.807}, {'end': 140.505, 'text': 'Linode Cloud Hosting makes it as easy as possible for you to deploy a WordPress or Drupal website in seconds with the free Linode one-click app marketplace.', 'start': 133.056, 'duration': 7.449}], 'summary': 'Learn web development with wordpress or drupal on linode cloud hosting for easy deployment in seconds.', 'duration': 27.029, 'max_score': 113.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE113476.jpg'}, {'end': 170.058, 'src': 'heatmap', 'start': 145.226, 'weight': 0.796, 'content': [{'end': 151.108, 'text': 'along with $20 of free hosting and all the tools that you need to build enterprise class websites.', 'start': 145.226, 'duration': 5.882}, {'end': 151.628, 'text': 'All right.', 'start': 151.388, 'duration': 0.24}, {'end': 155.509, 'text': "So we're in here, here in Adobe XD.", 'start': 151.708, 'duration': 3.801}, {'end': 155.849, 'text': 'All right.', 'start': 155.549, 'duration': 0.3}, {'end': 158.45, 'text': 'And so I already have the plugin installed.', 'start': 156.009, 'duration': 2.441}, {'end': 164.012, 'text': "So if I come down here to the plugin section, you'll see Anima up here at the very top.", 'start': 158.71, 'duration': 5.302}, {'end': 170.058, 'text': 'and basically we have this right here select an existing project.', 'start': 165.732, 'duration': 4.326}], 'summary': 'Anima plugin offers $20 free hosting and tools for enterprise websites in adobe xd.', 'duration': 24.832, 'max_score': 145.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE145226.jpg'}, {'end': 240.949, 'src': 'embed', 'start': 218.712, 'weight': 3, 'content': [{'end': 228.38, 'text': "now you're probably wondering, you know, does it actually take your prototyping like smart animate here in XD and convert that to code?", 'start': 218.712, 'duration': 9.668}, {'end': 231.843, 'text': "no, it doesn't, but it gives you this option like a hover effect instead.", 'start': 228.38, 'duration': 3.463}, {'end': 240.949, 'text': 'so if we click edit the hover effect, you can see it has some basic presets defined here, like blur and move up and shrink.', 'start': 231.843, 'duration': 9.106}], 'summary': 'Xd does not convert smart animate to code, but offers hover effect with presets like blur and move up.', 'duration': 22.237, 'max_score': 218.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE218712.jpg'}], 'start': 113.476, 'title': 'Web development and adobe xd plugin', 'summary': 'Discusses the significance of enterprise-level content management systems like wordpress and drupal, and the ease of deploying websites using linode cloud hosting. it also introduces the anima plugin for adobe xd, enabling the creation of interactive prototypes with various features.', 'chapters': [{'end': 145.226, 'start': 113.476, 'title': 'Level up your web development skills with linode', 'summary': 'Emphasizes the importance of building projects and portfolio on enterprise level content management systems like wordpress or drupal, and highlights the ease of deploying websites using linode cloud hosting with free one-click app marketplace.', 'duration': 31.75, 'highlights': ['Linode Cloud Hosting allows you to deploy a WordPress or Drupal website in seconds with the free Linode one-click app marketplace.', 'Building projects and portfolio on enterprise level content management systems like WordPress or Drupal is crucial for leveling up in web development.', 'Real web development sometimes requires knowledge of spinning up servers, managing domain names and setting up an occasional staging environment.']}, {'end': 341.05, 'start': 145.226, 'title': 'Anima plugin for adobe xd', 'summary': 'Introduces the anima plugin for adobe xd, which allows users to create interactive prototypes with features such as smart layers, hover effects, video/gif/lottie integration, forms and text inputs, and responsive design with breakpoints.', 'duration': 195.824, 'highlights': ['Anima plugin allows users to create interactive prototypes with features such as smart layers, hover effects, video/GIF/Lottie integration, forms and text inputs, and responsive design with breakpoints. The Anima plugin for Adobe XD enables the creation of interactive prototypes with various features, including smart layers, hover effects, video/GIF/Lottie integration, forms and text inputs, and responsive design with breakpoints.', 'Anima plugin enables users to add smart layers and hover effects to elements in the prototype. The Anima plugin allows users to add smart layers and hover effects to elements in the prototype, providing interactive functionality.', 'Anima plugin offers the capability to add video, GIF, or Lottie to the prototype. The Anima plugin offers the capability to add video, GIF, or Lottie to the prototype, enhancing the interactivity and visual appeal of the design.', 'Anima plugin supports forms, text inputs, and the ability to embed code in the prototype. The Anima plugin supports forms, text inputs, and the ability to embed code in the prototype, allowing for a more comprehensive and functional interactive design.', 'Anima plugin facilitates the creation of responsive designs by adding breakpoints to the prototypes. The Anima plugin facilitates the creation of responsive designs by adding breakpoints to the prototypes, ensuring compatibility across various devices and screen sizes.']}], 'duration': 227.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE113476.jpg', 'highlights': ['Linode Cloud Hosting allows instant deployment of WordPress or Drupal websites with free Linode one-click app marketplace.', 'Enterprise-level content management systems like WordPress or Drupal are crucial for advancing in web development.', 'Real web development may involve server setup, domain management, and staging environment configuration.', 'Anima plugin for Adobe XD enables creation of interactive prototypes with smart layers, hover effects, video/GIF/Lottie integration, forms, text inputs, and responsive design.']}, {'end': 744.004, 'segs': [{'end': 366.875, 'src': 'embed', 'start': 341.07, 'weight': 4, 'content': [{'end': 346.795, 'text': "I think that's because of the height, possibly, of those text containers, which we'll try to fix that.", 'start': 341.07, 'duration': 5.725}, {'end': 348.377, 'text': "Let's see if this part works.", 'start': 347.336, 'duration': 1.041}, {'end': 348.858, 'text': 'Oh, it does.', 'start': 348.437, 'duration': 0.421}, {'end': 354.119, 'text': 'So if we hover over it, it adds that CSS transition-based animation.', 'start': 349.058, 'duration': 5.061}, {'end': 362.507, 'text': "These right here, they're not links, but if I chose to make those links back in the Anima plugin, they would be linking to wherever I pointed.", 'start': 354.98, 'duration': 7.527}, {'end': 364.248, 'text': "Now, as you can see, it's not fluid.", 'start': 362.527, 'duration': 1.721}, {'end': 366.875, 'text': "And it's not responsive.", 'start': 365.254, 'duration': 1.621}], 'summary': 'Issues with text container height and fluidity, lacking responsiveness', 'duration': 25.805, 'max_score': 341.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE341070.jpg'}, {'end': 441.572, 'src': 'embed', 'start': 411.012, 'weight': 1, 'content': [{'end': 414.354, 'text': "So, um, let's go ahead and see if we can actually make this thing responsive.", 'start': 411.012, 'duration': 3.342}, {'end': 419.055, 'text': "So what we want to do is we'll go ahead and we'll duplicate this right?", 'start': 414.794, 'duration': 4.261}, {'end': 433.756, 'text': "And We'll come out here, maybe to like an iPad size or so, and we'll take this push, this over, go ahead and extend this out.", 'start': 419.075, 'duration': 14.681}, {'end': 437.51, 'text': "Those weren't properly aligned, unfortunately.", 'start': 435.609, 'duration': 1.901}, {'end': 438.71, 'text': "Let's get this in the center.", 'start': 437.53, 'duration': 1.18}, {'end': 440.111, 'text': 'There we go.', 'start': 438.73, 'duration': 1.381}, {'end': 441.572, 'text': 'Maybe make this smaller.', 'start': 440.491, 'duration': 1.081}], 'summary': 'Attempting to make a design responsive by adjusting size and alignment.', 'duration': 30.56, 'max_score': 411.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE411012.jpg'}, {'end': 605.585, 'src': 'embed', 'start': 578.86, 'weight': 2, 'content': [{'end': 582.823, 'text': "And let's also put in a video demonstration.", 'start': 578.86, 'duration': 3.963}, {'end': 585.565, 'text': 'So maybe over here there will be a video of some sort.', 'start': 582.903, 'duration': 2.662}, {'end': 589.688, 'text': "So we'll go ahead and get rid of that.", 'start': 587.247, 'duration': 2.441}, {'end': 594.899, 'text': "So in this block, there will be a video, okay? So I've already uploaded an MP4.", 'start': 590.697, 'duration': 4.202}, {'end': 605.585, 'text': 'Now, when you click Add, it shows you enter a video or GIF URL, all right? So URL formats include a YouTube, Vimeo, MP4, or a GIF file.', 'start': 595.6, 'duration': 9.985}], 'summary': 'Video demonstration added with various url formats supported.', 'duration': 26.725, 'max_score': 578.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE578860.jpg'}, {'end': 662.438, 'src': 'embed', 'start': 631.34, 'weight': 3, 'content': [{'end': 633.862, 'text': "we'll hit save, all right.", 'start': 631.34, 'duration': 2.522}, {'end': 643.046, 'text': 'and Just to show you that we can actually change up these hover effects, we can hit edit based on the different viewport artboards.', 'start': 633.862, 'duration': 9.184}, {'end': 646.768, 'text': "We'll just make this rotate and save.", 'start': 643.606, 'duration': 3.162}, {'end': 648.029, 'text': 'All right.', 'start': 647.768, 'duration': 0.261}, {'end': 656.133, 'text': "So now for the responsive part to work, what we want to do is select all of these and we're going to do breakpoints.", 'start': 648.649, 'duration': 7.484}, {'end': 657.796, 'text': 'And there we go.', 'start': 657.236, 'duration': 0.56}, {'end': 662.438, 'text': 'So now it shows you select all artboards that you want to connect by breakpoints and click done.', 'start': 657.856, 'duration': 4.582}], 'summary': 'Demonstrating changes to hover effects and setting breakpoints for responsive design.', 'duration': 31.098, 'max_score': 631.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE631340.jpg'}, {'end': 712.906, 'src': 'heatmap', 'start': 672.782, 'weight': 0.851, 'content': [{'end': 675.363, 'text': 'All right, so we should be ready to rock.', 'start': 672.782, 'duration': 2.581}, {'end': 677.904, 'text': "Now let's go ahead and preview in browser.", 'start': 675.403, 'duration': 2.501}, {'end': 681.266, 'text': 'All right.', 'start': 677.924, 'duration': 3.342}, {'end': 682.76, 'text': "It's going to work.", 'start': 682.119, 'duration': 0.641}, {'end': 685.642, 'text': "It's processing, uploading, creating draft that quickly.", 'start': 682.82, 'duration': 2.822}, {'end': 694.79, 'text': "That's the major benefit of this, of course, is the speed at which it can provide something that does indeed work in the browser.", 'start': 686.523, 'duration': 8.267}, {'end': 697.572, 'text': 'So as you can see, it is responsive.', 'start': 694.85, 'duration': 2.722}, {'end': 698.573, 'text': 'We have our artboards.', 'start': 697.612, 'duration': 0.961}, {'end': 699.234, 'text': "Here's the mobile.", 'start': 698.613, 'duration': 0.621}, {'end': 703.377, 'text': "Here's the tablet-based artboard.", 'start': 700.515, 'duration': 2.862}, {'end': 706.179, 'text': 'And then here is this version.', 'start': 704.838, 'duration': 1.341}, {'end': 707.602, 'text': 'All right.', 'start': 707.182, 'duration': 0.42}, {'end': 712.906, 'text': "so this little mp4, it's not ideal having this player, although you could probably prevent these controls,", 'start': 707.602, 'duration': 5.304}], 'summary': 'Quickly preview and upload with responsive artboards for different devices.', 'duration': 40.124, 'max_score': 672.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE672782.jpg'}, {'end': 712.906, 'src': 'embed', 'start': 682.82, 'weight': 0, 'content': [{'end': 685.642, 'text': "It's processing, uploading, creating draft that quickly.", 'start': 682.82, 'duration': 2.822}, {'end': 694.79, 'text': "That's the major benefit of this, of course, is the speed at which it can provide something that does indeed work in the browser.", 'start': 686.523, 'duration': 8.267}, {'end': 697.572, 'text': 'So as you can see, it is responsive.', 'start': 694.85, 'duration': 2.722}, {'end': 698.573, 'text': 'We have our artboards.', 'start': 697.612, 'duration': 0.961}, {'end': 699.234, 'text': "Here's the mobile.", 'start': 698.613, 'duration': 0.621}, {'end': 703.377, 'text': "Here's the tablet-based artboard.", 'start': 700.515, 'duration': 2.862}, {'end': 706.179, 'text': 'And then here is this version.', 'start': 704.838, 'duration': 1.341}, {'end': 707.602, 'text': 'All right.', 'start': 707.182, 'duration': 0.42}, {'end': 712.906, 'text': "so this little mp4, it's not ideal having this player, although you could probably prevent these controls,", 'start': 707.602, 'duration': 5.304}], 'summary': 'The major benefit of this tool is its fast processing and ability to provide responsive designs for different devices.', 'duration': 30.086, 'max_score': 682.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE682820.jpg'}], 'start': 341.07, 'title': 'Design fixing and responsiveness', 'summary': 'Discusses fixing design issues related to fluidity and responsiveness, and demonstrates making the design responsive for different devices, while also explaining the usage of adobe xd to create a responsive design, emphasizing speed and functionality of the process.', 'chapters': [{'end': 549.364, 'start': 341.07, 'title': 'Fixing design and making it responsive', 'summary': 'Discusses fixing design issues related to fluidity and responsiveness, and demonstrates making the design responsive for different devices, including ipad and desktop.', 'duration': 208.294, 'highlights': ['The chapter discusses fixing design issues related to fluidity and responsiveness The speaker addresses the issues of fluidity and responsiveness in the design, aiming to fix them.', 'Demonstrates making the design responsive for different devices, including iPad and desktop The speaker demonstrates the process of making the design responsive for various devices, such as iPad and desktop, by adjusting the layout and alignment.', 'The speaker addresses the issues of fluidity and responsiveness in the design, aiming to fix them The speaker acknowledges the lack of fluidity and responsiveness in the design and expresses the intent to resolve these issues.']}, {'end': 744.004, 'start': 550.316, 'title': 'Xd browser preview and responsive design', 'summary': "Explains how to use adobe xd to create a responsive design, including embedding google maps and video, adjusting hover effects, and testing the design's responsiveness in the browser, emphasizing the speed and functionality of the process.", 'duration': 193.688, 'highlights': ['The chapter emphasizes the speed at which Adobe XD can provide a functional design in the browser, showcasing its responsive nature and various viewport artboards.', 'It demonstrates the process of embedding Google Maps and a video, specifying the URL formats for videos and highlighting the adjustments needed for embedded videos, such as mp4 files.', "It showcases the process of adjusting hover effects based on different viewport artboards and the ability to test the design's responsiveness by connecting artboards with breakpoints."]}], 'duration': 402.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE341070.jpg', 'highlights': ['The chapter emphasizes the speed at which Adobe XD can provide a functional design in the browser, showcasing its responsive nature and various viewport artboards.', 'Demonstrates making the design responsive for different devices, including iPad and desktop The speaker demonstrates the process of making the design responsive for various devices, such as iPad and desktop, by adjusting the layout and alignment.', 'It demonstrates the process of embedding Google Maps and a video, specifying the URL formats for videos and highlighting the adjustments needed for embedded videos, such as mp4 files.', "It showcases the process of adjusting hover effects based on different viewport artboards and the ability to test the design's responsiveness by connecting artboards with breakpoints.", 'The speaker addresses the issues of fluidity and responsiveness in the design, aiming to fix them.']}, {'end': 1015.882, 'segs': [{'end': 901.288, 'src': 'embed', 'start': 766.385, 'weight': 0, 'content': [{'end': 774.431, 'text': "So it's a zip file, and we can see we have our iPhone, that's the name of the artboard, and here it is.", 'start': 766.385, 'duration': 8.046}, {'end': 784.458, 'text': "Now let's take a look at the HTML and the CSS that's generated and see exactly how it's going about generating this code.", 'start': 774.551, 'duration': 9.907}, {'end': 790.342, 'text': 'So if I control shift I over here.', 'start': 784.898, 'duration': 5.444}, {'end': 791.563, 'text': 'we come out here to elements.', 'start': 790.342, 'duration': 1.221}, {'end': 801.806, 'text': "Now it looks like there's not a lot of development, but if I right click and view the page source,", 'start': 794.597, 'duration': 7.209}, {'end': 810.536, 'text': 'we could see this is all the HTML that is required to create our pages here.', 'start': 801.806, 'duration': 8.73}, {'end': 822.04, 'text': "So what's interesting about this is it looks like, instead of creating separate HTML files, let's look at our zip file again,", 'start': 813.638, 'duration': 8.402}, {'end': 824.781, 'text': "because I want to make sure I'm not missing anything here.", 'start': 822.04, 'duration': 2.741}, {'end': 839.925, 'text': "Yeah So what it has done essentially is it looks like, wow, I'm really trying to figure this out.", 'start': 827.382, 'duration': 12.543}, {'end': 841.126, 'text': 'It says design course here.', 'start': 839.945, 'duration': 1.181}, {'end': 845.946, 'text': 'Let me do a control F on that.', 'start': 844.264, 'duration': 1.682}, {'end': 849.769, 'text': 'Okay, well, let me find one area in here.', 'start': 846.526, 'duration': 3.243}, {'end': 861.26, 'text': "Like this should really be only in the HTML four times, right? It's in the HTML 12 times.", 'start': 852.472, 'duration': 8.788}, {'end': 867.375, 'text': "And it's doing that one for every single artboard.", 'start': 864.393, 'duration': 2.982}, {'end': 870.657, 'text': "So that's a problem.", 'start': 868.255, 'duration': 2.402}, {'end': 875.139, 'text': "It's a problem if you're worrying about code efficiency in terms of your HTML.", 'start': 870.957, 'duration': 4.182}, {'end': 881.382, 'text': 'Because obviously this is one page, right? Because this is meant just to be for like a landing page of an app.', 'start': 875.979, 'duration': 5.403}, {'end': 891.008, 'text': "And what's happening is they're replicating the HTML for each of these three different artboards.", 'start': 882.303, 'duration': 8.705}, {'end': 895.464, 'text': "And of course, that's really bloated.", 'start': 892.008, 'duration': 3.456}, {'end': 901.288, 'text': 'You only want one HTML per page, or one HTML markup per page.', 'start': 895.804, 'duration': 5.484}], 'summary': 'Reviewing a zip file containing html and css, finding excessive html replication, impacting code efficiency.', 'duration': 134.903, 'max_score': 766.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE766385.jpg'}, {'end': 992.285, 'src': 'embed', 'start': 960.629, 'weight': 3, 'content': [{'end': 970.135, 'text': "automated in terms of automation, because what they're doing, like i said, is they are positioning everything in terms of absolute values.", 'start': 960.629, 'duration': 9.506}, {'end': 974.097, 'text': "um, that's how they're able to get pixel perfect, um results.", 'start': 970.135, 'duration': 3.962}, {'end': 979.601, 'text': "now the amount of css that's in here for just this one page.", 'start': 974.097, 'duration': 5.504}, {'end': 984.104, 'text': 'here i is probably very bloated as well.', 'start': 979.601, 'duration': 4.503}, {'end': 992.285, 'text': 'so if i go to our css here, it is almost a hundred kilobytes.', 'start': 984.104, 'duration': 8.181}], 'summary': 'The webpage has nearly 100 kilobytes of css, achieving pixel-perfect results through automation.', 'duration': 31.656, 'max_score': 960.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE960629.jpg'}], 'start': 744.004, 'title': 'Generating html and css from design project', 'summary': 'Discusses the process of exporting code, analyzing the generated zip file contents, and examining the html generation process. it also addresses issues in the html and css code for a landing page, including bloated code and a nearly 100 kilobytes file size.', 'chapters': [{'end': 841.126, 'start': 744.004, 'title': 'Generating html and css from design project', 'summary': 'Discusses the process of generating html and css code from a design project, exploring the option to export code, analyzing the generated zip file contents, and examining the html generation process.', 'duration': 97.122, 'highlights': ['The process of generating HTML and CSS code from a design project is explored, including exporting code and analyzing the contents of the generated zip file.', 'The chapter also delves into examining the HTML generation process, showcasing the code required to create the pages.', 'The feature of generating HTML and CSS code from the design project is demonstrated through the analysis of the code structure and zip file contents.']}, {'end': 1015.882, 'start': 844.264, 'title': 'Code efficiency analysis for landing page', 'summary': 'Discusses the issues found in the html and css code for a landing page, such as html markup being replicated for each artboard, leading to bloated code, and excessive css usage resulting in a nearly 100 kilobytes file size.', 'duration': 171.618, 'highlights': ['The HTML markup is being replicated for each artboard, resulting in a bloated code with the element appearing 12 times instead of the expected 4 times.', 'The excessive usage of absolute positioning in the CSS for achieving pixel-perfect results has led to bloated CSS, with the file size being almost 100 kilobytes.', 'The inefficient HTML structure and excessive CSS usage could impact the code efficiency, especially for a single landing page of an app.']}], 'duration': 271.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE744004.jpg', 'highlights': ['The process of generating HTML and CSS code from a design project is explored, including exporting code and analyzing the contents of the generated zip file.', 'The HTML markup is being replicated for each artboard, resulting in a bloated code with the element appearing 12 times instead of the expected 4 times.', 'The chapter also delves into examining the HTML generation process, showcasing the code required to create the pages.', 'The excessive usage of absolute positioning in the CSS for achieving pixel-perfect results has led to bloated CSS, with the file size being almost 100 kilobytes.', 'The feature of generating HTML and CSS code from the design project is demonstrated through the analysis of the code structure and zip file contents.', 'The inefficient HTML structure and excessive CSS usage could impact the code efficiency, especially for a single landing page of an app.']}, {'end': 1229.331, 'segs': [{'end': 1052.316, 'src': 'embed', 'start': 1015.882, 'weight': 0, 'content': [{'end': 1020.405, 'text': "here is the CSS that's generated from Anima.", 'start': 1015.882, 'duration': 4.523}, {'end': 1027.769, 'text': "As you could see, there's simply a massive amount of rules.", 'start': 1022.286, 'duration': 5.483}, {'end': 1029.73, 'text': "I mean, it's styled nicely, I give them that.", 'start': 1027.969, 'duration': 1.761}, {'end': 1033.193, 'text': 'It would be nice if they give you the option to like minify it.', 'start': 1030.671, 'duration': 2.522}, {'end': 1045.632, 'text': "And also if I type in absolute you'll see they're doing position absolute 188 times.", 'start': 1034.252, 'duration': 11.38}, {'end': 1052.316, 'text': 'So what they should do is many of these, like position absolute, for instance.', 'start': 1046.152, 'duration': 6.164}], 'summary': 'Anima generates a large amount of css rules, including 188 instances of position absolute, without the option to minify.', 'duration': 36.434, 'max_score': 1015.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE1015882.jpg'}, {'end': 1160.43, 'src': 'embed', 'start': 1134.335, 'weight': 1, 'content': [{'end': 1142.819, 'text': "There's a lot of markup bloat in there, especially the CSS file for what is relatively a small landing page.", 'start': 1134.335, 'duration': 8.484}, {'end': 1150.102, 'text': 'As we saw it was 97 kilobytes generated in a single CSS file for just one page where, if you did it properly,', 'start': 1142.859, 'duration': 7.243}, {'end': 1155.066, 'text': 'it would be I mean just multitudes smaller way smaller.', 'start': 1150.102, 'duration': 4.964}, {'end': 1160.43, 'text': 'I would imagine no more than several kilobytes just for the example that I showed there.', 'start': 1155.106, 'duration': 5.324}], 'summary': 'The css file for the landing page is 97 kilobytes, but it could be significantly smaller, possibly just a few kilobytes with proper optimization.', 'duration': 26.095, 'max_score': 1134.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE1134335.jpg'}, {'end': 1206.193, 'src': 'embed', 'start': 1181.624, 'weight': 3, 'content': [{'end': 1191.207, 'text': "But yeah, I'm actually impressed with it because it does create pixel perfect replicas in HTML and CSS based on your prototypes in Adobe,", 'start': 1181.624, 'duration': 9.583}, {'end': 1193.108, 'text': 'XD and Figma coming soon as well.', 'start': 1191.207, 'duration': 1.901}, {'end': 1196.489, 'text': "So I think they've done a good job, but there's still a long way to go.", 'start': 1193.228, 'duration': 3.261}, {'end': 1206.193, 'text': "And I've personally never seen one of these export from mockup or PSD to HTML and CSS code generators.", 'start': 1196.589, 'duration': 9.604}], 'summary': 'Tool creates pixel perfect html and css from adobe xd and figma prototypes, but still has room for improvement.', 'duration': 24.569, 'max_score': 1181.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE1181624.jpg'}], 'start': 1015.882, 'title': 'Css code generation and review', 'summary': "Discusses anima's excessive css rules with 188 instances of position absolute, suggesting consolidation into classes to reduce bloated markup. it also evaluates the html & css code generator's use case, limitations, and ability to create pixel-perfect replicas from adobe xd and figma.", 'chapters': [{'end': 1092.018, 'start': 1015.882, 'title': 'Anima css code review', 'summary': 'Discusses the excessive css rules generated by anima, including 188 instances of position absolute, suggesting that consolidating similar rules into classes would reduce bloated markup, despite the trade-off between code verbosity and ease of use.', 'duration': 76.136, 'highlights': ['The excessive amount of CSS rules generated by Anima, including 188 instances of position absolute, suggests the need for consolidation into classes to reduce bloated markup.', "Recommendation to create a separate class, such as 'absolute', for common properties like position absolute to optimize the code and reduce redundancy.", 'An acknowledgement that using Anima may lead to more bloated code, but it provides convenience for those who seek to avoid manual coding.']}, {'end': 1229.331, 'start': 1092.478, 'title': 'Html & css code generator review', 'summary': 'Discusses the use case and limitations of an html & css code generator for small projects, highlighting the markup bloat and the potential for improvement, while also acknowledging its ability to create pixel-perfect replicas from adobe xd and figma.', 'duration': 136.853, 'highlights': ['The HTML & CSS code generator is suitable for simple projects like landing pages or email capture, but not recommended for medium to large-sized projects due to markup bloat and inefficient styling through position absolute.', 'The CSS file for a small landing page was 97 kilobytes, while it could be significantly smaller if done properly, possibly no more than a few kilobytes.', 'The code generator impresses by creating pixel-perfect replicas in HTML and CSS from prototypes in Adobe XD and Figma, although there is still room for improvement.', 'The speaker acknowledges the difficulty of efficiently converting mockups or PSD to HTML and CSS code, commends the effort of the generator, and encourages support for its potential.', 'The speaker concludes by expressing appreciation for the plugin and encouraging viewers to subscribe.']}], 'duration': 213.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VCwzh6qVGdE/pics/VCwzh6qVGdE1015882.jpg', 'highlights': ['Anima generates 188 instances of position absolute, suggesting consolidation into classes to reduce bloated markup.', 'HTML & CSS code generator suitable for simple projects like landing pages, but not recommended for medium to large-sized projects due to markup bloat and inefficient styling through position absolute.', 'CSS file for a small landing page was 97 kilobytes, while it could be significantly smaller if done properly, possibly no more than a few kilobytes.', 'Code generator impresses by creating pixel-perfect replicas in HTML and CSS from prototypes in Adobe XD and Figma, although there is still room for improvement.']}], 'highlights': ['Anima plugin for Adobe XD allows exporting mockups to HTML/CSS with free sign up for one project and pricing for unlimited projects.', 'Linode Cloud Hosting enables instant deployment of WordPress or Drupal websites with free Linode one-click app marketplace.', 'Adobe XD provides a functional design in the browser, showcasing its responsive nature and various viewport artboards.', 'HTML & CSS code generator suitable for simple projects like landing pages, but not recommended for medium to large-sized projects due to markup bloat and inefficient styling through position absolute.', 'Anima generates 188 instances of position absolute, suggesting consolidation into classes to reduce bloated markup.']}