Permalink Goal for this Lesson In the last lesson we used some JavaScript to move a funny looking stick person around the screen. Today we’re going to build on that having you write some JavaScript yourself.
Today we’re going to see if we can learn a more about JavaScript. To do this we’re going to use our reference, Mozilla.
Permalink Create the html and JavaScript files www/javascript.html:
1 2 3 4 5 6 7 8 9 10 11 <!
Read more...
Permalink Overview of JavaScript JavaScript is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved.
Read: Reference
Permalink Create your first JavaScript file! Create www/main.js with the following content
Read more...
Permalink Overview of CSS Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out.
Read: Reference
🛑 Stop when you get to the section titled “Changing the default behavior of elements”.
Permalink Start with a simple page Create www/css.html with the following content
Read more...
In this lesson we’ll talk about two things
Something very boring, but important: whitespace Something hopefully fun, pictures! Permalink Whitespace When writing a paper using a pencil or pen, whitespace is a key aspect of formatting. When you start to learn how to write papers using a computer, the concept of layout really changes. Some aspects get easier, but other aspects become more difficult (for example it can be harder to make it look the way you want it to look).
Read more...
So now that we’ve learned more about a couple of the different tag types, this lesson will go over a few more of them, and start to focus on how to organize these tags into something that looks closer to a typical web page.
Permalink Headings You can use headings to group sections of a page into different sub sections. Look over the reference to see examples of the heading tag types.
Read more...
Permalink Intro In this lesson we’re going to use the links section of the reference.
Note a few things:
The href attribute is the important part. This holds the URL and can take a variety of forms, we’ll talk more about this later. Permalink Create a new webpage and link to it! The goal of this section is to use what we learned in Lesson 01 and create a new webpage, which is linked to from www/index.
Read more...
Permalink So what is HTML? Read through the relevant section on the reference website.
Specifically take note of the following things:
p (a tag) class="editor-note" (an attribute) strong (a tag) Permalink Modify our webpage Modify www/index.html and change the body content so the webpage looks different. Try some of the examples in the reference.
Permalink Completion See if you can make the required changes so your page looks like this
Read more...
Setup the basics required to build a static website. This could later be deployed to a server if desired :)
Permalink Ensure you have an editor to use Ideally you would install an editor, one of these great ones for example:
Neovim Text VS Code If you’re on a Chromebook, you’ll want to use Text!
Permalink Create a directory and file to hold the website Use your computer to create a directory named: www
Read more...
