- Overview
- Transcript
1.1 Welcome to the Course
In this introduction, we’ll quickly walk through the Adobe XD design that we’ll be turning into a working web page, discussing the steps we’ll need to take.
Related Links
1.Introduction1 lesson, 01:07
1.1Welcome to the Course01:07
2.Preparation and Basics5 lessons, 45:29
2.1Setup, Import Design, and Configure Preferences11:27
2.2Export Images14:36
2.3Create CSS Variables10:08
2.4Base Code: HTML Shell and CSS Variables03:46
2.5Basic Layout and Background Color05:32
3.Welcome and Typography Panels6 lessons, 56:30
3.1Create a 16:9 Image Panel04:46
3.2Add the Panel 1 Content Tile16:50
3.3Make Panel 1 Responsive08:40
3.4Typography and Panels 2–513:06
3.5Links and Buttons08:11
3.6Responsive Panel Adjustment04:57
4.Responsive Double-Column Panels5 lessons, 34:30
4.1Quick Panel 6 Setup04:12
4.2Set Up a Scalable Tablet Image With a Low File Size11:08
4.3Make Panel 6 Responsive06:08
4.4Set Up Panel 7 With a Clipped Laptop Image10:56
4.5Quick Footer02:06
5.Conclusion1 lesson, 04:41
5.1Wrapping Up04:41
1.1 Welcome to the Course
When you're handling the process of taking a design and turning it into a fully coded website, trying to work with the same software that was used to create that design in the first place is not always the most efficient thing. Instead of using something like XD or sketch or Photoshop, it can be a lot easier to use a hand off application during the coding phase, something Avocode 3. Avocode can make it a whole lot easier to do things like exporting images generating CSS, assessing measurements, working with variables, and a whole bunch more. This course is a second in a two course series, in the first one we used Adobe XD to create a code friendly web design. And in this course, we're gonna be taking that design and converting it into a fully coded, fully responsive website with the help of Avocode 3. Avocode is fully cross platform, so you can do this course whether you're on Windows, Mac, or Linux, and all the features that you need are available in the free trial of Avocode. When you finish this course you're gonna have a fully coded responsive website, and a knowledge of how you can leverage Avocode to make it faster and easier to code up your web design projects. So let's go ahead and get started on XD to code with Avocode 3. I'll see you in the first lesson.