Microsoft HTML & CSS

Previous Lesson
Next Lesson

Designing your website

My Courses Microsoft HTML & CSS Designing your website
Let's start designing Website 2021

Designing your website

Before we start coding

In this lesson, we will learn about what web developers create first before creating any website. This topic will help you to show your friends what the end product of Website 2021 will look like. This will help so you can get feedback on it before doing the actual HTML coding.

So in this lesson we will be learning: 

Click on the icons below to see the topics.

1 2 3

When designing a website, there are a few things we need to consider to make sure that we are developing a good website. Let’s have a look on the few things we need to consider when creating a good website

Click on the icons below to see the information inside the tabs.

Website architecture

Vs webpage structure

Before we go into structuring a single webpage – it’s important to discuss the difference between: 

  • A website’s overall structure or the “architecture” of the website overall vs
  • The structure of an individual webpage

These two things are not the same thing and we don’t want you to get confused.

Website overall architecture

The overall website architecture refers to the overall structure of your website. It determines the following:

  • the hierarchy of the pages
  • which pages sit on which menu
  • how the pages link together 

This is generally where web developers will start, as it is the overall blueprint of how the website pages will fit together.

Webpage structure

We’ll be looking at the HTML structure of the webpage in the next section, where we will be learning to code in HTML. 

For now – just know that each webpage has it’s own structure in HTML. Don’t get confused with the overall website structure or architecture. 

Mock-ups and Wireframes?

What are they?

In 2021 – web developers in the workplace started by creating wireframes and mockups before they start developing a website. Please note that in most cases web developers worked as a team.

 

Both mockup and wireframes are static designs of a web page that features many of its final design elements but is not functional yet. That means it doesn’t work yet. It’s just a diagram or image of what your web page will look like.

Mockups can be written on paper and also can be created on a computer using a variety of different software such as Canva or Moqups.

Let’s look at the an example

Of a website mockup:

Click here to see various examples of mockups in the real world:

Click here

Design Website 2021’s structure

Create a Mock-up for Website 2021

So now it’s your turn to think about how you would design a website for humans living in 2021. Specifically you want to get the attention of NASA scientists in 2021. You’ll need it to bold, with images from the future. 

Your task

Create a mock-up of the homepage on your website. It should have a few key sections on it:

  1. Intro
  2. Research
  3. Action
  4. Contact us

Click on each of the + icons below to see what Website 2021 should include:

This section should let NASA know what the problem is (Astrid x1 meteor and the EverWave) and how they can solve the problem. Show a shocking image like this one to grab attention. 

 

Here’s an example from one of our learners: 

This section on Website 2021 should give more details on the

    • Meteor
    • The consequences – let humans in 2021 know the catastrophic consequences to Earth if they don’t act. 
    • You’ll need images and videos, a table with stats (NASA will provide) and links to relevant research

 

Here’s an example from a learner: 

  • In this section, you’ll need to give the NASA scientists of 2021 instructions on what they must do. 
  • It will include a list of the rocket launch information – its launch coordinates and any other information like size, speed, material – that is important (hint: this will require your 2050 imagination hat :-))

Here’s an example from a learner: 

Lastly – we want to give NASA scientists in 2021 a chance to message us through a HTML form.

 

Here’s an example from a learner:

Click here to see an example mock-up from a learner

Click here

Tip: Moqups – We recommend that you use Moqups or Canva to create your website mockup. However, you can use whatever tool you’d like – even powerpoint, word or google slides.

Click on the pink button to access Moqups or Canva.

Moqups
Canva

Get to it....

Design your mockup

Once you’ve designed your mock-up, save it and submit it in the Assignment upload section below. 

Optional tip on Moqups:

Steps to creating your account

Follow the following prompts when you navigate to the Moqups site:

Let's recap

So now you’ve created a draft outline or mock-up of Website 2021. In a real-world client situation 2021, you would show this mock-up to your client and get feedback and their input. 

 

We recommend that you show your website mock-up of Website 2021 to a friend or family member who can give their feedback, and where feasible, make edits and improvements to your mock-up. 

 

