Create a Website Without Code
Published: 2022-01-20 15:44:09

Convert  your  designs  into  responsive,  live  websites  automatically.  Add  interactions,  motion graphics, video, audio *without writing any code*. Connect to data and content source and build fully functioning websites, landing pages, HTML emails, product pages, or business applications easily. There are many platforms that allows you to build responsive websites without a single line of code. One such platform is [Quest](https://quest.ai)
With Quest, anyone can build what they envision without being constrained by their engineering bandwidth. 
 
## How to start 

Go to quest.ai. Then signup for free using *Build For Free* button. Make sure to select *The new quest* tile during sign up. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6kxxtltln733cbg2hcb.jpeg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkdyzok6hgv0tz7qek90.jpeg)

After signup, you’ll be directed to a page shown below 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbrdwgtudojkticd34b4.jpeg)

Quest is more of like a web hosting. For design of the web page, you can use either Adobe XD or *Figma.* Select the *Quest plugin for Figma* on top middle of the page. Now you will be directed to Figma plugin page as shown below. 

- Click on the *Download* button 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axf8nugs8ujj0ajsrhva.jpeg)

and you will be directed to a page where  you  can  select  *Install*  for installing the plugin.  

- You will be asked to sign up to Figma. Complete the process 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixvlma3pmmf1klgbvi98.jpeg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7m7kea07249xt1xfk57.jpeg)
  
After login you will be directed to a page where you can start creating your design by selecting *New design file. To learn more about how to design in Figma, use **resource* section at the bottom of the Figma home page or *help.figma.com* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hftqgn9wreef4oj9esc.jpeg)

After completing the design in Figma, you need to connect Figma and Quest using a plugin. For that go to plugin option on the dropdown menu and select *manage plugin* under *plugins.*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsvln9hhffrokm1y262d.jpeg)

- Click on the *Browse plugin on community* and search for *Quest*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc74md8ym0c9a2s1rx3i.jpeg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2z6tngzy6rtn4sgvmn2.jpeg)

Now, go back to the design space and select Quest under plugin. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxvifbr7ihrwcgo0n1ay.jpeg)
 
 This will show up a box as shown below. Give a name for the design and select the layers that has to be imported to quest and click export. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ie0lbep6sl6aifwjh41.jpeg)

You can now see you design in quest work window just by selecting *View in Quest*. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fykyh89ye0lbznkai8f.jpeg)

Inside Quest you can make you design adjustable to different screen sizes like laptops, tablets, smartphones etc. You can also launch your design into a custom domain if you had bought one already. 

To know more on how to work with *Quest*  visit the resource section at the top of Quest homepage or visit **[www.quest.ai/docs](www.quest.ai/docs)** 

 
 <pre>
    ❤️ <a href="https:ieeemace.org">Website</a>  |  📷<a href="https://www.instagram.com/ieeemace">Instagram </a>  |  💼<a href="https://in.linkedin.com/company/ieeemace">LinkedIn</a>   |  🐥<a href="https://twitter.com/ieeemace">Twitter</a>    
</pre>