5.1 Wrapping Up

Hey welcome to the final video in XD to Code with Avocode three. This is gonna be a very, very quick summary. Whenever you need to have your memory jogged, you can come back, watch this video, and it should help you get an at-a-glance refresher on everything that you learned. All right, so first up with Avocode, you've got a few options how you use it. You can use the desktop version, which runs on Windows, Mac, or Linux. You can use the online version, or you can use a plugin inside of VS code or Atom. During app preferences you can change up which thing you're using, like a doc to set your image export path. To set whether you want to use REM or PX values and set your selector style as well as setting what type of Lion Heart unit you want to use. It's a good idea to export all the images that you need as a first step in your whole production process. To export images from Avocode right click on the image on the canvas or right click on a layer or multiple layers and choose Export and then whichever file format you need to export with. In the bottom right corner of the interface you can create variables. They can be CSS variables or they can be preprocessor variables. When you start to put together the CSS that's gonna control your site, you can click on any line in the CSS that Avocode generates for you, and it will automatically be copied. The same thing is true if you highlight a selection of code, that will automatically be copied as well. Or you can hit the Copy All button to grab all the CSS that's been generated for an element so you can paste that all into your CSS. We looked at how you can make a div keep an aspect ratio. In a nutshell, instead of using the height property to give it height, set your height to zero and use the padding top property instead. We also looked at a straightforward way to vertically and horizontally center a div, and we did that by using a CSS grid to create a three column and three row grid. We then positioned our div in the center of that grid, we covered how to append a graphic to our center tile using a pseudo element. We used a variable to control the width of our arrow so that we could then change that later in media queries to change the value of the variable controlling width of the arrow. Making it easier to associate the arrow for different view point widths. We then went through and looked at how you can make all of those things responsive. One of the first things we talked about is how when you start getting your smaller widths you can use viewpoint width units to control your text size that way it's going to automatically scale down. With the width of the window and we also saw how if you're using a grid to control your layout and your media queries is laid out. You can just change the size of the grid columns and grid rows as you need to in order to create the amount of space that you have to have. From there we moved on to carrying over our typography. Now this is where EverCode is pretty handy. It gives you the ability to right-click on an element and copy a heading tag or paragraph with the HTML that you need in there. We set up some reusable classes that also utilize the variables that we set up so that we can officially control the colors and the layout of our panels. Again that feeds into easy adjustment through media queries by modifying variable values. From there we moved on to putting together our panels six and seven which were both dual column panels. We saw how, at the moment, you need to look out for radial gradients in Avocode, because they might be there but just not appearing due to a small bug, so just keep an eye out for those radial gradients. We learned how to layer a JPEG Peg on top of a PNG so that we have the benefit of file compression on the JPG and the transparency of the PNG to ensure that our tablet image would look like a single image, but would be relatively easy to scale up and down and to position. We then use the same process to create our laptop image, only time time we also saw how we could use another rapid div to push that laptop over to the side, scale it up, and chop off the right side of it. Also being able later to show the full width of the laptop image at a narrower viewpoint, and as part of the layout for that narrower viewpoint. We also saw how we can use nth-child to target specific columns in a grid and then use the auto property to switch them around. So, that instead of the laptop being below the text content, it was above the text content. So, we started out in Adobe XD and put this design together and we've ended up with a fully functional fully responsive website that looks just like the original design. We've taken advantage of all the functionality in Avocode to really help speed up the process of converting from design to code. And just to illustrate how cross-platform Avocode actually is, we've done the whole thing on Linux which doesn't have access Adobe XD, or Sketch, or Photoshop. So if you can do it on Linux, then you can definitely do it anywhere. All right, so that's the summary of everything that we covered. Hopefully you got some good insights about using Avocode, how it can help you with your design to code process. And also hopefully a couple of little coding tips and tricks that you can use in your coding from here on. As always, thank you so much for taking this course and I'll see you in the next one.