Website Design

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

Grok Academy Learning

HTML/CSS Starter

Great beginner tutorial series with quizzes, challenges and explanations all the way through

HTML/CSS Beginner 1

A bit more advanced and shorter. Great follow on to the beginner course.

HTML/CSS Beginner 2

And a third course for even more information and practice.

Task 2 | Checkpoint - I know the basics of HTML & CSS

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

HTML 5 Quiz

Test Your knowledge to be sure you are ready to move on!

CSS Quiz

Think you know enough now?

Task 4: Make a Website with me!

This is a complete video tutorial to make a cool basic website from start to finish.

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.

Submit the link to your completed website to your teacher now

Note: Files are HERE

Task 5 | Learning Checklist

Learned enough?

Make sure you've gained all the foundational knowedge that you'll need to progress.

Click on the document to the right and make a copy of the Google Doc in your own Drive.

Submit this document to your teacher for the first checkpoint

WebDev Learning CheckList

Congratulations. You are ready for the assessment.

Extension and Extras

Grid Layout Explanation

Try it out in your own project

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

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

Layouts 101

Figma Tutorial for beginners

HTML Basics

There are three main parts every HTML document (page) should have.

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">

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>

</head>

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

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>

</head>

<body>

<h1>Hello World!<h1>

<p>Welcome to my site, its not that good.</p>

</body>

</html>

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

TOOLS

Emmet - shorthand HTML and CSS

Atom: https://atom.io/packages/emmet

VS Code: https://code.visualstudio.com/docs/editor/emmet

Font-Awesome - great icons

https://fontawesome.com/

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

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

basic

https://www.w3schools.com/html/

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

basic

https://cssreference.io/

https://www.w3schools.com/css/

responsive / modern design

CSS Animations: https://www.youtube.com/watch?v=Nloq6uzF8RQ

Page updated

Report abuse