Next – we’re going to start coding in HTML.

Let's start coding Website 2021
Previous Lesson
Back to Course
Next Lesson

Pain Points – specific problems that prospective customers of your business are experiencing. In other words, you can think of pain points as problems, plain and simple.

 A User – is any person that interacts (by inputs) with a program without having to write the code directly. For example, you are the user to the code that makes your browser/website run. When you clicked on this pop-up, that was the input that made this explanation come up when the code detected it.

To book your spot – click here

All learners who are aspiring web developers will have an opportunity to build a website for a live NGO or charity client as part of their community service hours. This project will be run jointly with Community Hours – so all your time spent counts towards your LO credits. This event is suitable for learners, parents and their teachers.

TechWays will be providing the WordPress course and web dev resources for free to any learner wanting to participate. 

Besides the amazing community service you’ll be doing for a charity in need – you’ll also be building your portfolio of web dev skills. Who knows – web dev could become a side hustle for extra income?

Book your spot HERE

Indentation – In the written form of many languages, an indentation or indent is an empty space at the beginning of a line to signal the start of a new paragraph.

Text editor – is the part of the IDE where you write the code. Most text editors highlight words with different properties like functions to help you distinguish them from one another. 

Homogeneous – of the same kind; alike throughout.

Heterogeneous – diverse in character or content; containing different things

Prompt – to  cause or bring about; to make something happen. For example making someone to say or write something.

Troubleshooting is a form of problem solving, often applied to repair failed products or processes on a machine or a system. It is a logical, systematic search for the source of a problem in order to solve it, and make the product or process operational again.

String Built-in Functions/Methods

There are a lot of strings functions/methods in Python. Find full list in course manual. Here’s are some that you find useful in this course:

Functions

  • len(varName) – Returns the length of a list, string
  • join(varName) – Converts the elements of an iterable into a string.

Methods 

  • varName.capitalize() – Converts the first character to upper case.
  • varName.center(length) – Returns a centered string
  • varName.count(“?”) – Returns the number of times a specified value (?) occurs in a string (varName).
  • varName.endswith(“?”) – Returns true if the string ends with the specified value.
  • varName.find(“?”) – Searches the string for a specified value and returns the position of where it was found.
  • varName.format(placeholder = value) – Formats specified values in a string.
  • varName.index(“?”) – Searches the string for a specified value and returns the position of where it was found.
  • varName.isalnum() – Returns True if all characters in the string are alphanumeric.
  • varName.isalpha() – Returns True if all characters in the string are in the alphabet.
  • varName.isascii() – Returns True if all characters in the string are ascii characters.
  • varName.isdecimal() – Returns True if all characters in the string are decimals.
  • varName.isdigit() – Returns True if all characters in the string are digits.
  • varName.isidentifier() – Returns True if the string is an identifier.
  • varName.islower() – Returns True if all characters in the string are lower case.
  • varName.isupper() – Returns True if all characters in the string are upper case.
  • varName.isnumeric() – Returns True if all characters in the string are numeric.
  • varName.isprintable() – Returns True if all characters in the string are printable.
  • varName.isspace() – Returns True if all characters in the string are whitespaces.
  • varName.istitle() – Returns True if the string follows the rules of a title.
  • varName.ljust(value) – Returns a left justified version of the string.
  • varName.rjust() Returns a right justified version of the string.
  • varName.lower() – Converts a string into lower case.
  • varName.upper() – Converts a string into upper case.
  • varName.strip() – Returns a trimmed version of the string.
  • varName.lstrip() – Returns a left trim version of the string.
  • varName.rstrip() Returns a right trim version of the string.
  • varName.partition() – Returns a tuple where the string is parted into three parts.
  • varName.replace(“old”, “new”) – Returns a string where a specified value is replaced with a specified value.
  • varName.rfind() – Searches the string for a specified value and returns the last position of where it was found.
  • varName.rindex() – Searches the string for a specified value and returns the last position of where it was found.
  • varName.rpartition() – Returns a tuple where the string is parted into three parts.
  • varName.rsplit() – Splits the string at the specified separator, and returns a list.
  • varName.split() – Splits the string at the specified separator, and returns a list.
  • varName.splitlines() – Splits the string at line breaks and returns a list.
  • varName.startswith() – Returns true if the string starts with the specified value.
  • varName.swapcase() – Swaps cases, lower case becomes upper case and vice versa.

