HTML & CSS basics

Let's understand more about HTML and CSS Basics

What will you learn

in this Lesson?

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.

HTML & CSS Basics

What is HTML and CSS?

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.

How do HTML, CSS & JavaScript

work together?

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.

How does the web work

in more detail?

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.

HTML, CSS & JavaScript

What are they?

Let’s get to understand how HTML, CSS and JavaScript work together and what they are.

Let's look at an analogy

  • HTML is like the skeletal and muscle structure while 
  • CSS is the skin and clothes that makes everything look appealing and 
  • Javascript is what brings the functionality or makes things move.

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.

Content management systems

Have you heard of them?

 

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.

What are the most popular

CMS's out there?

  • WordPress – 1.3 billion websites have been built with WordPress. There are free and paid versions for users. It’s the most popular content management system out there. 
  • Joomla – is totally free and open source. And a really simple platform to use.
  • Drupal – Drupal is less used than the above 2, but still a really solid CMS platform used by many big corporates.

So why do we need

HTML/CSS?

 

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.

HTML and CSS basics

Let's Recap

Let’s recap what you’ve just learnt.  In this Lesson we covered the following key learning outcomes:

  • A basic understanding of how HTML, CSS and Javascript work together
  • How the web works
  • Why we need HTML and CSS
  • Understanding Content Management Systems (CMS)

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.

Next: Designing your website

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.