CodeNewbie Community 🌱

Cover image for Tool that helps you build your Webpage 10x Faster
Louiee Smith
Louiee Smith

Posted on

Tool that helps you build your Webpage 10x Faster

As a Webpage Developer, especially Newbie, we always seeking a way to improve our development workflow faster & smoother. But ever since pxCode released, the desire has been fulfilled and the problems have been solved.

From 2020, pxCode started it’s service, providing a 10x FASTER workflow. But how do they achieve that? Because it uses a brand-new coding way β€” Visual Programming, which is the reason why they can achieve 10–20x productivity in terms of hand-coding.

Here's some step-by-step explanation below, and a Youtube tutorial in the end of the article:

Step 1: Original Design Blueprint

Alt Text
Import your Sketch Design File(Support Figma soon), and you'll see all the components on the editing Canva.

Step 2: Group the content

Alt Text
First, you should observe and select the content that should be [Group] together. In this case, the area I highlighted.

Step 3: Convert into Bootstrap Row

Alt Text
For some content, you can convert it into Bootstrap, by clicking the icon on the Top Menu Bar. So that the content can transform into different Layout Pattern when you preview it in different Resolutions.

Step 4: Adjust Bootstrap Grid

Alt Text
Now you have converted the design into Bootstrap. Now on the right side Inspector, you can see there's a Bootstrap Grid Section. On Bootstrap Grid, you can adjust the number on different Resolutions, so that the Layout pattern can be fit in different Resolutions.

Step 5: Adjust Responsive Breakpoint Overwrite

Alt Text
On this section, you can adjust the border width of each content, so that the content can have the best layout looking under different Resolutions.

Step 6: No more Hand-Coding

Alt Text
Now when you have done with all the detail adjustment, you can check on the code of the Design, by clicking [Partial Code] on the Top Right of Inspector. By pointing your mouse on specific line of code, pxCode will highlight the matching content.

Step 7: Preview & QR Code

Alt Text
After checking the Code, you can click on the [Export] button on the Top Right Menu Bar, and it will automatically open up a new tab. On the new tab, you can copy the link, send it to friends to share the preview. Besides, you can click on the QR Code button on the Bottom Left, scan the code with your phone and preview it on your phone.

Through this Landing Page example, you now learned how pxCode can use to build a Responsive Page within 10 minutes(as the YouTube video). Feel free to comment your question down below!


Try out pxCode on: https://www.pxcode.io/

Top comments (0)