In this article, I’ll show you how you can build a landing page for your product or startup quickly by copy-paste in 1 or 2 hours and without using page builders or having to hire someone.
Important
Before we start, you need to know that this method requires having a basic knowledge of HTML & CSS (just basic knowledge, not an expert).
First, open your code editor like Sublime, Dreamweaver, VSCode, etc, and create two files: index.html and app.css.
Next, go to frontendor.com/preview where you can preview more than 100+ reusable HTML blocks.
From there, go to the developer guide, copy the starter HTML code, and paste it to your index file. Then, copy the starter CSS and paste it to the app.css file.
🤘 Now, we are ready to start using these blocks.
Just click on copy HTML and paste it in the body of your HTML code, then copy CSS the same way and paste it to your app.css file.
Now if you open the index.html file with Chrome, you’ll see your web page.
Keep copying and pasting blocks the same way until you finish all the necessary sections.
Finally, we’ll start customizing colors and backgrounds.
Go to the beginning of your app.css file, and you’ll find CSS variables to change your colors according to your needs. If you need to learn more about CSS variables, just type on Youtube CSS variables and you’ll find free tutorials there.
Editing your text is easy, just search for what you want and edit freely. The same thing applies to links and buttons.
Once you are finished with your needs, you can drag and drop it to Netlify.
😎 That’s all, you have successfully built and deployed a landing page.
If you notice any issues in Frontendor, you can check out our developer guide, watch our tutorials, or contact us through the live chat. You can also find us on Twitter.
Don’t forget to visit frontendor.com for more info.
Top comments (0)