Main content
Course: Computer programming - JavaScript and the web > Unit 2
Lesson 9: Further learningWhat to learn next
Congratulations on learning HTML and CSS fundamentals! You now understand a lot of what goes into the webpages you see around the internet, and you should hopefully be able to look at those webpages and start to recognize the HTML tags and CSS properties in use.
There is a whole lot more that you can do to build on your HTML and CSS knowledge, however. Read on!
More HTML tags
- Form tags: There are quite a few tags that are used to create web forms, like
<button>s and<input>s. They are typically used to communicate data back to a server, something which we don't enable on Khan Academy. They can also be used with JS to create a game, which we do teach in the HTML/JS course. Learn more about form tags with these slides. Learn server-side languages like PHP, Python, Ruby on Codecademy. - Iframes: The
<iframe>tag is a way to frame another webpage inside yours, and is handy for things like embedding Youtube videos, Google Maps, etc. That tag is disabled on Khan Academy currently for security and moderation purposes, but can be experimented with elsewhere. Learn more with these slides. - Multimedia tags: The
<audio>and<video>tags are supported in modern browsers as a way to play audio and video files on webpages. Like the<iframe>tag, they are currently disabled on Khan Academy, but can be used elsewhere. Learn more with these slides. - New semantic tags: In the past few years, as part of the "HTML5" specification, browsers have added new semantic tags for developers to use instead of
<div>s, when appropriate, such as<article>,<aside>,<nav>, etc. There are many articles about them here, including this handy flowchart for deciding when to use them.
More CSS selectors and properties
You should be able to experiment with all of these on Khan Academy:
- CSS3: We covered CSS that's been supported in browsers for years, but there are many new CSS properties and selectors in what's known as the "CSS3" specifications, and browsers are adding support continuously as they release new versions. You can learn more in these CSS3 selectors slides, and CSS3 properties slides. Make sure to check caniuse.com to find out what's supported in each browser.
- Media queries: This is a technique that lets you specify different CSS for different situations, like when your webpage is viewed at a smaller size or when it's printed. Learn more from W3C.
- CSS frameworks: A framework is a collection of CSS rules and classes, and many developers use CSS frameworks to enable them to write CSS faster. The most popular one is Twitter Bootstrap, but there's also ZURB foundation, Pure CSS, Topcoat, and more.
Using JS in webpages
Web developers use JavaScript to make webpages interactive, to respond to user events and bring in data dynamically from servers. They do that by embedding
<script> tags inside the HTML, and putting JavaScript inside those tags. Their JS code then uses the "DOM API", a set of functions that browsers make available on every webpage to let developers query and manipulate that page.That means that if you want to learn to make your webpages interactive, you both need to learn the fundamentals of the JavaScript language (which you can do here on Khan Academy), plus you need to learn the DOM API (which you can learn in our course here).
Making webpages outside Khan Academy
We love to see you making cool webpages here and sharing what you're learning with the community, but we also think its a great thing to experience other code editing environments and get to experiment with functionality that we don't have enabled. If you want to continue coding inside the browser (especially if you're on a ChromeBook), you can try JSBin.com, JSFiddle.net, or Cloud9 IDE.
If you want to code outside of the browser, you can download an IDE and save your webpages as ".html" files. Popular IDEs are Notepad++ (Windows only), Visual Studio Code, SublimeText, Adobe Brackets, Coda, and BBEdit.
Hosting webpages on a server
We host the webpages that you create here on Khan Academy on our own server, but you may want to set up your own web presence.
First, you'll have to find a company that will host your site. There are many hosting providers out there, with varying degrees of flexibility and price.
Then you will also want to create a domain name, like "mycoolname.com", so that your site can be a part of your identity. Sometimes you can do that with your hosting provider, but often times, you use a different domain name registrar for that. Learn more from these slides.
Once you have a web host, you can transfer your files to the server with an FTP client like FileZilla. That's a program that connects directly to the server and allows you to browse, download and upload files to and from the server. You might also be able to SSH into the server and directly edit the files on that machine.
Keep learning
HTML and CSS are constantly changing, because browsers release improvements so often and the web development community is an active one. One of our favorite ways to keep up-to-date is to subscribe to Frontend Focus, a newsletter with links to articles and demos. Of course, whenever you learn something new, you should try it out to really understand how it works.
Practice, practice, practice!
Want to join the conversation?
what is the difference between html and html5(64 votes)
Some new features in HTML5 includes, but is/are not limited to:
• Simpler DOCTYPE declaration. (<!DOCTYPE html>)
• Simpler charset declaration (<meta charset="UTF-8">)
• Loads of new elements and attributes. (i.e.<header>,<footer>,<article>,<section>,<svg>,<canvas>,<audio>, and<video>)
Perhaps you'll be interested in the following page; http://dev.w3.org/cvsweb/~checkout~/html5/html4-differences/Overview.html?rev=1.193;content-type=text%2Fhtml(96 votes)
How do you put in an html box inside a question or answer? Like you can do
<p>
Hello.
</p>
and I've seen people have a grey box around it. How do you use this?(23 votes)If you mean something like this, you have to quote your text with grave accents, one on each side for a single word or sentence, or three on each side for a block of code.
When you click on an Answer box there's link underneath that saysFormatting tipsthat explains how to use them and from where you can copy the ` character if can't find it on your keyboard.(53 votes)
What is the hardest programming language? And what programming is the most popular currently? If you want you may subdivide it into programming languages that are used especially for games and programming languages languages specialized for websites. Thanks in advanced.(14 votes)
The hardest maybe assembly language, when we learned in Computer Science course, it drives one crazy to complete even a small thing.(17 votes)
Why can these companies charge me for a domain name? I have set up a WAMP self host server for a web page, but I can't mask the sites IP address with a domain name? Why?(8 votes)
As others have mentioned and you noticed, it is possible to host a website without a domain name, but there are also many limitations including:
- most search engines will not crawl a site without a domain name
- the server hosting the domainless site can not host other domains
- there can not be any security certificate (SSL)
- people won't remember your IP
- people will probably be wary of a site with no domain name, especially if they know that it was to save a tiny 10-15$ per year
- the site can not be linked to its email address as emails are domain related(28 votes)
why is this helpful for us kids(8 votes)
Programming is going to become one of the most important things in the future to find a job or start a business, and also it's fun to learn, in my opinion.(11 votes)
Could Khan Academy do a Python course? I want to do a Python course, and since I'm here in HTML, why not ask for a new course.(10 votes)
Khan Academy currently doesn't have a Python course.
It is a common request though.
The only languages KA has are jQuery, JS, HTML/CSS and SQL.(6 votes)
I want to learn more about HTML and CSS like making a stylish webpage layout, creating stylish menu bar.
where can i learn them?(3 votes)
One of the ways you can do that is to find a good HTML user and ask them to teach you. You have no idea how much I've learned from the KA community. :D(8 votes)
How can I practice making webpages is there a way that you can make your own webpages on Khan Academy?(3 votes)- You can at this site:
https://www.khanacademy.org/computer-programming/new/webpage
A couple things to remember:
1. You can only use external images from Wikipedia, nowhere else.
2. You cannot use<iframe>elements.
3. You cannot import files from your computer, e.g. a@font-faceor an external .js or .css sheet.
4. Obviously, you cannot use SQL.
5. The website will technically not be live, it will 'live' inside of akhanacademy.orglink.(7 votes)
- How to create my own website outside the Khan Academy?(3 votes)
If you want you can create webpages on other online editors like codepen.io (sorry @gedran25) or on Cloud9 as palema showed. You can also use offline editors like:
- Atom
- VSCode (Like I do)
- Sublime Text
- Electron
- Visual Studio
- etc.(5 votes)
- With websites that allow you to switch between a light mode and a dark mode, how do they do that? They need to change all the background-color & font-color attributes whenever they switch the mode. Is that a javascript if then function that is put inside the html code somehow or is it another way that we have yet to learn.
Also, a second question. I saw that when you inspect the page source of khan academy. They use the meta charset utf-8 which we have learned. That is supposed to identify the language being used if I am thinking correctly on that. In that same page code of khan academy it has <html lang="en"> Is that something different, it seems that it would be doing the same thing and identifying the language being used which is what charset does. And along with this question, they have that same thing paired with the body attribute <body lang="en"> What do those tags mean and what makes them different than charset in identifying language and why they use that code in both html & body.(4 votes)
Hi Mello!
To answer your first question, I created a webpage here: https://www.khanacademy.org/computer-programming/switch-styles/6428114307039232
For your second question, the UTF-8 is a character set.
Computers use binary, so 0s and 1s. A character set is a way to translate 0s and 1s to human-legible letters.
ASCII is another character set. And ANSI is yet another.
Not all character sets are supported in browsers, but I don't know if these two are.
So these are different from languages. French, for example, uses the same UTF-8 character set as English.
The lang attribute tells you what natural language the text is written in. (English, French, etc.)(4 votes)
