Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

Non Web Developers

A page for not web developers

PreviousWeb DevelopersNextDebugging

Last updated 5 years ago

Was this helpful?

Whatever your background, you can make a web page or a web site with some education and some basic skills. But there are a few things about creating web pages to keep in mind.

Creating a web page or web site is in a rough way a 3 step process.

Design the page > Write the code > Publish it online

In the design world and in Adobe XD what you see is what you get or . In the development world what you get is what you see WYGIWYS.

In other words, the design software accurately reflects the design (at least on screen) but in development, the software or web page is the sum of many parts. Part code, part design, part browser, part internet, etc and they do not all come together in expected way.

Because designers of WYSIWYG applications typically have to account for a variety of different output devices, each of which has different capabilities, there are a number of problems that must be solved in each implementation. These can be seen as tradeoffs between multiple design goals, and hence applications that use different solutions may be suitable for different purposes.

Assembling all those parts together often requires some knowledge of all of those fields of technology that make up the end product.

To help with that many tools in the software world will report back to you any problems that it encounters as you are building your project.

It's a way the computer (the compiler or the browser) replies back to you based on what you gave it.

Consider a robot that makes a cake. It requires that you give it those ingredients it needs in the order it needs them.

In the process of creating a cake with the robot the robot has a set of tasks that it does, some preprogrammed and you have a set of tasks that you do.

When you assemble all the parts together you have a web page or an app.

It is rare that you won't have any problems or issues in the process. The problems views or console will list out any of these issues.

Look for them and read them. Web Export lists any issues in it's own console after you export.

Web Export will do most of the work for you and over time improve the quality of that work but it's has been designed to be flexible enough to allow you to add to it and modify it.

With some practice and education you will be able to author and build your own web applications.

In fact, in coding environment there is often a Problems view or a that shows you any problems in your code.

The process of finding and fixing bugs is called .

Use the that are built into modern day browsers, the problems views and resources like , , the Velara 3 discussion , and this to fix and address them.

Whether you are new to web development or a hobbyist read on MDN.

console
debugging
Web Developer tools
Lynda.com
StackOverflow
forums
guide
Getting Started with the Web
WYSIWIG
WYSIWYGWikipedia
Debugging HTML - Learn web development | MDN
Getting started with the Web - Learn web development | MDN
Logo
What are browser developer tools? - Learn web development | MDN
Logo
Logo
Logo