Development Tips

Avocode Inspect Tutorial: Learn to code responsive web designs in HTML & CSS

Elle Poole SidellElle Poole Sidell

Have you ever wished you could simply open a design file you, or someone else, made in Sketch, Photoshop, XD, Illustrator or Figma — and turn it into a fully functional website without any design tools?

Full disclosure: I'm not a coder, but I know a bit about HTML and CSS after working in web teams over the years. Anyways, I decided to test out a tool called Avocode that claims to make coding "2x faster". In this guest blogpost, I’d like to show you, that it’s not as hard as it looks — anyone can do it.

This article is about a 20-minute read (I know! It's long). But, in 20 minutes, I can teach you how to:

  • code a simple web page from a design file
  • learn the basics of the Avocode platform — which speeds up the whole process
  • export content and images directly from a design file
  • learn the basics of CSS classes, Flexbox, BEM, and REM
  • write a CSS stylesheet using Avocode
  • make the page responsive and mobile ready
  • deploy the page online and share it

I’m working on a Mac, but don’t worry — even if you are working on Windows or Linux, you can follow along.

Sound good? Let’s go.

What you need to code a website?

Before we start, you will need the following materials and tools:

  • Avocode accountIf you don’t already have one, go to Avocode and sign up for a free trial account.
  • Web browser – Since you’re reading this, I assume you’re already set to go. (Hint: Avocode works best with Chrome). If you are more comfortable working with desktop apps, Avocode offers one. Throughout this tutorial, I will be using examples from the Avocode web app.
  • Project resources – For demonstration purposes, I have created a simple web page design that you can use as well as a pre-coded HTML structure of that project page. Download the sample project resources and unzip the file in your Downloads folder for easy access. If you prefer to use your own design instead, you can use any Sketch, Adobe XD, Adobe Photoshop, or Adobe Illustrator file.
  • Text editor – My personal favorite is Visual Code Studio (it’s free!), but you can use other text editors like Atom.

FYI: I wrote this piece for experienced coders who are just skimming to get to know the Avocode interface as well as coding beginners. However, it will be much easier for you to follow if you already know the basics of HTML and CSS.

Ready? Here we go.

🥑

Would you like to compare your result with our coded website? Get the completed HTML and CSS files with all the assets in your inbox for free.

Step 1: Set up your HTML in a text editor and make the design ready for inspecting

Let’s start by preparing your HTML structure. If you don’t want to write it from scratch, just download this boilerplate. You will download the folder and open index.html in your preferred text editor.

It should look like this:

Next, open the HTML file in your browser. To do this, you can double click on the file or right click and select “Open with/Chrome”.

It should look like this:

Don’t worry if it doesn’t look like the design yet — this is only the basic HTML page structure.

Next, let's open up your design file.

If you don't have any design tool licenses — don't worry, you don't need them. That's one of the biggest advantages of using Avocode: you simply upload your design file and get everything you need to code it.

Let's give it a try by opening a Sketch design file in the browser.

Assuming you already have an Avocode account, you will create a new project.

Next, name your project Coffeebar (or whatever you want).

We’ll be creating a Web project using CSS, but you also have the option to create projects for iOS or Android. Just click on "Advanced".

Once you have created the project, you will need to open the unzipped project resources folder. This folder contains the following items:

  1. A file called coffeebar-website.sketch. This is the sample web page design we created for this course.
  2. A file called index.html. This file contains a pre-prepared HTML code structure for your web page.

Drag and drop the design file coffeebar-website.sketch or the design file of your choice to your new project in Avocode.

Click on the file to display all the artboards associated with the design. If you’re using our sample Sketch design, you will see one artboard. Double click on the artboard to open up the design file.

At this point, you should now have:

  • The index.html file opened in your browser.
  • The index.html file opened in your text editor.
  • The coffeebar.sketch file opened in Avocode

Great job! Now, let’s go back to Avocode and go over a few important basics that will help you get up and running quickly.

Step 2: Before you start coding, get to know the Avocode UI

Avocode is designed to be easy and intuitive (especially if you’re familiar with other design tools), but it’s always helpful to get a quick tour to make sure you get the most out of your experience.

When you open an Avocode project, you will automatically be in Inspect mode. The Avocode UI is divided into four main sections:

  1. Tool panel on the left (with an expandable layer panel).
  2. Design canvas in the middle where your design appears.
  3. Inspector panel on the right for details about selected layers.
  4. A top bar with breadcrumbs and the option to download or share the design.

The tool panel comes with the following tools:

  • Hand tool (press h) - Move an image or canvas around by clicking and dragging.
  • Select tool (press v) - Select single or multiple layers in your artboard. You can double click on a layer to export it.
  • Measure tool (press r) - Accurately measure between layers and keep a close eye on dimensions.
  • Color tool (press i) - Pick colors from the image (Hint: Click and hover your mouse to get individual pixel colors).
  • Slice tool (press s) - Create individual or multiple slices from an image or design.

If you look at the diagram below, you'll see the following:

  1. The expandable layer panel has the same layer structure as the Sketch file, including groups, layers, paths, and text layers.
  2. You can select multiple layers, export them, or hide them if you need to inspect something below.
  1. The contextual inspector panel in Avocode provides an easy way for developers to view and extract the styles and code from specific page elements, including colors, font typography, positioning, etc. You can view this information by clicking on a desired layer. For instance, when you click on an image you will see a preview of the image asset and its dimensions.

The panel also supports two different style formats: list and code. You can toggle between the two options right from the Styles tab in the inspector panel.

The code formatting style offers an easy way to copy and paste — copy individual values and entire lines of code with one click or simply click Copy All to copy the entire code snippet. You can also switch between code languages (e.g. Sass, React, Less, Swift, Android, etc.) or further customize code settings.

You can import or create variables (e.g. colors, fonts, gradients, or dimensions) to customize your code output across all designs in a project. Matching values are instantly replaced by the new variable.

My personal PRO tip: Do you need a fast way to inspect shared layer styles? Click outside of the canvas or select the artboard in the layer panel to view all the global design styles shared by that artboard. It lists all the fonts, font sizes, and colors that appear in that design board.

At the bottom of the inspector panel, you’ll find the ability to adjust the zoom, set design settings (e.g. design scale, measure units, or color format) and also view Guides.

In Guides, you will find the following options:

  • Grid
  • Layout
  • Designer’s guides (static guides)
  • My guides (dynamic guides)

These different options allow you to view a layout grid or regular grid in your design file, depending on what type of web page you are working on (i.e. layout grid is helpful when coding a responsive design).

The Designer’s guides are static guides created in the design file that are synced in Avocode when they are uploaded.

On the other hand, My guides are dynamic guides which you can add directly in the project.

Are you still with me? Okay, let’s move on to creating your web page.

Step 3: Add text and image content to your web page

Now that you know your way around Avocode, it’s time to add content to your web page. Go to the index.html file in your preferred text editor.

We will start by adding the navigation copy to the HTML file. Go to your Coffeebar artboard in Avocode and copy the text layer “Coffeebar” from the Logo group and paste it to the corresponding div in the index.html file (

tags for logo.svg).

Pro tip: Double click the text directly in the canvas to automatically copy the text layer.

Copy and paste all the rest of the text from your design file into the index.html file. Be sure to save all of your changes in the text editor!

Now, let’s add some images.

One of my favorite Avocode time-saving features is the ability to export layers automatically without a designer having to mark them as “Make Exportable” in Sketch. All layers are exportable and you’re even able to choose different scales and formats for each asset.

Here’s how to export an asset:

  • Select a layer or group of layers in the layers panel and hit the Export button in the inspector panel.
  • Select a layer or group of layers directly on the canvas and hit the Export button.

This will open the Export assets window where you can select resolution, image format, and even add multiple variants of the same asset.

Pro tip: You can also double click a vector or bitmap layer to export it.

Make sense? Let’s give it a try.

First, double click the kettle image (kettle.png) and export it to your web-with-avocode folder.

Now, let’s try selecting multiple layers.

Manually select the coffee cup logo on your canvas or select the layer group in the layer panel and export to your web-with-avocode folder.

Want to export multiple layers as individual images? No problem.

Select all three social media icons at the bottom of the page and hit the Export button.

Uncheck the box next to Merge layers and rename each layer as the following:

  • Twitter = icon-tw
  • Facebook = icon-fb
  • Youtube = icon-yt

Change the image format to SVG and export them to your web-with-avocode folder.

Now, refresh your page.

Step 4: Let’s style the web content with CSS classes, Flexbox, BEM methodology, and REM

By now, your web page has all the copy and images in place, but it still doesn’t look like the final design — the background color is missing, the font family and font sizes are all wrong, and all the page elements are all squished together. This is where CSS comes in.

Before we go any further, I'll go through what a CSS class is, how to create one, and a few other important basics that will be helpful for creating your CSS stylesheet. If this is information you don’t need to cover, feel free to jump ahead to the next step.

How to use CSS selectors?

CSS defines the styling of an HTML element by using selectors to define what you want to style. CSS selectors can range from simple HTML elements based on the name or id (for example, p for all paragraph

tags) to attribute selectors based on classes. In this step, we will be focusing HTML elements with a specific class attribute — or specific CSS class.

CSS class selectors are a period (.) character followed by the class attribute — for example, .navbar. CSS selectors are used to select all page elements with that class attribute and link them to their corresponding style rules in your stylesheet.

Let’s give it a try. You’ll need to create a new .css file in your text editor called main.css.

In this example, we’ll use our HTML document index.html to help us name our CSS selectors.

The first class that is at the top of your HTML file is

, so we’ll take those two classes and define them in the style sheet.

.wrapper {

}

.flexbox {

}

Tip: Normalize your CSS stylesheet

Your html elements can be displayed differently in different browsers. To prevent that and make sure that they always display exactly as you styled them, there is a nifty file, called normalize.css.

Download the CSS file here and save it as normalize.css in the folder with other files for this project (now that is the index.html and main.css).

Once you’ve done that, you need to import it to your HTML document.

Navigate to the tag and past in:

<link rel="stylesheet" type="text/css" media="screen" href="normalize.css" />

Also make sure it’s above your main.css file link, because:

  1. normalize.css file normalizes all styles
  2. main.css then defines the styles you want to apply.

Now you can proceed while being sure your are the one who defines the looks of your site - in all browsers.

Moving on to Flexbox

Let’s turn our attention to the second CSS selector we added to our stylesheet.

The CSS Flexbox Layout (commonly known as Flexbox) is a web layout model that provides an efficient way to lay out, align, and distribute space among items in a container, even in cases where their size is unknown or dynamic.

Flexbox allows a container to alter the shape and order of responsive items to best fill a space without using float or positioning. This model works well for building responsive layouts as it’s easy to learn and supported by all modern browsers.

Here’s a quick overview of common flexbox terminology according to the official WC3 specification for Flexbox:

Flexbox terminology diagram from W3C specification.

  • main-axis – The main axis of a flex container is the primary axis along which flex items are laid out. The direction is based on the flex-direction property.
  • main-start | main-end – The flex items are placed within the container starting on the main-start side and going toward the main-end side.
  • main size – The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension.
  • cross axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
  • cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
  • cross size – The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

In particular, the two axes — the main axis and the cross axis — are worth understanding from the beginning. Everything in flexbox refers back to these axes.

TIP: To learn more about the Flexbox Layout, the official WC3 Flexbox specification and this guide from CSS-Tricks are great resources to check out.

Now, let’s go back to the main.css file:

  1. Add the property display: flex to the .flexbox selector in your stylesheet to create a flex container.
  2. Define the main axis using the property flex-direction, which has four possible values:
    • row
    • row-reverse
    • column
    • column-reverse

Based on our Coffeebar web design, we will need to use column to set our main axis from the top of the page to the bottom. Go to the .wrapper selector in your stylesheet and add the following property: flex-direction: column. While you’re there, let’s also add min-height: 100% to fill the entire area of your browser.

  1. Now, let’s center all of our items in the containers. If you go to index.html, you will see the class align-center. In the main.css, add the selector .align-center and add the following property: align-items: center.

Your stylesheet should now look like this:

.wrapper {
  flex-direction: column;
  min-height: 100%
}

.flexbox {
  display: flex;
}

.align-center {
  align-items: center;
}

Keep your classes organized with BEM

When referring to our sample HTML file, you may notice that I am using classes like contentright-column. Naming methodologies are extremely helpful for maintaining large codebases as well as making it easier for developers to work on projects together. This keeps classes generically named, clean, and as easy to organize as possible.

The Block, Element, Modifier methodology (commonly known as BEM) is a naming convention for HTML and CSS classes. The goal is to help developers keep track of the relationship between the HTML and CSS in a project.

BEM follows this basic structure:

.block

.block__element

.block--modifier

.block__element--modifier

According to BEM, the block is a standalone entity that is meaningful on its own (e.g. a button). This block is considered to be a parent. A child item, or an element, is part of a block that has no standalone meaning and can be placed inside the block (e.g. a button price). Finally, a modifier denotes the theme or style of a block or an element (e.g. the color yellow). Modifiers make it easier to make changes to appearance or behavior without accidentally affecting a completely unrelated module.

For more information about how BEM works and its naming rules, this is a great introduction.

Use REM for font sizes

Before we continue to our last step, the last thing we’ll do is set our default font size in our stylesheet. To do this, we will set our font size using REM units. If you’re familiar with anything to do with web design, then this is not a new term for you. If you’re not, REMs are used to set font sizes based on the font size of the root HTML element. The main advantage to using REMs instead of pixels for font sizes is accessibility.

For example, let’s say a website visitor struggles to read something in the browser, he or she might adjust the font size of their browser to scale font sizes accordingly. However, if a website explicitly sets font sizes in pixels, they will not scale — so, paragraphs set at 16px will always be 16px.

Let’s hop over to our main.css file again and do the following:

  • Set the HTML font size at 10px using the property font-size: 10px.
  • Set the .wrapper font size to 12px using the property font-size: 12rem.
html {
  font-size: 10px;
}

.wrapper {
  font-size: 1.2rem;
  flex-direction: column;
  min-height: 100%
}

*My personal PRO tip: Change the units of your text layers in Avocode to make it easier for you to export code. Select a text layer, click on the cog icon to open Code Settings, and change the unit to rem and the REM base value to 10 under Advanced Settings. It will be automatically saved.*

As the final part of our step, we will add a CSS reset to our stylesheet to set default margins and paddings to ensure our page looks the same across all web browsers.

To do this, add a () universal selector at the top of *main.css with the following properties:

* {
  margin: 0;
  padding: 0;
}

Additionally, you need to make sure that paddings inside containers don’t bloat them. Generally if you added a padding 20px to a 200px wide element, the container would bloat and would become 240px wide (with 20px on each side). If you’d like to prevent that, you need to add this special selector atop your CSS sheet.

*, *:before, *:after {
  box-sizing: border-box;
}

Now when you add a 20px padding to a 200px wide element, the element will be 160px wide, because a 20px padding was added all around - inside the original container.

Save your changes and refresh your web page.

Ready? Let’s move on to our final step.

Step 5: Copy styles from Avocode and make your page beautiful

Now let’s add the rest of the CSS selectors to define styles based on the index.html document.

Remember — every CSS selector defines how a certain HTML element will look. I usually define all of my selectors and then "call" them in the HTML tags.

For example, the container that places the Kettle image in a certain position on the left is called <div>. So, this div needs to use a class called content__left-column.

In other words, the class will be defined like this:

.content__left-column {
  display: block;
  margin: 0 50px 0 0;
}

And the HTML tag will be connected to it like this:

<div class="content__left-column">

To fully complete your stylesheet, you will style all the HTML page elements. Here's a hint about all the classes your stylesheet should include:

*
html
html, body
body
a
.wrapper
.flexbox
.flex-space-between
.align-center
.container
.navbar
.navbar h1
.right-column
.navbar__navigation a
.navbar__navigation .active
.order-btn
.order-btn a
.order-btn--stroke
.content
.content__left-column
.content__right-column
.content__right-column h1
.content__right-column p
.content__order
.content__order p
.content__order-choice
.circles
.circle
.circle--white
.circle--spaceblack
.circle--yellow
.circle--blue
.footer
.footer__social a
.footer p

Now, it’s time to put everything we’ve learned together and start adding in your CSS properties.

The fastest way to add CSS properties to your classes is to find the corresponding layer in your design in Avocode and copy all the generated code for a layer (or single or multiple styles) and paste them directly into your text editor.

For example, here are the styles listed for .navbar:

Click COPY ALL or select only the styles you need (for example, you do not need the width of the navigation). The code will be copied to your clipboard and you can paste it directly into your CSS stylesheet.

To find additional widths, margins, paddings, and colors, use the Measure tool and Color tool from your left panel.

My personal PRO tip: The inspector panel shows native CSS code as the default language option. However, Avocode also outputs pure standards-based web languages, such as CSS in JS, Less, Saas, SCSS, Stylus, Styled Components. For mobile projects, you can also output For mobile projects, you can also select Android, Swift, and React Native.

To change the language, click the cog icon in the inspector panel and select your preferred language. You can also go to Code Settings for heavier customization or add your own variables or replace rules to customize your code export templates even more.

Step 6: Make it responsive and mobile friendly

It’s time for media queries — these additional styling CSS properties will make your web content wrap depending on the width of the device screen.

Using media queries, you can specify how each element will appear in a specific resolution. Let’s take a look.

Since the first <div> in the body is using the .container class, we need to add a bit of padding on the sides so the Coffeebar logo and the button element in the header and footer aren't so close to the sides.

Here is how you add right and left padding to the .container class:

.container {
  max-width: 1070px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  margin: auto;
}

Looks a lot better now, right?

Next, we will make the design view smaller — the same way it would look on a mobile screen. You'll notice that the items in the menu are too close to each other. To fix this, you will add default spacing between those items and a default (minimum) font-size.

.navbar__navigation a {
  color: #000000;
  font-size: 16px;
  margin-right: 16px;
  display: inline-flex;
}

Now, try expanding the view so it is wider. When the width is above 480px, you will set the font-size to 18px.

@media (min-width: 480px) {
  .navbar__navigation a {
    font-size: 18px;
  }
}

Looking good!

Another element that needs to be wrapped on smaller screens is the position of the Order button.

First, make sure the circles (colors of the kettle) are aligned to the left...

.circles {
  margin: 0 30px 0 0;
}

@media (max-width: 991px) {
  .circles {
    margin: 0 0 30px;
  }
}

... and that the button wraps below the circles at a certain width.

@media (max-width: 991px) {
  .content__order-choice {
    flex-direction: column;
    align-items: flex-start;
  }
}

When people use your website on a mobile device, wrapping elements is not the only way to optimize responsively. Some elements simply become redundant, and you can hide them.

Tip: It’s best if the responsive rules are defined in the design phase. However, sometimes the process is not perfect and you — as the coder — only receive one aspect ratio of the design. In that case, discuss which content can't be hidden or moved around with the copywriters and designers in your team so you don’t damage the information architecture.

Based on our example design, I think it makes sense to hide the button in the navigation and the image on mobile screens.

To remove the navigation button on mobile screens, you will create this media query:

@media (max-width: 767px) {
  .navbar .order-btn {
    display: none;
  }
}

To make the primary button visible in the first viewport on mobile, we will also hide the image by adding the following:

.content__left-column {
  display: none;
}

@media (min-width: 767px) {
  .content__left-column {
    display: block;
  }
}

The final thing to consider the footer. To make sure the spacing between each element (e.g. social media icons) is correct as the resolution changes, we’ll add this rule:

.footer__social a + a {
  margin-left: 30px;
  display: inline-flex;
}

The a + a is a special CSS rule that defines the styles for every "neighbouring" element. In this case, every <a> element following the first <a> element (i.e. in our code). So, the rule will be applied to the second and third line:

<a href="" target="_blank"><img alt="twitter" src="icon-tw.svg" /></a>
<a href="" target="_blank"><img alt="facebook" src="icon-fb.svg" /></a>
<a href="" target="_blank"><img alt="youtube" src="icon-yt.svg" /></a>

You can also choose to center the footer elements when the resolution is below 480px width.

@media (max-width: 480px) {
  .footer .container {
    flex-direction: column;
    align-items: center;
  }
}

And that’s it — now you can rest assured your web page content will look good on any device will look fine on all types of, regardless of the screen size. Media queries are a big topic, so I'd recommend learning more about responsive design on your own.

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.

Bonus tip: Code even faster with Avocode's text editor integrations (especially if you only have one monitor)

At some point, you might want to view designs side by side with your files and get CSS style suggestions from selected layers as you code them!

To do that, integrate Avocode with your text editor using the Visual Studio Code integration or Atom integration to inspect Sketch, XD, PSD, AI, and Figma designs in your text editor and get code suggestions from layer styles.

If you are not sure exactly how to complete the main.css stylesheet, we’ll email it to you for free.

Once your stylesheet is ready, save all the changes in the text editor and refresh the web page in your browser.

Congratulations! You just coded a website from a design file without opening anything other than a text editor and a browser.

It’s time to deploy your website and go live

While this tutorial is mainly focused on coding a website, it would be a shame not to publish it and show it off!

You might think that you need paid hosting and a registered domain to publish a website. That's one way to do it, but there are even simpler options to bring your website to life.

Since our sample project is so simple, I’ll show you an easy way to deploy it — it’s called Surge (plus, I love their walrus logo 😅).

Open the command-line tool on your computer and type:

npm install --global surge

Then type:

cd

… and drag and drop the folder with your index.html file to your terminal to navigate to that folder.

Up next, type in:

surge

Your screen will now prompt you to add an email address and a password. This will create a basic Surge account, which generates a shareable URL on its domain.

You will then need to confirm your email (simply click the link in the email verification from Surge).

Once you see the project directory, hit Enter to confirm — and your website will be published and online immediately.

Once your website has been deployed, you can click on the link Surge created and it with anyone you want.

Check out our sample website here: http://daffy-action.surge.sh/

If you want to learn how to edit your content, deploy on a custom domain, and more—I suggest taking a look at Surge or this Codecademy course.

Coding faster is only half the battle — Avocode speeds up your design process, too

So, you just learned how to code a web design faster. Congratulations!

But if I've learned anything from working in a team, coding a website design is only a single step in the entire process. Web design is challenging, and there are multiple steps that have to be completed before you start building a design.

Things like:

  • Prototyping the user journey
  • Sharing design feedback
  • Editing copy
  • And many more...

If you're a coder, you probably find yourself collaborating with other people involved in the entire design process that need to do various things with design files. That’s where Avocode really shines. Simply put, it centralizes all design collaboration workflows—think of it as a hub where anyone who touches design files can get their jobs done.

To sum it up, Avocode helps you with:

Accessing design files

Open Sketch, Adobe XD, Figma, Illustrator, and Photoshop documents in the browser — on any operating system without design tools. You can even click and export layers!

Collaboration and design critiques

Bring teams, clients, and contractors together to look at any design version. Avocode allows all project members to comment, annotate, or start a discussion directly on top of designs.

Designing together with other Sketch designers

If you’ve ever edited a Sketch file with someone else, you're probably already familiar with how time-consuming the entire process can be. If you're tired of people overwriting Sketch designs, Avocode makes it effortless for multiple team members to share and work together on a single Sketch file.

Rapid-prototyping of user flows

Today’s product and design teams need one place to collaborate, test, and innovate. Avocode allows teams to create, edit, and present user flows, diagrams, and interactive prototypes without the need to use other design tools.

Seamless design hand-off & faster coding

You already know this from experience! Avocode lets developers open and inspect design files without having to invest in additional tools, automatically generate useful code to avoid manually coding stylesheets from scratch, and export image assets directly from design files.

Better design management

As projects develop and teams grow, it’s important to keep design files organized, synced, and backed up. Avocode keeps a history of all design files to ensure that everyone on the team knows which is the latest version and has access to all design iterations.

🥑

Would you like to compare your result with our coded website? Get the completed HTML and CSS files with all the assets in your inbox for free.

Did you like this article? Spread the word!