This lesson is an introduction to the basics of HTML and CSS. The world-wide-web of 2021 works differently to technology in 2050.
These topics indicated below will give you an understanding of the basics before you start on the more practical and in depth parts of building your Website 2021.
Click on the icons to learn more about the topics below.
Have you ever wondered what technologies are used for making websites? HTMl, CSS and JavaScript are the main technologies that are used for websites. Small websites are created using HTML and CSS while dynamic websites are created using HTML,CSS and javaScript.
Complex websites like facebook and Youtube were made using HTML, CSS, javascript and more technologies like Python and PHP that connect the website to a database.
Let’s now discuss HTML, CSS and JavaScript.
When you are viewing a website, it is most likely that your browser will be receiving HTML and CSS from the web server that hosts the site. A web browser is a software that is used to access the internet. Web browsers are software like Chrome, Firefox, Microsoft Edge and many more.
The web browser sends a request to a web server to access a particular web page and the web server replies back to the web browser sending the HTML and CSS code of the page the web browser has requested and the web browser interprets the HTML and CSS code to create the page that you see.
A web server is an online computer that runs websites, it distributes web pages that are requested. Web servers store all the info needed to display websites on browsers.
We have explained a bit how the web works through How do HTML, CSS & JavaScript work together. Let’s dive in deeper now.
These are the steps to how your web works:
When you type a web address into your browser,the browser goes to the DNS server, and finds the real address of the server that the website lives on.
A DNS server is a Domain Name Server, they are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website’s real address before it can retrieve the website.
The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client . This message, and all other data sent between the client and the server, is sent across your internet connection.
HTTP known as Hypertext transfer protocol defines a language for clients and servers to speak to each other.
If the server approves the client’s request, the server sends the client a “200 OK” message, which means “Of course you can look at that website! Here it is”, and then starts sending the website’s files to the browser. Then web browsers display these files into the website that you see on your browser.
Let’s get to understand how HTML, CSS and JavaScript work together and what they are.
HTML is the main ingredient of every web page, regardless of the complexity of a site or number of technologies involved. HTML will always be there. HTML is a hypertext markup language, it is used to define the structure and the content of a web page.
CSS is a cascading styling sheet, it is used to define the style of a web page. Style refers to the colour, the font style, the “prettiness” of the site.
JavaScript is a programming language that is used to make the website dynamic and responsive meaning that when you want something to move, change, or react on a website, you would use javascript for that.
So it’s helpful to understand how HTML, CSS and Javascript work together for websites at a high level. For this course we focus on HTML and CSS, as they are the key components to any website. Then if you’d like to deep dive into Javascript, we have a whole course dedicated to Javascript coming up after this one.
Larger websites in particular those that are updated regularly use a content management system to update content regularly , it will actually be used to produce HTML and CSS that is then sent to the browser.
A content management system, often abbreviated as CMS, is software that helps users create, manage, and modify content on a website without the need of HTML, CSS and javascript coding knowledge.
In simpler language, a content management system is a software that helps you build a website without needing to write all the code from scratch. Content management system reduces the development time that would take you to develop a website.
So although a simple website can be developed using a CMS without needing to do any HTML or CSS coding directly – you are limited to the templates and preset way of displaying content that the CMS gives you.
Most companies will require some level of customisation that the CMS does not offer by itself. This is where a website developer needs to know how to code in HTML and CSS in order to make the pages look exactly how the customer wants.
If your website uses a content management system , you will be able to use your new HTML and CSS knowledge to take more control over how your site looks.
Let’s recap what you’ve just learnt. In this Lesson we covered the following key learning outcomes:
This was important to understand – as websites work very differently in 2021 to 2050.
Now that you know how HTML and CSS interact on the world-wide-web of 2021 – it’s time to start designing your Website 2021.
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.