This workshop will cover the very basics of web development - HTML, CSS, and JavaScript. At the end of it, you will have a 2-page personal website.
- Download Sublime text (or your text editor of choice)
- Find your favourite photo of your face (portrait)
- Overview of what HTML, CSS and JS are and what they are used for
- Explore how HTML, CSS and JS work together to function as a website
- Use this knowledge and learn some tips to build a personal website
- Demo what we're going to build in this workshop
- Make a folder on your desktop and name it
personal-website. This is where your project will live - In Sublime Text, locate the foler (File > Open) you just made (
personal-website), and open it - Still in Sublime Text, create the following files inside the
personal-websiteproject folder:index.htmlabout.htmlstyle.cssscript.js
- Open
index.html. This is a standard convention for the entry point of your website. - In your newly created
index.htmlfile, set up the following boilerplate code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>So, what's happening in this file?
On the very first line:
<!DOCTYPE html>we are declaring the doctype of the html document. This doctype declaration must always be the very first thing on your HTML page. This line is telling the browser that we are using the version of HTML known as HTML5.
Fun Fact
They call it documents because back when the Internet was first invented, it was used to share academic documents. And the name just stuck.
The next line is a pair of opening and closing <html>...</html> tags
<html>
...
</html>This <html> tag pair is a standard part of every HTML file. It holds all the content of your page. Everything in your document, except the doctype, will be contained within these tags.
The next line you will notice that the html element and this element has an opening <head> tag and an accompanying </head> tag. Most html elements are composed of an opening and closing tag pair.
The <head>section of the code is where you put information for the browser. Users will not see any of this. Think of it like the plans in your head, nobody else is able to see them except you.
<head>
<title></title>
</head>Within this set of opening and closing <title></title> tags is where we put the title of our html document.
This title is what the browser displays
Demo: go to google.com and show the title in the tab
The <body> is where all our HTML will be put. This is what the user will be able to see
CSS stands for Cascading Style Sheet. It is called this because the browser will read the CSS from top to bottom. Anything at the bottom of a CSS file will be more important, in the browser's opinion.
JavaScript is the language of the web. If you want to be a good web developer, you should know some JavaScript.
- Every single browser that is in existence today, has JavaScript implemented in it
- It is the language of the web, and therefore it is used everywhere online. Most frameworks still
- JavaScript is the most actively developed language at this present time. No other language comes close to how fast JS is being innovated on.
- JS is now on the frontend, on the backend (node.js) and even on mobile devices (React Native)
- This fast growth means that it is a pretty valuable skill to have
Right now, your CSS and JS files should be empty. So now we need to connect all our files together so that our HTML, CSS and JS are working together.
Open up index.html, and find the <title> tag, add a title for your html document:
<title>Shaii Ong | Aspiring Web Developer</title>Then, under your <title>, add a link to include your style.css file:
<link rel="stylesheet" type="text/css" href="style.css">Next, let's hook up our JavaScript file before the closing </body> tag:
<script src="script.js"></script>Your html file should now look like this:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>Before we begin, let's take another look at what this homepage is supposed to look like. [show homepage]
So what are the elements we have on this page?
- We have a wrapper that has a background
- We have a navigation in the header
- We have a user photo
- We have a heading for our name
- We have a subheading for our tagline
- We have a little decorative divider
- Lastly, we have some icons that link to our social media
Before your <script> tag, create a <div></div> that will act as a container for all the elements on this site and give it a class name.
- These classnames are how we can use CSS to target HTML elements.
- So if we want to add a color to this
divelement, for example, we would call it by it's name in our CSS file - The names we are use are
site-wrapperandhome - An analogy to remember this is: your mother might have two daughters, so you are both
<div>elements. If she just called you both "daughter", you might now know which one of you she is talking to. - That's why you have names and that's why we give HTML elements class names
<div class="site-wrapper home"></div>Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home"></div>
<script src="script.js"></script>
</body>
</html>From here on out, we will be working within the pair of <body></body> tags.
It is always good practice to use comments in our code. These can act as documentation to other developers and reminders to ourselves. Nobody ever remembers what they were thinking 6 months ago. So it's good to leave comments so we can understand our code better.
The browser will completely ignore comments, they are mostly for humans.
In Sublime Text, the shortcut for comments is: command + / on a Mac and Ctrl + / on a windows.
You can create an empty comment, or you can highlight some text and turn it into a comment by using the shortcut.
Let's get started with our navigation.
Because our site will be having more than one page, we need a way to navigate from one page to another. We will achieve this by building a navigation header. Just like the head is at the top of your body, the header is at the top of your website.
Inside your index.html, and within the <div class="site-wrapper home"></div>, we need to add the following lines of code:
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>Notice at the end
Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>Open your index.html file in the browser and see what it looks like so far.
The main content of our homepage consists of
- a user photo
- a main heading for our name
- a subheading for our tagline
All these things will be contained in a div with the classname of main-content
<div class="main-content"></div>This element should be placed under the header element.
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content"></div>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>Inside of the <div class="main-content"></div>, we will add our user image
Image tags are slightly different from regular tags. As we said before, every tag has an opening and a closing tag. They usually come in pairs. But there are some special tags that are self-closing. These tags do not come in pairs. An example of a self-closing tag is the <img/> tag.
Notice the structure of this tag. It does not have a closing tag, but it has a forward slash at the end of the word img.
We will add an image to our homepage, using the <img/> tag:
<img class="user-photo" src="images/photo.jpg" />We gave this HTML element a class of user-photo and an src attribute equal to images/photo.jpg. The src is where to tell the browser to look for our image. In this case, our photo has the name photo.jpg and it is contained in a folder called images.
We do not currently have this folder in our project, so let's create it. Inside out personal-website folder, right-click and create a new folder called images. Remember, this folder has to be inside personal-website project folder.
Remember that photo of yourself we asked you to bring along? On our desktop, move that photo into your images folder that is located within the personal-website folder.
Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<img class="user-photo" src="images/photo.jpg" />
</div>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>Open your index.html file in the browser and see what it looks like so far.
Right under where we put our photo, add a heading for our name:
<h1>Shaii Ong</h1>There are 6 types of headings in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<h1> is the most important heading, while <h6> is the least important one. Headings are extremely important for accessibility. People with vision problems rely on things called screen readers to help them head a webpage. If we use headings properly, it allows these users to easily navigate around the page without a mouse, and thus have a better user experience on our site.
Right under our main heading, add a subheading for our tagline:
<h2>Aspiring Web Developer</h2>Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<img class="user-photo" src="images/photo.jpg" />
<h1>Shaii Ong</h1>
<h2>Aspiring Web Developer</h2>
</div>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>Open your index.html file in the browser and see what it looks like so far.
Most websites have what's known as a footer. Just like your feet are at the bottom of your body, the footer is at the bottom of your website.
Right under our main content, we will add our <footer> element
<footer class="site-footer"><footer>Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<img class="user-photo" src="images/photo.jpg" />
<h1>Shaii Ong</h1>
<h2>Aspiring Web Developer</h2>
</div>
<footer class="site-footer"><footer>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>This little decoration is to visually separate the footer from the rest of your site. CSS has gotten extremely versatile over the years. You can now use it for animations and even creating CSS artwork.
This little diviver is simple. We are going to use an element called a <span>, it is kind of like a <div>, but some of its default properties are slightly different.
So if a <div> is like a box, think of a span like a plastic bag. It generally doesn't have a shape of its own.
Inside the <footer> tags, we will add our diviver element. You won't be able to see it just yet. But don't worry. We will use CSS to make it look like a divider
<span class="divider"></span>Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<img class="user-photo" src="images/photo.jpg" />
<h1>Shaii Ong</h1>
<h2>Aspiring Web Developer</h2>
</div>
<footer class="site-footer">
<span class="divider"></span>
<footer>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>As a web professional, it is always a good idea to have some social media, so potential employers can see what you're all about. 50% of getting a job as a developer is being able to market yourself. So it helps to have an online presence on platforms that other developers are active on.
This is going to be another list. It is called an unordered list because we aren't using numbers to order the list items. We are just using bullet points, and the numbering does not matter
Right under your divider element, add your social media link list:
<ul class="user-social-media">
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Github</a></li>
</ul>Your index.html should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<img class="user-photo" src="images/photo.jpg" />
<h1>Shaii Ong</h1>
<h2>Aspiring Web Developer</h2>
</div>
<footer class="site-footer">
<span class="divider"></span>
<ul class="user-social-media">
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Github</a></li>
</ul>
<footer>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>Great work so far, everyone! Let's take a short water break.
We can make quick work of the about page, since we did all the heavy work in the homepage.
Let's look at the mockup again so we can remind ourselves what we're building. [demo]
The first thing we're going to do is copy and paste the contents of the index.html page into the about.html file and then make a few changes.
Your about.html page should now look like (basically looks exactly the same as our index.html):
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | Aspiring Web Developer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper home">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<img class="user-photo" src="images/photo.jpg" />
<h1>Shaii Ong</h1>
<h2>Aspiring Web Developer</h2>
</div>
<footer class="site-footer">
<span class="divider"></span>
<ul class="user-social-media">
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Github</a></li>
</ul>
<footer>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>You should probably change the <title> of this page, so it indicates to the user what page they're actually on
So this title
<title>Shaii Ong | Aspiring Web Developer</title>will become this:
<title>Shaii Ong | About me</title>Our about page doesn't have a photo. So we can just delete the <img> tag we currently have on the page.
So this heading and subheading
<h1>Shaii Ong</h1>
<h2>Aspiring Web Developer</h2>will become this:
<h1>About me</h1>
<h2>HTML, CSS, JavaScript</h2>So this site-wrapper here
<div class="site-wrapper home">will become this:
<div class="site-wrapper about">Right below your subheading <h2> tag, add another <div> and give it a class of user-description:
<div class="user-description"></div>Inside this, we are going to add a paragraph tag:
<p></p>Let's get some dummy text to use for our description. Let's use some Lorem Ipsum. Lorem Ipsum is a dummy text that people use to make mockups. It is used in traditional publishing, graphic design, web design, etc.
Copy the first line or two and paste it in between the <p></p> tags
Your about.html page should now look like:
<!DOCTYPE html>
<html>
<head>
<title>Shaii Ong | About Me</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="site-wrapper about">
<header>
<ul class="site-menu">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="about.html">about</a></li>
</ul>
</header>
<div class="main-content">
<h1>About Me</h1>
<h2>HTML, CSS, JavaScript</h2>
<div class="user-description">
<p></p>
</div>
</div>
<footer class="site-footer">
<span class="divider"></span>
<ul class="user-social-media">
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Github</a></li>
</ul>
<footer>
</div><!-- end of site-wrapper -->
<script src="script.js"></script>
</body>
</html>Right now, our website looks like it was made in 1995. Now it's time to add some CSS and make it look like a modern-day website.
We're going to start from the top. Remember all those class names we added on all our <html> elements? We are finally going to use them so that our CSS can talk to our HTML elements.
Let's start from the top and work out way down to the bottom.
Always remember to work in small steps.
Since we built our homepage first, let's start styling that first.
So, now we will split our Sublime Text into two windows.
You can do this by going to View > Layout > Columns:2
Most developers will work like this, because it's easier to have your HTML and CSS side-by-side
There are many browsers out there. Each of them are made by maintained by different companies. There's Google Chrome, Mozilla Firfox, Microsoft Internet Explorer, Microsoft Edge, Safari, etc.
They each have their own basic CSS that they put in their browsers. The problem with this, though, is that all these styles are different in different browsers. There are guidelines, but for the most part, browser vendors (or browser companies) can implement things however they want.
So to make sure our website looks the same in all the different browsers, we are going to have to reset these styles. This is the very first thing any developer should do when working with CSS.
Open your style.css file, and paste the following code. We will go through each line one-by-one:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
ul {
margin: 0px;
}
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
}A cool thing about those classes that we added to our HTML is that every element that contains the class, will be affected by the CSS.
This means that the <body> tag in both our index.html and about.html will be affected by this same CSS body {} declaration
Because we're working from top to bottom, the first element that we added was the <div> with the classname of site-wrapper.
Remember how we talked about HTML comments? Well CSS has comments too, and they serve the same purpose. We are going to use comments to help put our CSS code into sections, so it's easier to reason about.
In our CSS, under the reset, add a comment (remember the shortcut - command + / for Mac and Ctrl + / on Windows):
/* Layout styles */Under this comment, paste the following code and we will go through it line by line:
.site-wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: #D3360B;
background-repeat: no-repeat;
background-size: cover;
}Check your website out in the browser and see what has changed.
If you recall, our homepage has a different background to the rest of our site
To achieve this, we will make our target more specific. If you look at your HTML, you will see that we have 2 class names on the element.
We are going to only add this fancy background to the <div> element that has both the site-wrapper AND the home class.
.site-wrapper.home {
background-image: url('images/main-bg.jpg');
}This is a great way to customise particular pages.
Add a comment to indicate that we are styling a new section.
/* Navigation styles */.site-menu {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
text-align: center;
}In programming, much like in nature, there are observable patterns. You will definitely see them if they appear often enough and you're paying attention.
Building a navigation menu has a typical pattern about it. You don't have to build it this way if your design is different, but more often than not, you will see people build navigation menus this way.
.site-menu li {
margin-right: 10px;
margin-left: 10px;
display: inline-block;
color: white;
font-size: 16px;
}
.site-menu li a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}Let's go over it, together now, line by line.
Now that you're getting the hang of what CSS looks like, let's speed up a bit. We will only go over the new CSS declarations
/* Main Content */
.main-content {
text-align: center;
}
.main-content h1 {
color: white;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
}
.main-content h2 {
color: #333333;
font-size: 21px;
}
.user-photo {
border: 1px solid white;
transition: border-radius 0.5s ease-in;
}
.circle {
border-radius: 100%;
}There are a few common patterns that we can use to make our footer look and behave a certain way. For this website we are building, we want the footer to always stick to the bottom of the page. We achieve this in the following way:
/* Footer - Social Media */
.site-footer {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 60px;
text-align: center;
}So everything within this <footer class="site-footer"> element will be anchored to the bottom of our website
Now we are finally going to see how to style the divider. This sort of thing isn't 100% necessary to the functionality of the site, but it does give it a more finished look.
A span is an element that is multi-purpose. Using it as a divider is just one creative way to use it
.divider {
display: block;
width: 30px;
height: 3px;
margin: 30px auto;
background-color: #333333;
}Let's check it out in the browser!
Okay, so now we're going to go into some territory that is a little more complicated. Web developers have a lot of tools and resources available to them. These tools and resources make their work more efficient.
In my opinion, the most powerful thing that is available to a developer is the community. Developers share a lot of code. This kind of free resource is called "open source". Which is why I say that anybody can be a developer. Being a proficient coder is important when you are trying to refine your craft.
But the most important thing for a new developer is knowing where to look for learning resources and open source resources.
Google is your best friend.
The social media icons are in a list. We've already seen this pattern of CSS, previously when we built the main navigation menu.
.user-social-media {
list-style: none;
padding: 0px;
}
.user-social-media li {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
font-size: 28px;
}
.user-social-media li a {
color: #333333;
}We could actually just leave our social media links the way they are. But that's kinda boring. Icons are nicer.
Together, we are going to open a new tab in our browser and Google the phrase: cdn cloudflare font awesome
Let's break down these keywords.
- cdn: content delivery network
- cloudflare: one of the many cdn services out there
- font awesome: an open source font icon library that is super awesome
The first result is what we're looking for. Google is so smart, it is sometimes scary. As you do more and more development, Google will start to see patterns and trends in your search habits, and they will know that they should show you more developer-related content.
The first link is the one we want. Let's copy it and go back to our Sublime Text editor.
Go back to your index.html and add a new empty link tag above your current CSS link tag. Start typing <link and Sublime Text will help you autocomplete it.
Make sure you're inside the quotation marks of the href attribute. Paste the CDN link we copied into this href
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">Font Awesome, as previously mentioned, is an open source font icon library that someone else created. It is one of the most popular libraries available today, and we can use it for free.
In order to use it, we had to first include it in our project. We did that with the link tag.
Now let's get the icons working
We're going to do another Google search. If I'm to be completely honest with you, most professional developers spend huge chunks of their day Googling references. Nobody memorises every tag or every single pattern. We just remember how to find it the answer, and then we use the power of the Internet to give us the answer that we already know.
Let's do another Google search.
- Open google.com in a new tab and search for the term:
font awesome 4 - The first result is the one we want. Click on the link to open.
- Go to the icons tab. You will see a search bar. In the search bar, search for
twitter. You will see two icons appear. Click the one you want - Copy the
<i>tag and go back to ourindex.html. In our<footer>, replace the word "Twitter" with this<i>tag we just copied. - Go back to font awesome's icon page and search for
linkedin. Click on the icon you want - Copy the
<i>tag and go back to ourindex.html. In our<footer>, replace the word "LinkedIn" - Go back to font awesome's icon page and search for
github. Click on the icon you want - Copy the
<i>tag and go back to ourindex.html. In our<footer>, replace the word "Github"
The footer on your homepage and your about page should be the same. So in your index.html, select your entire <footer> block and copy it.
Then in your about.html, replace the existing <footer> block with the one you copied from the homepage. Your icons should be showing up here too.
We're almost done with styling our website. Because of the shared styles, there isn't much left for us to do on our about.html page
In the left-hand-side pane of Sublime Text, open up about.html. Keep style.css open in the right-hand-side pane
The only thing left to style on the about page is our user-description
.user-description {
width: 70%;
margin: 60px auto;
color: white;
}This step is not necessary, but again, it will have give our website some refinement and polish. In this step, we are also importing an open source resource to make our work more efficient.
We're going to do one more Google Search.
- Open google.com and search for the term:
google fonts - The font we want is the very first one,
Roboto - There is a
+icon in the top right-hand corner of this font. Click on it. - In the right-bottom corner of your browser screen you should see a little black box with the words "1 Family Selected"
- Click on this black box to open it up
- There are different ways to use this. But for our case, we are going to just
@importit - When you click on import, you will see
<style>tags. We do not want to copy these style tags, we only want the@importstatement inside of the<style>tag - Copy this import statement and go to the very top of our
style.cssfile in Sublime Text - Before everything else, paste this
@importstatement
Now go back to the Google Fonts page and look at the black box again, there are more instructions to follow. scroll a little until you see Specify in CSS.
There is a font-family declaration.
- copy the whole line
- go back to our
style.cssfile - find the
bodydeclaration and paste what we just copied INSIDE the curly braces
Go back to your browser and check out your website. We have just implemented a nice, custom font.
Does this step seem familiar? We did something similar for the font awesome icons, but instead we used a different method to achieve something similar. In both cases, all we are doing is using a special font.
There are so many different ways to do things. Frontend Development wasn't even a job when the Internet went mainstream in 1995. It only started becoming an actual career choice in the earlier 2000s. This is a very young professional, compared to something like being a doctor or a lawyer.
So standards are still being created, and there are so many ways to do the same thing.
Congratulations, you now have a website.
We can take a short break before we bring it on home.
Good work, everyone. :)
Now we have finally reached the part of the tutorial where we introduce some interactivity into our site. This is the last section of our workshop for today.
Let's just take a look at what we're going to build.
[Demo] what we're going to build
It seems pretty simple, but we will be covering some pretty advanced concepts. Let's dive in
I am going to share a tip that is very valuable. Unfortunately, I learnt this late in my career. No matter what you're using your JavaScript to do, it is extremely important to make sure you are writing safe code.
This tip will save you A LOT of heart-ache and stress later on when you start learning to debug your code.
Debug: it's exactly what it sounds like - remove bugs from your code. A bug in the code makes it run in a way that is unexpected or unintended. We don't want bugs.
Before you begin writing any JavaScript, you must wrap all your code in something called an Immediately Invoked Function Expression or IIFE for short:
Open your script.js and let's begin
(function () {
// code here
})();Remember these steps:
- open bracket; close bracket; open bracket; close bracket; semicolon
- go to the beginning, then step into the first bracket pair
- type: function; space; open bracket; close bracket
- then type: open curly brace, close curly brace
- Step into the curly brace pair and hit enter
Type this over and over and over and over until it is burned into your brain. If you remember nothing else from this workshop today, please remember this pattern.
Remember in the beginning, we said that HTML, CSS and JS all work together to make a fully-functioning website.
In order to make JavaScript work with our HTML, we will use id.
An id is similar to a class, but it is used to connect HTML with JS.
It is bad practice to use ids for styling, in most cases. Some people do it. But those people really shouldn't.
So remember the rule: class will connect HTML with CSS and id will connect HTML with JavaScript
Go to the index.html and locate the user photo. Found it? Cool. Now we have to give it an id so we can reference it in our JavaScript.
<img id="user-photo" class="user-photo" src="images/shaii.jpg"/>Now we can use this ID to talk to this element, using JavaScript.
Let's just go over what is happening here. We are storing the reference to our image element inside something that is known as a variable. A variable is like a container with a more convenient name.
Isn't it easier to just refer to our image element as photo instead of always having to type our it's full reference?
var photo = document.getElementById('user-photo');We are going to be using this JavaScript file to talk to every page on our website, later on. But for now, we only need to use it on our homepage.
The about page doesn't have our photo, so we have to check to see if the image element even exists on the page before we add interactivity to it.
if(image) {
image.className += ' circle';
image.addEventListener('click', morph);
}Let's go line-by-line
So again, we're going to morph our image from a circle to a square and back to a circle ever time we click on it.
function morph () {
image.classList.toggle('circle');
}Your final script.js file should look like this:
(function () {
var image = document.getElementById('user-photo');
if(image) {
image.className += ' circle';
image.addEventListener('click', morph);
}
function morph () {
image.classList.toggle('circle');
}
})();