DEV Community

Cover image for How to make a fully responsive website without HTML, CSS, or JavaScript
Ayesha Sahar
Ayesha Sahar

Posted on • Originally published at thecodingcompany.hashnode.dev

How to make a fully responsive website without HTML, CSS, or JavaScript

Disclaimer: This post is sponsored by Editor X.

Table of Contents

Introduction
So, what the hell is Editor X?🤔
Why should you use it?👀
Bonus Resources ;)
Conclusion


Introduction

We are living in a rather fast-paced world. Let’s be honest; it’s rather easy to be very busy. But the wise resist the temptation to get caught up in the frantic rush of everyday life. The wise are those who finish the max tasks in the least amount of time. Let's look at it in a different way. Are you a wise web developer or a designer?

Do you spend days or months making your website perfect? But did you know that the same task that takes you months to be completed can be done in days? Did you know that the same task that takes you days to be completed can be done in hours?

I know I sound crazy and you guys might think:

image.png

but YES, you can make a fully responsive yet stylish website in the least amount of time, moreover, without using any code at all. We have entered a new era of tech. The era of low code/no-code tools, to be precise.

Such a tool that will definitely charm you is Editor X!

By the way, if you already knew about Editor X, then:

4.png


So, what the hell is Editor X?🤔

image.png

It is a no-code/low-code tool that enables incredible design flexibility and allows users to control every aspect of the creation process. You can create and publish an unlimited number of sites for FREE, all you need to do is just signup! Users can upgrade to a premium plan to gain access to benefits like custom domain name registration. After getting the premium plan, users can even accept online payments through their websites.

If you want to, you can add custom code and use a powerful CMS to build data-driven sites and even complex web applications!

Sounds amazing, right?😆

P.S: Here's the website link, so go and explore it by yourself ;)

www.editorx.com/editor-x/ayesha


Why should you use it?👀

There are a lot of reasons why you should use it. I'll share some to charm you guys ;)

✨ Are you bad at design? Then choose a template and start working with it. Are you good at design? Choose a blank canvas and let those ideas come to life!

✨ You can easily change between view modes (tablet, mobile, desktop) or just resize the page with customized dimensions in order to make sure our website is totally responsive. No need to bother your friends to check whether the website is working correctly on all screen sizes or not.

✨ For each element, you can open a custom panel that gives you control over a lot of things like size, margin, padding, etc. It comes in quite handy. All options are laid out to you and YOU have complete control!

✨ You can add various components such as different design elements, pre-built sections, layout tools, text, buttons, menu, media, contact forms. These pre-made components can be further customized to your liking. Work smart, not hard😉

✨ There are also "master elements". They are essentially re-usable components. For example, we say that our footer is a master footer. If we make some changes to the footer on one page, those changes will be made everywhere. This saves a lot of time as we don't have to go to every page to make the same change. Master elements don't just have to be things like header or footer. You can just select any section and make it a master element. This makes it so modular and so scalable😆

✨ If you are currently working for a single brand or company, then good news for you! The design assets can be shared. It means that once you set your brand's typography, colors, fonts etc, you can create a design library and even share it. This also helps in maintaining consistency which is one of the key pillars of a good design. You can access this option via the main panel.

✨ We can also add moving video elements, animations to any element, and by any element, I mean it. You can literally add animations to text, videos or sections, etc.

✨ Another key feature is that once we "Publish" the site, Editor X gives us a URL through which the site can be shared with anyone. Why is it so useful? That's because if you are making a website for a client, you can just share the link with them so they can get the real feel of the website before buying or setting up a custom domain.

✨ We can scale the text or elements. For example, we set a scale that a certain heading's font size will be between 20 to 150 only. Once the screen is resized, the font size will only increase or decrease on basis of the set values.

✨ It has a grid option that is essentially similar to CSS Grids. Very handy for you all CSS folks who are good at grids, right?😏

✨ Besides, you can easily extend the functionality of your website via adding custom code!

✨ While making the website of your dreams, you can set sections (divide website in parts) and then add containers (containers will have various elements, e.g, a container can have an image that will not go beyond it's size) as well.

✨ The most important features in my opinion are the resources they provide. You wanna learn Editor X? No need to go somewhere else! Academy X is all you need to learn this awesome tool. Just like how various programming languages have their documentation, Editor X has Academy X.

Pretty cool stuff if you ask me :)


Bonus Resources ;)

Interested in Editor X? Here are some more useful links for you guys!

Editor X Community Forum - Got some questions? Ask your comrades!

Editor X Youtube Channel - This youtube channel will keep you updated on the world of Editor X ;)

Editor X Showroom - Need some inspiration? Check it out!

World of Editor X - This channel has some tips, tricks and tutorials that you definitely don't wanna miss!

I Love Editor X - It is a youtube channel made especially for advanced Editor X users.


Conclusion

In a nutshell, Editor X is approachable, scalable, and reliable. We're talking about features like CSS Grids along with JavaScript Animations in a no-code tool! But hey, if you like code, who says you can't use it? Just add some custom code to spice up your websites ;)

Moreover, it can be used by everyone. I mean, even if someone has no experience in coding at all, they can build a fully responsive website. So, hey designers, you don't need to rely on developers to make your designs come to life! Go ahead and experiment by yourself. That's how versatile this tool is.


Let's connect!

Twitter

Github

Discussion (5)

Collapse
joshwcorbett profile image
Josh Corbett

Editor X and Wix are terrible options for creating websites. They're limited for features, generating spaghetti code that's messy, slow and bad for SEO.

You're sharing your affiliate link with the wrong group of people, we're developers... not lazy designers.

Collapse
iayeshasahar profile image
Ayesha Sahar Author

Even though this was a sponsored post, I tried things out before sharing it. For me, it worked pretty good. Also, you don't have to absolutely use these for "actual websites" even though you can. There are many uses for such tools as I've mentioned in the article as well. You could just be quick and use your Editor X website to give your client a feel of how the actual website would work or designers could make their own websites. Low-code and no-code enthusiasts could use it. Even a newbie dev could start with these tools.

I understand that not everything is for everyone and you might have a difference of opinion. If you like it, use it. If not, then just don't :)

Peace out✌

Collapse
dmueller78 profile image
Dave Mueller

Right. I usually give these trendy "code free" website builders a brief look just to stay in touch with what's out there that I'm likely to encounter someone trying to get away from. :D

Collapse
svgatorapp profile image
SVGator

Editor X is a time-saver for sure 🙌

Collapse
iayeshasahar profile image
Ayesha Sahar Author

It sure is!