Web Development
The Internet!
Intro to HTML
Activities & Resources
Over the next weeks you will be learning how to create a basic webpage using HTML and CSS. The class will follow the Code.org web development course!
Eventually you will publish your webpage through Replit.
Basic tags - Paragraphs and headers
Skills we are learning:
The paragraph <p> tag and the heading <h> tags
You know you are done when:
You have a webpage that has at least one heading and at least one paragraph. Example.
Start with the basic formatting tags for headings and paragraphs.
Create a new page with notepad. Use the HTML tags you have just learned. Use the page to tell your teacher a bit about you and the things you like. It should look something like this.
If you want to learn more and extend yourself, have a look at w3schools. It is an excellent reference site.
Optional: do the activities in code.org.
Adding images
Skills we are learning:
The image tag <img> and alt text
Display an image from the internet
Display a local file.
You know you are done when:
You have a webpage that displays at least one image from the web and one image from your computer. Both images will have alt text.
The next tag to learn is the <img> tag
Links
Skills we are learning:
The anchor tag <a> to create links
Link to a page on the internet
Link to a local page
You know you are done when:
You have a webpage that has:
a link to a page on the internet.
a link to another page you made
Next, add links. Links are what makes the web. They are how you navigate between pages and around a site. What sort of webpage doesn't have them!
Lists
Skills we are learning:
The <ul> and <ol> lists and the <li> tag
Create bullet point lists
Create numbered lists
You know you are done when:
You have a webpage that has:
a bullet pointed list
a numbered list
Learn how to create lists in your webpage. Lists are great for organising and displaying all sorts of information
Introducing Replit
Skills we are learning:
To use an online IDE (Integrated Development Environment) for web development.
Sharing your website
You know you are done when:
Your Replit will have a page for each skill and a link in the index.html to each.
Headings and Paragraphs
Images
Links
Lists
You will have shared the link to your page
Host your site with Replit, then share it with friends!
Some useful extra links:
Introducing CSS
Skills we are learning:
The <style> tag, CSS rules and the background-color property
Changing the background color of an html element
You know you are done when:
You have a webpage that has:
a colored background
at least one colored heading or paragraph
Learn about how you use CSS to add colo(u)r to the page.
Play with the font
Skills we are learning:
The font-family, font-size, color properties
You know you are done when:
You have a webpage that has:
At least three differently styled fonts
Each of the font properties has been used
How your text looks says a lot about your site.
Learn about how you use CSS to change the font and the size.
Play with the different fonts and sizes. Go crazy! What does font size 2000 look like?
Once you have done the Progate activities, keep building your introduction page in Replit. It should look something like this.
Google supplies a huge library of free to use fonts. Getting them working is a bit tricky but w3schools has a good tutorial. Have a go if you are feeling adventurous.
Changing size with width and height
Skills we are learning:
The width and height properties
You know you are done when:
You have a webpage that has:
At least two different HTML elements with custom sizes
You have used height and width in your sizes
Selecting things with classes
Skills we are learning:
Selecting HTML with the class attribute
You know you are done when:
You have a webpage that has:
style rules for at least three different classes
at least five html paragraphs using the classes
Learn how to style specific parts of your webpage with classes
This is really good for layout!
HTML Page structure
Skills we are learning:
How to use the proper tags to structure a page
You know you are done when:
You have a webpage that has:
head and body tags
A title and icon
Learn how to style specific parts of your webpage with classes
This is really good for layout!
HTML Structure: Div and span
Skills we are learning:
How to use div and span to structure a page
You know you are done when:
You have a webpage that has at least:
Two divs, containing at least two HTML elements, formatted differently
Two spans, formatted differently
Learn how to style specific parts of your webpage with divs and spans
This is really good for layout!
Advanced layout: columns with Flexboxes
Skills we are learning:
How to use flexbox to put html elements
You know you are done when:
You have a webpage that has at least:
Two flex containers. They will have text and images in them.
One with two columns
One with at least three columns
Putting HTML elements side by side. using flexbox.
Advanced layout: Margin, border, padding
Skills we are learning:
How to use the CSS Box Model adjust the look of our HTML elements
You know you are done when:
You have a webpage that has at least two different elements that have different:
padding
border
margins
Adjust the size of your HTML elements by using borders, margins and padding.
Design principles: Color and contrast
Skills we are learning:
How to use color and contrast well
You know you are done when:
You have at least five copies of this webpage, all styled differently using color.
Learning to use color wisely to create a good looking website.
Some useful extra links:
w3schools Color scheme pickers
Online color scheme generator
RGB value guessing game https://rgbcolorguessing.netlify.app/
Design principles: Hierarchy
Skills we are learning:
How to use some basic design ideas to create a hierarchy.
You know you are done when:
You have at least five copies of this webpage, you have used different tools to create a hierarchy in each.
Learning to create a hierarchy to help people navigate your website.
Some useful extra links:
w3schools more font properties
w3schools more alignment properties
