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
extensionssection. If you are using a windows machine press
ctrl+shift+x. Now in the search bar search for
speedwappand click on the
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.
Cmd+K Nto 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 fontand
sizeonce 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
Linkunder 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
preview changesat the top and then click on
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
Check out my site here https://speedwaplanding.netlify.app/
GitHub Repository https://github.com/kumar-kalyan/speedwapp-landingpage
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
Top comments (0)