Embedded Files
WHAT IS WEBSITE DEVELOPMENT?
WHAT IS WEBSITE DEVELOPMENT?
What is Website Development?
What is Website Development?
Front End Web Developers create the pages that people see when they browse the web. From your Netflix and Youtube to the page you are looking at right now, all are made with HTML and CSS.
In this NCEA Level 1 Module you'll becoming a front-end developer by learning HTML and CSS and developing a website from a design. You'll also be using github to keep track of your code, as you develop, test and enhance your website.
UNDERSTAND HTML & CSS
UNDERSTAND HTML & CSS
Task#1 Do ONE of these ONLY!!
Task#1 Do ONE of these ONLY!!
HTML/CSS Starter
HTML/CSS Starter
Great beginner tutorial series with quizzes, challenges and explanations all the way through
OR
HTML/CSS Beginner 1
HTML/CSS Beginner 1
A bit more advanced and shorter. Great follow on to the beginner course.
OR
HTML/CSS Beginner 2
HTML/CSS Beginner 2
And a third course for even more information and practice.
Task 2 | Checkpoint - I know the basics of HTML & CSS
Task 2 | Checkpoint - I know the basics of HTML & CSS
W3 Schools
W3 Schools
While there is a great written tutorial on both HTML and CSS on W3 Schools, it remains one of the best places to go for help on anything to do with HTML and CSS.
Familiarize yourself with this site. You'll be using a lot when you start making your own websites.
Can you find example code for a navbar? Can you see how you might use Grid? Have a good look through and move on to the next task.
Task 3 | Test your knowledge
Task 3 | Test your knowledge
Task 4: Make a Website with me!
Task 4: Make a Website with me!
This is a complete video tutorial to make a cool basic website from start to finish.
By completing this, you will be able to be assessed against US29776- Use the main features of an HTML editor to create a website.
We'll cover:
Setting up your project in VSCode
Setting up and using version control on github
Linking and writing CSS to your HTML pages
Coding common layout sections (eg Hero Section)
Publishing and viewing it LIVE with github pages.
Complete the document IN SCHOOLOGY and submit when you are done
Note: Resource Files are HERE
Task 5- Submit your assignment!
Task 5- Submit your assignment!
Extension and Extras
Extension and Extras
Grid Layout Explanation
Grid Layout Explanation
Try it out in your own project
Using an IDE
Using an IDE
VSCode is a lightweight cross platform tool to write HTML and CSS. Take a look at how it can help you be more productive at this link.
Using Github with VSCode
Using Github with VSCode
This takes practics and you will probably mess up a few times but it's worth it. Become a real developer and join the other 100 Million developer who rely on this to keep their code safe.
Making Wireframes
Making Wireframes
Layouts 101
Layouts 101
Figma Tutorial for beginners
Figma Tutorial for beginners
HTML Basics
HTML Basics
There are three main parts every HTML document (page) should have.
DOCTYPE
DOCTYPE
First, the doctype - this lets a browser know what version of HTML it's dealing with, and therefore how it should interpret the code and display the page.
<!doctype html>
All modern web pages should be using this style of doctype - just having 'html' in <!doctype html> means the page will be coded in HTML5, which is the current version.
Earlier versions of HTML often used long complex doctypes but these have now largely been superseded by the new HTML5 standard. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <!-- Superceeded, don't use this -->
HEAD
HEAD
Next comes the HEAD section, which is where the important stuff that isn't actually part of the page content goes. Note: the text inside the <title> tags is what displays in the browsers tab.
<head>
<title>This is the page title</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
BODY
BODY
And finally, the BODY where all the visible content for the page belongs.
<body>
<h1>Hello World!<h1>
<p>Welcome to my site, its not that good.</p>
</body>
ALL TOGETHER
ALL TOGETHER
At this point, you should also ensure that all the HTML on the page is wrapped in HTML tags, giving a complete(?!) basic html document that looks like this:
<!doctype HTML>
<html>
<head>
<title>This is the page title</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<h1>Hello World!<h1>
<p>Welcome to my site, its not that good.</p>
</body>
</html>
CSS BASICS
CSS BASICS
Your CSS document should follow some simple rules
Use whitespace to make things readable
Like all code, use comments to explain groups of CSS, and tricky bits of CSS
'Chunk' your CSS into obvious blocks
Start with your global rules:
Useful Links
Useful Links
TOOLS
TOOLS
Emmet - shorthand HTML and CSS
Emmet - shorthand HTML and CSS
Atom: https://atom.io/packages/emmet
VS Code: https://code.visualstudio.com/docs/editor/emmet
Font-Awesome - great icons
Font-Awesome - great icons
YouTube
YouTube
There are many good YouTube channels on web design. Kevin Powell, Web Dev Simplified, Fireship, Traversy Media etc.
NOTE: A lot has changed in web design in the last few years, so make sure the videos you watch are recent so that you don't end up learning how to make a dinosaur.
General Design
General Design
Designing a better website: https://www.youtube.com/watch?v=ykn4XNDwW7Q
Typography: https://www.youtube.com/watch?v=6ardZEhjvV0
Google Fonts: https://fonts.google.com/
Use Firefox for development, not Chrome: https://www.youtube.com/watch?v=a-V8GFtwjos
HTML
HTML
basic
basic
https://www.w3schools.com/html/
responsive / modern design
responsive / modern design
Build a responsive site from scratch: https://www.youtube.com/watch?v=bn-DQCifeQQ
Flexbox layout ideas: https://www.youtube.com/watch?v=vQAvjof1oe4
CSS
CSS
basic
basic
https://www.w3schools.com/css/
responsive / modern design
responsive / modern design
CSS Animations: https://www.youtube.com/watch?v=Nloq6uzF8RQ
Page updated
Report abuse