Introduction

Hello, devs do you find it hard to build web pages within a short period? Are you still using the boring process of writing Html & CSS code to develop a fully responsive and UI-friendly web page? Do you spend hours just to make a single web page responsive and mobile-friendly? There is good news! In the article, I will demonstrate how you can easily build a fully customizable product landing page within 5 minutes that too using a vs code extension named speedwapp the best part you don't need to type the full code and follow the boring process. There is no such prerequisite for this article a simple knowledge of HTML & CSS is appreciated just make sure that you have visual studio code installed on your computer and if not you can download it from here.

A bit about speedwapp vs code extension

Speedwapp is an amazing website builder that allows you to build beautiful landing pages directly from their website or you can your their free vs code extension which will demonstrate here.

Adding the seedwapp extension to your vscode

• Quickly open the visual studio code editor on your computer and navigate to the extensions section. If you are using a windows machine press ctrl+shift+x . Now in the search bar search for speedwapp and click on the install button

  

• Once you have installed the extension you will be prompted to a login page so put your credentials there or you can also sign up if you don't have an account.

• Now press Ctrl+K N or Cmd+K N to create a new page using speedwapp

  

• click on the + symbol to add pre-defined templates or html code blocks to your page. I will be using a pre-defined template and then gonna edit it on my own

  

  .

• It looks a bit like this after I have imported one. Now let's add a few more sections and then we will edit it.

  

• There in the bottom, you will see a small plus sign to add a new component so click on that and add a few more just like shown in the image below

  

• Now let's edit it. So first, I want to change the background image of the first component and to do so click on the image you will see a panel on the left and there you can update it

  

• Now we got a pop-up like this and I will be using the image links so head over to unsplash and pick an image of your choice then copy the image URL and paste it into the link section and click on upload.

  

• Now I want to change the font style and size of the services paragraph so click on that component and in the above you will see an option to select a font and size once you enter the values where the changes will be live.

  

• Now let's say I want to edit the content of the below section so click on the text and write whatever you want

  

• Now let's add links to these checkout buttons so click on them and in the right side panel click on the properties and there select Link under the HTML tag section and finally, paste your links there

  

Now let's edit the last section I want the button colour to be green so will click on that and side on styles on the left and there will change the button style to success.

So finally our landing page is ready now let's deploy it to netlify.

Exporting code & customizations

• Click on preview changes at the top and then click on view code

  

  Here you will see the full code of the beautiful webpage which we just made using speedwapp vs code extension. Now click on copy to workspace

  

• Now you will see the automatically generated code files

  

  Now move the code to a new folder and upload it to a GitHub repository

• Once you are done uploading the code head over to your netlify dashboard and click on add a site select the existing project and choose GitHub provider

  

• Now select your repository and click on deploy site

  

  Check out my site here https://speedwaplanding.netlify.app/

  GitHub Repository https://github.com/kumar-kalyan/speedwapp-landingpage

  Conclusion

  Congratulations you have successfully learned to build beautiful and responsive landing pages directly from vs code without writing much code. Feel free to reach me for any queries or simply visit speedwapp website and make sure to share this article with your peers and let me know how much you loved this new tool