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:
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
A good website is a website that makes sure that visitors find it easy to find what they’re looking for.
A good website needs to have a primary navigation, a navigation refers to the links or buttons that reside on the top of a website which provide access to certain sections on the website and page.
The website needs to have a secondary navigation when the primary navigation is getting too full.
A good website does not need every available page in the navigation, pages which can be overlooked are included in the navigation like privacy policy page
A good website has sections which divide the information according it’s categories, for example about us sections , our services sections and many more
And lastly a good website needs to have images that relate to the content on the website
Before we go into structuring a single webpage – it’s important to discuss the difference between:
These two things are not the same thing and we don’t want you to get confused.
The overall website architecture refers to the overall structure of your website. It determines the following:
This is generally where web developers will start, as it is the overall blueprint of how the website pages will fit together.
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.
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.
Web developers create a wireframe firstly so that all the web developers they are working with, as well as the client, can have the same rough idea of what the overall structure or architecture of the website will look like.
A wireframe simply creates the blueprint of the website, it outlines the website’s structure.
It will show
After creating the wireframe, web developers create a mockup of the website pages they want to build.
A mockup is a visual design of the website that will be used for presentation. Based on the structure of a wireframe. Essentially it’s a more detailed version that shows in image format what the final website will look like.
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.
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.
Create a mock-up of the homepage on your website. It should have a few key sections on it:
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
Here’s an example from a learner:
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:
Once you’ve designed your mock-up, save it and submit it in the Assignment upload section below.
Follow the following prompts when you navigate to the Moqups site:
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.
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.
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
Methods
There a number of special string characters that have different functions when used inside ” “. Here’re some useful and common ones:
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.
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:
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:
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
Introduces Linux as an operating system, the basic open source concepts and an understanding of the Linux commands. Linux is crucial for cybersecurity.
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
Will give you skills in Information Security Threats and Attack Vectors, Attack Detection, Attack Prevention, Procedures, Methodologies and more.