Main content
Hour of Code
Course: Hour of Code > Unit 1
Lesson 2: Creating webpages- Welcome to the web!
- HTML basics
- Quick tip: HTML tags
- Challenge: Write a Poem
- HTML: Text emphasis
- Challenge: You can learn text tags
- HTML: Lists
- Challenge: Wishlist
- HTML: Images
- Challenge: A picture-perfect trip
- CSS Basics
- Project: Holiday card
- Go beyond the hour
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Go beyond the hour
Congratulations on completing our hour of webpages! You’ve now learned the basics of HTML and CSS, the languages which power every webpage on the internet.
There’s much more to learn about HTML and CSS - like more tags for links and tables, and many more ways in CSS to select which part of your page you want to style, and properties to apply - like to change the text style, move elements around, and add borders and spacing:
You can learn all of that on Khan Academy, with our HTML and CSS course. You can skip the first part that you already did here and go straight to learning more CSS. If you want to keep experimenting with the basics, you can also create a new webpage and learn how to develop webpages outside KA.
Or, if you just have another hour free, you can try our Hour of Drawing with Code or Hour of Databases.
Whichever you pick, keep practicing. Most programmers code every day, and that’s how we keep our skills sharp. And hey, it’s fun!
Want to join the conversation?
how can i change the font?(15 votes)
Use this inside the style tags. If you have a paragraph you want to change the font of, type
p {font-family: cursive;}. If you want to change the font of the h1, type h1 {font-family: cursive:}.
There are a few different font families that are generic and can be used with any browser. These are: cursive, fantasy, serif, sans-serif, monospace. Example: font-family: serif;
You can also specify the name of the font you would like. Example: font-family: "Lucida Console";
The only thing you have to be careful of is that not every browser will see Lucida Console, so if you want to use a specific font, always include its family. Example: font-family:"Lucida Console", monospace;
This ensures that if a browser doesn't see Lucida Console, it will at least do monospace.
Alternately, you could check out the documentation for font. Whoever wrote it is a little more articulate than I am :)(29 votes)
How do I make changes to an official program?(12 votes)
You cannot literally change it, but you can edit it and save your own copy of it by clicking the spin-off button in the lower right hand corner of the canvas.(19 votes)
how do we put it on the web ?(10 votes)
Register your domain name. Your domain name should reflect your products or services so that your customers can easily find your business through a search engine. ...
Find a web hosting company(HAVE TO BUY IT). ...
Prepare your content. ...
Build your website.(4 votes)
How do I get a certificate for completing the Hour of Webpages?(4 votes)- Do you mean the challenge patch? To earn the challenge patch Hour of Webpages, you have to watch all the videos and finish all the challenges and the project.(11 votes)
I tried to directly add a picture from Wikipedia, but it still said it was not permitted. I know you can't get pictures from online for reasons, but I should be able to get it from Wikipedia. Please answer as soon as possible if you know the solution. :)(3 votes)
That's because you're right, you can't get images from Wikipedia, what I mean is, the images used on Wikipedia aren't from the site itself. If you want to see what I mean, right click on an image from a Wikipedia page and click "View Image".
A new tab should open up with the image you clicked right on the screen, and if you look at the URL on the address bar, it will sayhttps://upload.wikimedia.org...(but without the dots, and you would see the full URL, the dots represent the rest of the URL). Well, now you know why it wasn't working, you were getting your images from the wrong site!
So make sure that any images you get from Wikipedia are from https://upload.wikimedia.org, or else Khan Academy will block it. Before I go, here's an example image that would work: https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/300px-The_Earth_seen_from_Apollo_17.jpg. It's a beautiful (famous) image of Planet Earth.(9 votes)
Not sure if it's appropriate to ask this here, but could I use what I learn on Khan Academy to jump-start a coding career, or is it impossible without also having a certification or degree?(5 votes)- I had challenge:
1. to code rgb ()
2. sourcing images outside KA images.
Can you help?(3 votes)
1. background-color: rgb(color here); OR color: rgb(color here);
2. Go to wikipedia and choose the picture you want. right click on the picture, then select open image in new tab copy the URL then copy-paste the URL in the quotes: <img src = 'url here'>
It wasnt a specific question but I hope this helped in any way possible. =](3 votes)
- Why is this so much work?(2 votes)
Coding can be tough and seem like a lot of work at first, but as you continue through the courses and practice coding techniques you will get better and coding will become easier.
If you have any questions feel free to ask for help :)(3 votes)
Hi so I’m not really good at coding(0 votes)
taking notes of everything helped me remember stuff because it can be difficult to do this without a reference like notes(2 votes)
- How can I change the color of the text?(2 votes)
fill(r, g, b); will work. Just make sure you use textSize as well(to make the text bigger)(2 votes)
