Hyper text markup language (HTML), Cascading Style Sheets (CSS) and Javascript (JS) are the core technologies for rendering content in a browser with a web page.
Open the terminal and run brew install atom
to install the text editor Atom. Once that's installed go to your Desktop with cd ~/Desktop
and run atom index.html
. That will open Atom. Then run your web server python -m SimpleHTTPServer 8000
.
In Atom, paste the following:
<html>
<head>
<style>
li {
color: red;
}
.big {
font-size: 2rem;
}
#skeleton {
margin-bottom: 1rem;
}
</style>
<script>
document.addEventListener('click', function(event) {
alert('You clicked');
}, false);
</script>
</head>
<body>
<ul>
<li id="skeleton">HTML is like the skeleton</li>
<li class="big">CSS is like the skin</li>
<li>JS is like the musculature</li>
</ul>
</body>
</html>
Save and then open your browser to http://localhost:8000 and you should see my ugly web page. If you click, you will see an alert that 'You clicked'.
The part in <style>
is CSS. The part in <script>
is Javascript. The rest of the document is HTML.
Now, have a look at MDN:HTML where you can learn about HTML and its different elements. Then look at MDN:CSS to learn how to use CSS to style those elements.
The MDN site is very good not just for learning that content at the outset but also for staying fresh on it as it evolves. Most any decent web developer looks at it regularly.
When you write CSS and HTML you are just coding. But Javascript is an actual programming language. The MDN:JS info is helpful but there's a lot more complexity here. You might consider taking a look at their Learn web development stuff.
In fact, we'll probably pick up with some of that next.