String Special Characters

There a number of special string characters that have different functions when used inside ” “. Here’re some useful and common ones:

  • \n – Newline – Everything after it goes to next line.
  • \t – Horizontal tab – creates a tab space, similar to when you use ‘tab’ on keyboard.
  • \b – backspace – deletes the character before the it.
  • \r – carriage return – same as \n

In programming Concatenation is a process of appending one string to another. 

\ – escape character is a string character that tell Python that the next character after it should be taken as a string and not as an instruction.

str ( ) is a built-in function that converts and sequence of characters (numbers especially) in to text. 

Mad Libs is a phrasal template word game created by Leonard Stern and Roger Price. It consists of one player prompting others for a list of words to substitute for blanks in a story before reading aloud.

type ( ) is a built-in function (still to cover what built-in functions are later) that determines the Data Type of any data presented. 

input ( ) is a built-in function (still to cover what built-in functions are later) allows a user to insert info into a program/the code. 

print ( ) is a built-in function (still to cover what built-in functions are later) that executes data inside the brackets. The results get printed out on the console/results section.

Integrated Development Environment – A digital environment used to develop games, software, hardware, that offers integration from debugging to compiling. 

Variables

More about variables

Info about variables

To book your spot – click here

#WOW – What Outstanding Work – Awards: join us to learn from our students. 

Our top 20 learners are from St Andrews for Girls, Reddam Umhlanga, Evolve Online, Nova Pioneer and Sutherland High. 

Learners will be presenting their final projects. Come celebrate their successes and lessons learnt with us at our TechWays #WOW Awards.

This event is suitable for learners, parents and their teachers. Book your spot HERE

To book your spot – click here

 

Calling on all high schoolers interested in tech as a career. Join us on Thursday 22 September at 5:30pm.

 

We will be sharing:

  • Some “hot button/in-demand” career pathways – including Automation
  • the skills needed to access these careers
  • some of the job realities in these careers

There are only 100 spaces – so book your spot now – please RSVP here Book

To access the recording – click here

Calling on all high schoolers interested in tech as a career to join us on 16 September at 5:30pm. If you missed it, we’ll host another one on 18 November. 

We covered the following:

  • general tech career tips
  • a few “hot button/in-demand” career pathways and jobs
  • the skills needed to access these careers
  • some of the job realities in these careers

To access the recording – click here

To book your spot – click here

We will be talking to Noelene Kinsley from GC Network. Noelene has been specialised in the exciting career of Genetic Counseling and wants to share her passion for making the world a healthier place using genetics….and data science technology. 

Let’s hear more about the trends in the health/genetics industries, where jobs are moving to and what kind of skills you’ll need in this exciting world of opportunities out there. 

This event is suitable for learners, parents and their teachers. Book your spot HERE

To book your spot – click here

We will be talking to Jason Suttie from Devson. Jason has been in the tech world since he was six years old. He headed IT innovation unit at RMB and has since left to start up his own software consulting company – solving problems and building solutions for clients around the world. 

Let’s hear more about the trends in the software and programming industries, where jobs are moving to and what kind of skills you’ll need in this exciting world of opportunities out there. 

Book your spot HERE

Linux Essentials

Introduces Linux as an operating system, the basic open source concepts and an understanding of the Linux commands. Linux is crucial for cybersecurity.

Comptia
Security+

Gives you the baseline skills you need to secure a company’s systems, software and hardware. This certificate gives practical hands-on skills to pursue a career in cyber security

Certified Ethical Hacker

Will give you skills in Information Security Threats and Attack Vectors, Attack Detection, Attack Prevention, Procedures, Methodologies and more.

Learn More