Intro to Web Design
Time
6.7 hrs
![](https://gibbon.ichk.edu.hk/uploads/2021/02/WebDesign101_bh8qkwkpt3wszjj.png)
Difficulty
Intermediate
Prerequisites
Tools For Learning
Departments
Human Technologies
Authors
Ross Parker
Groupings
Individual
Pairs
Threes
Pairs
Threes
Minimum Year Group
None
Blurb
This unit teaches you how to build a website from scratch. Having already built websites with WordPress, this unit seeks to go back to fundamentals, using HTML, CSS and JS to build a site from the ground up.
License
This work is shared under the following license: Creative Commons BY-SA-NC
Outline
The Pitch Why should I bother learning this?
|
|
Resources What is needed to run this unit?
|
Interdisciplinary Links Do not try and force this. What areas of other subjects might this reflect and/discuss language. For IB, links with ToK. |
Teacher Reflection What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
|
|
Credits Any CC attribution, thanks, credit, etc.
|
This page requires you to be logged in to access it. Please login and try again.
5 mins
Want To Master The Web And Build Anything?
The Pitch
- Think about all of the amazing web-based software you use. Google. Gibbon. Trello. All hand built using fundamental web technologies, including HTML, CSS & JS, by individuals who changed the world.
- So, do you want to master the web and build anything you want?
5 mins
The Very Basics
Theory
- In this unit you will create and share your own website.
- Instead of a traditional website, where each page is a separate file, we are going to use some cutting edge technologies to make a one-page website.
- The three main technologies you will use in this unit are:
- HTML
- HyperText Markup Language.
- We use this to say what content should appear on a web page.
- You can think of HTML as the skeleton of your website. It defines the structure of where everything is.
- CSS
- Cascading Style Sheets.
- This allows us to control the presentation of our content (e.g. how it looks)
- CSS is like the skin. It adds colours, shapes, sizes, and positions to your HTML.
- JS
- JavaScript
- This allows us to add interactivity to our websites.
- JavaScript is like the brains. It adds scripted elements to make a website interactive.
- HTML
- To begin with, you'll start by learning HTML. After all, brains and skin without a skeleton are just a blob!
- However, HTML alone doesn't look like much: just a naked skeleton.
- HTML & CSS together make a clever pair: by separating content and presentation (skeleton and skin), we can change the way a website looks by changing a single file (the stylesheet): even if the website has 1000s of pages. This saves a lot of time compared to just using HTML on its own.
10 mins
Code Editors
Getting Setup
- Writing HTML is just like writing text. You'll need an editor to get started.
- A code editor is like a text editor, but with superpowers.
- There are lots of editors out there to choose from, our recommendations are:
- Each editor has different features, but they all essentially let you write code.
- Download and install one of these code editors before you continue.
- Let's start working on your one-page website:
- First, open your code editor (VS Code or Caret)
- Create a new file (File > New)
- Save this file as index.html in a folder called "My Website"
10 mins
Building Your Website
Hands On
- The internet is FULL of webpages.
- Just below the surface of each webpage we visit is HTML.
- There are millions and millions of webpages on the internet.
- This means there's billions and billions of lines of HTML!
- So, what does all this HTML code mean?
- Before we continue building your site, we need to learn a little more about HTML.
- HTML is made up of tags.
- This is a tag:
<p>
- And another tag:
<div>
- Each tag starts with < ends with > and has a name like p or div.
- Almost every piece of HTML uses an opening tag and a closing tag.
- Content goes in between the tags, and the whole thing together is called an element.
<p>
This is an example paragraph element</p>
- Opening tags and closing tags work as a pair.
- Here's another example of tags in HTML:
<h1>My Cat</h1>
<p>My cat is <strong>very</strong> grumpy.</p>
- When the HTML is rendered, the tags themselves are invisible, but the effect they have is not. In this case, the <strong> tag is making the word bold:
My cat is very grumpy.
- Each tag has a different meaning.
- In the example above, there are
<p>
paragraphs,<strong>
bold tags, and<h1>
heading tags. - Tags are used to add HyperText Markup Language to plain text, which your web browser uses to transform into a website.
- <html> and </html> mean start and end an HTML document.
- <head> and </head> mean start and close the header, which gives information about the document.
- <title> and </title> enclose the name of the site, as it appears in the top of the browser window or tab
- <body> and </body> mean start and end the part of the website that users see
- To continue:
- Lets update your website by changing your title tag. You can build a site about anything you want.
- Look in your HTML code for your title tag and change the words inside it.
- Finally, to view your work in a browser, find the file using Finder (Mac) or Files (Chromebook) and double click on it. You should see a blank page with the title you entered in the browser's menu bar.
- Any time you change your file, save it, and refresh the page in your browser to see the changes.
- Note: If you're using a Chromebook, you can create a folder and save your website directly in Google Drive. This will help ensure that all your changes are saved as you're building your website.
20 mins
CSS & Background
Hands On
- Right, our website is pretty boring, so let's start making it more interesting.
- To do this we will use CSS, which is a way of controlling the appearance of your site.
- You can use CSS in 3 ways:
- By using the HTML style="" option in any tag.
- By putting a block of CSS into the header of your page.
- By create an external CSS file, and linking it to HTML.
- We will use method 3, as it is the most powerful because it allows one file to control an entire site.
- To do this, you will need to:
- Now we are going to create a background image in Acorn (Mac) or Pixlr (Chromebook) (or any other graphics application you like):
- If your Acorn trial has expired, go to this link to unlock the full version
- Open your graphics editor, and create a file of 15px by 15px.
- Pick two shades of the same colour, and paint a repeating pattern, such as:
-
- You might have to zoom in to work on your image, as it will be a tiny tile, which we will repeat using CSS. Zoomed in, it looks like this:
-
- Save the file as bg.png, and place it in your website folder.
- Save the file as bg.png, and place it in your website folder.
- Finally, enter the following code into your style.css file, to take this image and repeat it across the page.
- Save your style.css file, return to your browser and refresh your webpage. You should see something like:
Nested Tags
Theory
- Now that we have the basics of a website, we're almost ready to add some content!
- So far, we've learned about tags and added some to our code.
- It's important to understand that HTML is made up of tags nested inside each other.
- To get an idea of how nested tags work, check out this video from Don't Fear the Internet.
- In this video, we can see how HTML tags can be nested. Like a hamburger.
20 mins
Divs
Hands On
- Now, let's get ready to add some content.
- <div> tags (aka divs or divisions) are great ways to hold and place content in HTML.
- First, let's create one div each for the following parts of our website. Each one will have an id, which let's us refer to it from the style sheet.
- Top
- Content
- Footer
- To do this, enter the following code into your index.html file
- Notice how these <div> tags are nested inside the <body> tag.
- Anytime we nest a tag inside another tag, we indent it one level (1 tab or 4 spaces).
- Now, let's enter the following code into style.css to style and position our 3 divs, remembering to save the file when done:
- If everything has worked properly, you should be able to go back to your website in your browser, refresh the page and see something like this:
- Congratulations! You have the start of a stylish website.
20 mins
Playtime 1
Go Nuts
- You now have some time to work on your website on your own. You might want to think about or work on:
- A theme or topic for your site...what is it going to be about?
- Catching up on anything you have missed or that is not working.
- Asking questions about the various codes and what they mean...there are quite a few, and you might not understand them all, but you can make a start.
- Experimenting to see what changing different codes achieves.
30 mins
Links & Top Menu
Hands On
- We are now going to put some content into our topMenu area. This will include our site name, and a menu.
- In HTML, links take a the form of <a href=''>Some Text</a>: I will quickly explain this syntax to you.
- Now, let's put in place our top menu in index.html:
- If you save this and refresh your page, you will see something that looks pretty ugly, so let's add the following to the end of your style.css:
- Save your style.css file and refresh the page in your browser to see something like:
- Notice what happens when you hover over the links.
30 mins
Page Divs
Hands On
- Let's now create the divs for each of the pages in our website, using inline CSS to hide all but the home page.
- Add three new divs inside the
<div id="content">
in your index.html file:
- And then let's add the following to style.css to adjust the appearance:
- Now your site should look something like this:
30 mins
JavaScript
Hands On
- OK, this is where it gets really tricky. Ask questions if you need, and use the video to help you.
- The final piece in the puzzle is setting up our menu to show and hide the different page divs, making the site navigable.
- To do this, we will use JavaScript: this is the "brains" of your website, which can make it interactive.
- Let's do the following:
- Create a new text file and save it as script.js
- Then add the following code to this file:
- Now, in your index.html file, put the following line of code in between your <head> and </head> tags:
-
<script type="text/javascript" src="./script.js"></script>
-
- And finally, add an onclick="" to your menu links:
-
onclick="showContent('home')"
-
- Your menu links should look something like this, changing the ids as required for your pages:
- Now save your files, refresh the page in your browser, and see if your links work.
40 mins
Creating Content
Hands On
- You now have some time to write content for each of the pages in your site.
- You can look online to find the HTML code for including images in your site, and you can also embed content from other sites (such as YouTube, Google Docs, etc).
- Here are some helpful references to get started:
- W3Schools is the definitive resource for HTML info. Check the sidebar, there's a huge selection of info and examples.
- Interneting is Hard has lots more illustrated tutorials about HTML and CSS.
- Mozilla Docs also have a great guide for getting started with HTML.
- Don't Fear the Internet also has more videos to explain the hard parts of web development.
- Try to add each of the following types of content to your site:
- Images
- Videos
- Lists
- Tables
- Links
- Not sure what to add to your site? The internet has a solution!
- Lorem Ipsum is generic placeholder text that designers use. It's mostly nonsense text, which lets you focus on the design of your site and not get stuck on the content.
- But, regular lorem ipsum is full of latin and kinda boring.
- Visit Meet the Ipsums and generate some more interesting text :)
40 mins
Playtime 2
Go Nuts
- You now have this time to continue developing your site independently, catching up on anything you have missed and seeking clarification on any items you do not understand.
- Try to build as much content into your site, to turn it into a real, useful site of some kind.
- Here are some more common formatting tags to try:
<p> </p> |
Paragraph |
<strong> </strong> |
Bold |
<em> </em> |
Emphasis |
<i> </i> |
Italic |
<u> </u> |
Underline |
<s> </s> |
Strikethrough |
<h1> </h1> |
Heading 1
|
<h2> </h2> |
Heading 2 |
<h3> </h3> |
Heading 3 |
<h4> </h4> |
Heading 4 |
<br> |
Line Break. Unlike other tags, this one doesn't need a closing tag. |
70 mins
Playtime 3
Go Nuts
- You now have this time to continue developing your site independently, catching up on anything you have missed and seeking clarification on any items you do not understand.
- Colour palettes are sets of colours that have been designed to look good together: choosing and applying a colour palette is a great way to improve the design of your site. Check out some ideas at ColorLovers.com.
- Remember that you will need to put some content in your footer, such as your Creative Commons license.
- If you get stuck, be sure to google your questions, or ask your teacher or friend.
70 mins
Share & Submit
Finishing Up
- Generally, in order to publish your site online, you would need a server on the web. You could rent space from a company like GreenGeeks, or set up your own server.
- However, this costs money, which we don't want you to have to spend.
- To submit your website, you can upload your whole "My Website" folder to Google Drive, then share the folder and submit the link.
- Alternatively, you can simply submit your ZIP file to Gibbon directly.
Links
- HyperText
- embed
- ColorLovers.com
- Don't Fear the Internet
- Don't Fear the Internet
- GreenGeeks
- Caret
- VSCode
- Mozilla Docs
- this link
- Meet the Ipsums
- Interneting is Hard
- Lorem Ipsum
- W3Schools
Images
![](https://gibbon.ichk.edu.hk/uploads/2013/07/Screenshot 1_crg_fyemmf39mgth.png)
![](https://gibbon.ichk.edu.hk/uploads/2013/07/Screenshot 2_cxtxw64h45_90x5.png)
![](https://gibbon.ichk.edu.hk/uploads/2013/07/Screenshot 3_fj8uqj3wqc57k7u.png)
![](https://gibbon.ichk.edu.hk/uploads/2013/07/Screenshot 4_tii47v5_69ibh--g.png)
![](https://gibbon.ichk.edu.hk/uploads/2013/07/Screenshot 5_ngkbhbo_eyo7gjy3.png)
![](https://gibbon.ichk.edu.hk/uploads/2020/02/bg1_4rw33c705m75it.png)
![](https://gibbon.ichk.edu.hk/uploads/2020/02/bg2_dhg6w745mwp2rmv7.png)
![](https://gibbon.ichk.edu.hk/uploads/2020/10/hamburger-text_722cmmhsnv8pvnr.jpg)
![](https://gibbon.ichk.edu.hk/uploads/2020/10/html-markup-0761f7_9w6foigu5bchod5.png)
![](https://gibbon.ichk.edu.hk/uploads/2020/10/HTML-Skeleton_ycr8ww0oq5k7i8ww.jpg)
![](https://gibbon.ichk.edu.hk/uploads/2020/10/html-tags-elements-72813b_c4efs4gzz666c03.png)
![](https://gibbon.ichk.edu.hk/uploads/2020/10/html_pfprr7fj87isc44.jpg)
![](https://gibbon.ichk.edu.hk/uploads/2020/10/Screenshot2020-06-03at33436PM_pww8vv0tdonssvkg.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/CSS1_bNV2tMYIJI1eDAMg.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/CSS2_uzTkCZn9JCg6w3w3.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/CSS3_1iZaumyqQdKmB1aH.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/CSS4_ff2FKv7FLj4IGBsO.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/CSS5_eyqexjWznZmn5XJf.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/DIVS_Lcmo3o7qe0QSzyZt.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/GettingStarted_0wWP09jg8imcqXEK.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/ScreenShot2023-02-09at100518AM_Mk1qwd4IAhRBK8o9.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/ScreenShot2023-02-09at100702AM_dHx93wDSk9cMam5j.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/ScreenShot2023-02-09at101316AM_tywMseZb8OFVtbfo.png)
![](https://gibbon.ichk.edu.hk/uploads/2023/02/TopMenu_WYLWuPP2sJje4NoU.png)
Embeds
Records
1-3 of
3
Unit | Students |
---|---|
![]() |
Lester Shared on 15/03/2021 |
![]() |
Andrea & Beth Shared on 02/11/2020 |
![]() |
Ryan Shared on 30/11/2017 |