Where can I practice writting HTML and CSS that I just learned on Codecademy?

Good Evening Fellow Code Learners,
I would like to know where I can write the code and than see the final product.

I am using Rasberry Pi 3B with a Jessie Debian Operating System and installed google chrome (I think) for the Font exercise.

Thank You very much ahead of time for taking time out of your busy day to answer my question.
Sincerely,
John B

1 Like

If you write the code on any text editor, then save the file as plaintext and using the .html extension, an HTML file will be saved to your laptop. You should then be able to open that in Chrome (or your default browser) by double clicking on it.

2 Likes

Good Evening Codeneutrino,
Thank you very much for helping me will go download sublime. I will get back to you to give you an update
or
ask for more help if that is ok.
Sincerely
John B

1 Like

Like codeneutrino said, you can write your own .html files and open them, just like you do in the learning environment of Codecademy.

Another option is to go to sites that let you run code. Repl.it, Glitch, and Codepen are some of the more popular choices.

1 Like

Hello thank you
still trying to figure out what and where to do things. I am just old and slow learning. It takes awhile for me to catch on.
Sincerely
John B

we’ve all had to learn at some point or another.

Essentially, you need to decide if you want to run whatever code you write locally or online. There are benefits and drawbacks to both. Think of it the same we you can write a Word document in your computer, or use something like Google Drive to create a document online.

So if you want it in your computer, any text editor (sounds like you downloaded Sublime?) will help you do that. Write your your html and when you save it, make sure it has the correct extension, like index.html. Same thing if you write a .css file. Then you can either double click your file and your browser will open it, or right click it and do open with and open it that way.
image


If you go to a site like repl.it, you will see something like this:

You can sign up and get a user if you plan on using it often, or you can simply click “start coding” and be on your way:

Select HTML, CSS, JS, create repl, and it will send you to the coding environment, that looks like this:

And they even create HTML, CSS, and JS files to save you some time!.


Hope that helps! :+1:

Hello irlfede
thank you very much
Oh yeah forgot that index.html
sincerely
John B

Hello irlfede
no i downloaded sublime and atom put couldn’t figure out how to use them.
so just using a text editor on Jessie Debian (raspberry pi OS) operating system
can you check my code? It is very very simple just started
Sincerely
John B

yes of course! This whole community is about sharing! Don’t be shy and share your code :smiley:

With the Sublime issue, was it a problem of opening it? Or actually using it?

Good Evening irlfede,
Ok I am doing good. I gave up on sublime and atom.
I with the repl;it that you mention and was able to get code into it and see the outcome on the right screen. That was good just like codecademy had on its lessons.

As for Sublime never really gave it a chance just wanted to get practicing writting HTML & CSS.

Should I give it a try.

Thank you so much for all your help.
It is so much appreciated.

Sincerely,
John B

It’s up to you, really! Sublime is possibly slightly easier than repl once you know how to use, and it can be used offline. But if you find repl easy, there doesn’t seem much point in changing.

I’m sure at one point or another you’ll want to work on code on your machine offline, so it would be good to learn how to set up your environment to do so.

You mentioned you are running on a raspberry pi. I don’t think neither Sublime or Atom have direct support for that ARM debian, so my best advice would be to use Geany. Learn more here: https://www.geany.org/

Good Evening codeneutrino,
Thank you for the information it is very helpful.
Right now I do not find anything easy ( just a joke) so doesn’t matter to me what ever will let me write code and test it to see if I doing good.
Also like another code member says maybe for offline for future coding.

Right now I would like to concentrate on Html and CSS just o hone my skills.

Sincerely
John B

1 Like

Good evening irlfede,
I saw the Geany and started to read up on it.
I am currently using the repl,it and so far not bad but I would like to in the future like you said to use it off line.

So Far I have this code and am getting stuck at resizing the Image. I found something called max-width to use but it didnt work. So I am playing around with trying to use the image as background and just on the web page to describe a problem that is cause in real world.

Thank You so much for the help and all you are doing to help.

My HTML CODE

Railroad Crossing Vehicle Detection
<a href="https://www.laserbeamvehicledetectionunit.com" target="_blank" Laser Beam Vehicle Detection Unit

The Safety

Railroad crossing safety device used to warn the trains of vehicles on the stopped or stuck on the railroad crossing

MY CSS CODE

html, body{
margin: 0;
padding: 0;
}

h1{
color: blue;
font-family: arial;
height: 40px;
width: 100%
}

h2 {
color: red;
height: 46px;
width: 100%
font-family: serif, bold;
}

p {
color: violet;
height:18px;
width: 100%
margin: auto;
font-family:calbri,san-serif;
}

.img{
max-width: 50px;
height: auto;
}

Sincerely
John B

My HTML CODE

Railroad Crossing Vehicle Detection
<a href="https://www.laserbeamvehicledetectionunit.com" target="_blank" Laser Beam Vehicle Detection Unit

The Safety

Railroad crossing safety device used to warn the trains of vehicles on the stopped or stuck on the railroad crossing

Ok let me take the link out
My HTMLCODE

Railroad Crossing Vehicle Detection

The Safety

Railroad crossing safety device used to warn the trains of vehicles on the stopped or stuck on the railroad crossing

Hi there
SUBLIME text is a great tool and widely used. Try couple of tools and practice to see which suits you the best.
Good luck

Good Morning Chip4219995360

Thank you so much will check it out. Right now I am reviewing and practicing html and css.

Sincerely
John B

Hello. Can I suggest Visual Studio Code as an alternative? It supports HTML, and CSS, and it even has extensions that can help you see your code. One I like to use to Live Server Preview.

2 Likes

GoodMorning h1lo
Thank you for the suggestion
Can I ask you a question about coding html and css
sincerely
John