Skip to main content

Command Palette

Search for a command to run...

Hosting your Site on W3School Spaces

Learn how to host your website on W3School without stress

Updated
β€’5 min read
Hosting your Site on W3School Spaces
A
Software engineer and developer educator with over four years of experience building production-grade digital products for platforms serving millions of developers globally. Software engineer at Hashnode & Bug0

Yes, you read that well, lately, the w3school team have been making a huge upgrade to their website, from improving their UI designs to creating more premium courses with certificates, and now you can host your static websites on their platform for free 😍, isn't that cool of them 😎.

You will learn how to host your own website on W3School. You might want to check out my own space on w3school Here before you continue on this journey to creating your own space.

Prerequisite

Trust me when I say w3school is one of the best sites you can easily get programming knowledge from, so the good people working at w3school have made it easier for both pros and beginners to get their own space setup.

But to be more realistic you must have the following ready for your own space.

  1. Your HTML Code (of course)
  2. CSS Code (optional -HTML might be ugly though)
  3. JAVASCRIPT Code (optional)

If you have at least an HTML code in your .html file then you're good to go.


Without any further ado!!!


πŸ“’ Hey unclebigbay get straight to the point


Let's get started πŸ‘‡


1. Creating W3School Profile Account

Before you have access to this feature on the W3School site, you must have a profile account on their website.

  • Proceed to create your personal profile on W3school with just your email and password 🀭.

frame_generic_light (6).png

  • Fill in the next form with your names and click on submit, a mail containing your confirmation link will be sent to your registered email, click on it and your account should be verified at a glance πŸ‘‡.

frame_generic_light (7).png

  • Click on the return to login button and login with your registered credentials on the login page, you should be redirected to your dashboard, which will look something like below πŸ‘‡

frame_generic_light (8).png

  • Click on the Spaces button πŸ‘†, this will redirect you to the W3School spaces landing page, where we will get you started.

frame_generic_light (9).png

  • Click on any of the highlighted buttons to create your own space πŸ‘‡.

frame_generic_light (10).png

  • You can select an option to either choose from W3School web templates or to create a custom webpage yourself, we will be exploring the custom option because we know HTML (kidding) πŸ˜†.

  • Select the Start with a blank page option and click on continue. Don't do it later πŸ”₯πŸ”₯πŸ”₯

frame_generic_light (11).png


2. Naming your Space (URL).

Note that your space name (website) will be accessible on the internet through the custom URL for instance your-space-name.w3spaces.com

  • Click on continue when you've found a nice space name.

frame_generic_light (12).png


  • Wait a little bit for the great people of w3school to set up your space.

And Boom!!! 🌟🌟🌟 your space is ready πŸ’ƒπŸ’ƒπŸ’ƒ

frame_generic_light (13).png

From the screenshot of the space menu above,

  1. You can see your space custom domain.
  2. You can also easily monitor the number of requests from your site.
  3. View the number of people visiting your website (space).
  4. Know the number of data served.
  5. Know the number of files your space contains.
  6. Know the size of your file and finally
  7. You might want to delete your space

  • Visit your custom domain you should have this displayed πŸ‘‡

frame_generic_light (14).png

W3School also provides us with multiple options to set up webpages on our space, available options include πŸ‘‡

  1. Making use of the default HTML, CSS, and javascript files (you see why you only need the code).
  2. You can choose to create new files on your dashboard without leaving your browser.
  3. You can choose to upload your own HTML, CSS, or JavaScript files.

In this article, we will be making use of the 1st option, which is to make use of the default files w3school has provided for us.


1. Click on the code icon to edit your HTML file πŸ‘‡

frame_generic_light (16).png

  • W3School is amazing, your editor should look like below πŸ‘‡

frame_generic_light (17).png

  • You can save and preview your webpage in another tab πŸ‘‡

frame_generic_light (18).png

All you need to do is refresh the preview page each time you save your work.

2. Write some HTML, save and refresh the preview tabπŸ‘‡

frame_generic_light.png


3. Write some style for the HTML elements

  • Click on the cancel icon at the top right to edit the CSS also.

frame_generic_light (21).png

Save your file, but don't click preview, rather, visit your custom URL to preview, this is normal

4. CSS Output

frame_generic_light (20).png


5. Write some javascript and refresh your space

frame_generic_light (22).png


Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned from this article, I will like to connect with you.

Let's connect on

My friend and I are holding a meetup every Saturday to discuss JavaScript and other programming tips and to support ourselves.

You can be a part πŸ‘‡ of the community by joining our WhatsApp group



See you in the next article. Bye Bye πŸ™‹β€β™‚οΈ

image.png

If you found this helpful and want to support my blog, you can also buy me a coffee below.

Comments (12)

Join the discussion
D
Desmond3y ago

Do you know if w3spaces supports node.js?

J

This is really cool thanks Ayodele Samuel Adebayo πŸ‘ŒπŸΌ

2
A

Glad you liked it πŸ€—, you're welcome Jamiu Adam Adebayo

A

informative, I will give it a trial

2
A

thanks πŸ™

D

Thanks for your latest info! I have started mine: https://feed.w3spaces.com/

The minimum length for our subdomain is 4 characters.

3
A

Glad you did Boo Khan Ming, and your space is really coming up nice πŸ€—.

oh, I never noticed the minimum length part.

happy you found the article helpful.

1
E

Wow! I will definitely check it out. πŸ˜ƒ

Thanks for bringing this upgrade to my attention, Ayodele Samuel Adebayo.

2
A

you're welcome Edidiong Asikpo

glad it's helpful

1
I

THanks for sharing boss. Ayodele Samuel Adebayo I don't even know i can host on w3

3
A

πŸ€—πŸ€—πŸ€—I am not a Boss oh..lolxxx

A

Wow I had no idea that they even upgrade their website with these features! I did not even know they had a new homepage because when I google stuff I just go straight to their tutorial pages πŸ˜… Really good find this is worth checking out thanks Ayodele Samuel Adebayo .

10
A

They've really doubled their game.

Andrew Baisden Glad you found it useful and thanks for the read πŸ€—

3
E

I haven't visited w3school lately but that seems like a huge upgrade! thank you Ayodele Samuel Adebayo.

2
A

Yes Eleftheria Batsou, it's a really nice upgrade, you should try it out soon 😊, thanks for reading πŸ€—

P
Patrick5y ago

Many people know about Github Pages, Vercel, Cloudflare Pages, Replit but I never knew about W3Spaces. And I’m at W3Schools everyday. Great article. πŸ‘

3
A

It's actually a new feature

Glad you found it out here 😊

1
M

Nice article bro... Instead of upload files independently can I upload a whole folder so as not to break file paths?

2
A

Uploading of folders didn't work, you can only upload files for now.

You can create a new file from the space panel and paste your code into it.

D

I notice that I couldn't upload .zip files. But in overall, it is very nice. Thanks for the latest info!

More from this blog

U

Unclebigbay's πŸš€ Blog

101 posts

Software Engineer | Open-Source Contributor | Developer Educator