HTML5 & CSS3

Introduction

Server hosted by: Luka Utevski - lukapravivlogovi@gmail.com

logo

© 2024/2025 Qinshift Academy

Course overview

  • This course is divided into three parts

Part 1

  • Introduction to HTML (HyperText Markup Language)
  • HTML text layout tags
  • Understanding Hyperlinks
  • Website Images
  • Tables and Table Data
  • Forms

Part 2

  • Introduction to CSS (Cascade StyleSheet)
  • Formating Fonts and Texts with CSS
  • CSS and Colors assignments
  • Formating Hyperlinks
  • Box Model - Paddings, Margins and Borders
  • CSS Positioning

Part 3

  • Page Layout Strategies
  • Site Structure and Navigation
  • Validation
  • Responsive Design and Media Queries
  • CSS Frameworks - Bootstrap
  • CSS preprocessors - SASS

Tools you need for this course

  • Text Editor (Notepad, Notapad++, Brackets, SublimeText, VS Code, Atom.....)
  • Web Browser (Firefox, Chrome, Edge....)
  • Yourself on place! :)
  • We don't need web servers yet!

HTML

Hyper Text Markup Language

Introduction

  • Markup language is a system for annotating a document in a way that is syntactically distinguishable from the text, meaning when the document is processed for display, the markup language is not shown, and is only used to format the text
  • Markup language is a language where you add instructions to tell the computer how to display the text enclosed by those instructions
  • HTML is a markup language

Example

< please do this > Hello HTML coders < /end please do this >

Coding Markup

  • Before 2000s the only way to write HTML was by hand
  • You typed the text and then added the HTML tags
  • In 2020 there are different ways of using HTML or CSS, as there are many tools to help you with that
  • Tools you might be using in the future:
    • Visual Studio or any advanced code editors
    • Code generators like: Webflow, Wix, Squarespace, Shopify...
    • Design tools like: Figma, Framer, InVision Studio...

Coding Markup (2)

  • These kind of tools makes web development easier, but they generate code for you, so when you need to maintain it, it will be hard & obscure to modify things when projects get complex
  • Here, you will learn to code, not just drag 'n drop

So...

  • In the introduction part, we will get organized for all future exercises with HTML and CSS
  • We will also learn the basic HTML document structure and basic understanding of HTML

How websites are created

  • All websites use HTML and CSS
  • Content management systems (CMS), Blogs, E-commerce platforms and more complex web applications today often use a few more technologies into the mix.
  • These technologies are usually used to produce/generate HTML and CSS that is then sent to the browser

What you see

  • When you are looking at a website, it is most likely that your browser will be receiving HTML and CSS from the web server that hosts the site
  • The web browser intreprets the HTML and CSS code to create the page that you see
  • Most websites also include extra multimedia content on top of text such as images, audio, video or animations

HTML5 & CSS3

  • Since the web first created there have been several versions of the HTML and CSS - each intended to be an improvement on the previous version
  • The latest versions are HTML5 & CSS3
  • Because HTML5 & CSS3 build on previous versions of these languages, learning these mean you will also be able to understand the earlier versions of them

Structure

HTML Elements

  • An HTML document is comprised of elements, which are created using tags.
  • An element consists of an opening tag, content and a closing tag

HTML Element Attributes

  • Attributes tell us more about the elements
  • Attributes define an element's properties
  • Consider attributes as adjectives.
  • Attributes always go in name/value pairs
  • Attributes provide browsers further instructions on how to render the HTML elements

HTML Document Basic Structure

  • The first element in an HTML document should be the Document Type Definition (DTD)
  • In HTML5 we don't specify the DTD. It's standardized to just writing the following line and the browser understands that we're writing our markup in HTML5


<!DOCTYPE HTML>

HTML Basic Structure -Anatomy

  • Main HTML Document structure contains the following elements:
  • <html>
    • <head></head>
    • <body></body>
    </html>

Basic HTML5 Structure


<!DOCTYPE HTML>
<html>
	<head>
		<title> Page title here </title>
	</head>
	<body>
	 
	</body>
</html>

HTML Comments

  • HTML Comments will help you better describe what you create in your HTML Markup
  • HTML Comments are useful for you, other team members or those who read the HTML Documents
  • HTML Comments can be written using the following way:


<!-- The comment goes here -->

Let's try this in a text editor.

Create an HTML File

  • Open Visual Studio Code on your computer
  • Create a folder for your project
  • Open that folder inside Visual Studio Code
  • Inside that folder create a new file and save it using a file extension .html after the document's name
  • Inside the new HTML document write the basic HTML structure

HTML Elements

Thank you!

Questions?