NiLBiTE Course
Module 1: Introduction to HTML & CSS
Welcome to the World of HTML & CSS!
Greetings, future web designers! Buckle up, because you're about to embark on a journey through the magical realms of HTML and CSS. By the end of this module, you won't just be speaking in tags and selectors—you'll be thinking in them!
Why HTML & CSS?
Let's get the basics out of the way: HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental building blocks of the web. Imagine HTML as the skeleton of a webpage, giving it structure, while CSS is the skin and clothes, dressing it up to look pretty. Without HTML and CSS, the web would be as exciting as a soggy piece of toast.
Course Overview
HTML Basics
- What is HTML?
- Understanding HTML tags and elements
- Creating your first HTML document
- Structuring content with headings, paragraphs, lists, and links
CSS Basics
- What is CSS?
- The role of CSS in web design
- Linking CSS to your HTML
- Basic selectors, properties, and values
- Adding styles to text and layouts
Building a Simple Webpage
- Combining HTML and CSS
- Creating a basic webpage layout
- Adding styles to make it look good
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a webpage using markup. HTML elements are the building blocks of HTML pages, represented by tags.
Basic Structure of an HTML Document Here’s a simple HTML document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type and version of HTML.<html>: The root element of an HTML page.<head>: Contains meta-information about the HTML document (e.g., title, character set, styles).<meta charset="UTF-8">: Specifies the character encoding.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and touch zooming on mobile devices.<title>: The title of the document shown in the browser tab.<body>: Contains the content of the webpage.
Common HTML Tags:
<h1>to<h6>: Headings,<h1>being the highest (most important) and<h6>the lowest.<p>: Paragraph.<a>: Anchor (used for links).<img>: Image.<ul>,<ol>,<li>: Unordered list, ordered list, and list items.<div>: Division or section in a document.<span>: Inline container for text.
What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the appearance of HTML elements.
Basic CSS Syntax
CSS is made up of selectors and declaration blocks.
selector {
property: value;
property: value;
}
Example:
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 14px;
}
How to Include CSS in HTML
1. Inline CSS: Directly in the HTML element.
<h1 style="color:blue;">This is a heading</h1>
2. Internal CSS: Inside a <style> tag in the <head> section.
<head>
<style>
body {background-color: lightblue;}
h1 {color: navy;}
</style>
</head>
3. External CSS: In an external file linked to the HTML document.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Creating a Simple Web Page
Let’s create a simple webpage with HTML and CSS.
1. HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my website.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
2. CSS File (styles.css)
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: darkgray;
font-size: 16px;
}
a {
color: darkred;
text-decoration: none;
}
Practice Exercise
Create a webpage with the following elements:
- A heading that says "My First Web Page".
- A paragraph describing yourself.
- An image of your choice.
- A list of your favorite hobbies.
- A link to your favorite website.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My First Web Page</h1>
<p>Hi, I'm [Your Name]. I'm learning web development.</p>
<img src="path/to/your/image.jpg" alt="A description of the image">
<h2>My Hobbies</h2>
<ul>
<li>Hobby 1</li>
<li>Hobby 2</li>
<li>Hobby 3</li>
</ul>
<a href="https://www.example.com">Visit my favorite website</a>
</body>
</html>
CSS
body {
background-color: white;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: black;
font-size: 18px;
}
ul {
list-style-type: square;
}
a {
color: darkred;
text-decoration: underline;
}
Summary
In this module, you learned:
- What HTML and CSS are.
- The basic structure of an HTML document.
- Common HTML tags and their uses.
- How to write CSS and apply styles to HTML elements.
- How to create a simple webpage combining HTML and CSS.
Feel free to experiment and try creating different layouts and designs. Let me know if you have any questions or need further clarification!
Try this project to get a feel for HTML and CSS.
Free Project: Create Your First Webpage
Try this project to get a feel for HTML and CSS:
Steps to run this sample code
watch this tutorial video
Tutorial Video of project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NiLBiTE - Calculator</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #0f0f0f;
font-family: 'Orbitron', sans-serif;
}
.calculator {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
width: 350px;
text-align: center;
color: #fff;
}
.title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #39ff14;
text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 30px #39ff14;
}
.display {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
width: 100%;
font-size: 2rem;
color: #fff;
text-align: right;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.button {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 10px;
padding: 20px;
font-size: 1.5rem;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.button:hover {
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
.neon-button {
margin-top: 20px;
padding: 15px;
font-size: 1rem;
color: #fff;
border: 2px solid #39ff14;
border-radius: 10px;
background: transparent;
cursor: pointer;
box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 30px #39ff14;
text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 30px #39ff14;
transition: all 0.3s ease;
}
.neon-button:hover {
background: rgba(57, 255, 20, 0.2);
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="calculator">
<div class="title">NiLBiTE - Calculator</div>
<input type="text" class="display" id="display" disabled>
<div class="buttons">
<button class="button" onclick="appendNumber('7')">7</button>
<button class="button" onclick="appendNumber('8')">8</button>
<button class="button" onclick="appendNumber('9')">9</button>
<button class="button" onclick="setOperation('/')">÷</button>
<button class="button" onclick="appendNumber('4')">4</button>
<button class="button" onclick="appendNumber('5')">5</button>
<button class="button" onclick="appendNumber('6')">6</button>
<button class="button" onclick="setOperation('*')">×</button>
<button class="button" onclick="appendNumber('1')">1</button>
<button class="button" onclick="appendNumber('2')">2</button>
<button class="button" onclick="appendNumber('3')">3</button>
<button class="button" onclick="setOperation('-')">−</button>
<button class="button" onclick="appendNumber('0')">0</button>
<button class="button" onclick="appendNumber('.')">.</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="setOperation('+')">+</button>
<button class="button" onclick="clearDisplay()" style="grid-column: span 2;">C</button>
</div>
<button class="neon-button" onclick="window.location.href='https://www.nilbite.online/p/learn-building-and-designing-websites.html'">
Want to join our course?
</button>
</div>
<script>
let display = document.getElementById('display');
let currentOperation = null;
let firstOperand = '';
let secondOperand = '';
function appendNumber(number) {
if (currentOperation === null) {
firstOperand += number;
display.value = firstOperand;
} else {
secondOperand += number;
display.value = secondOperand;
}
}
function setOperation(operation) {
if (currentOperation !== null) {
calculate();
}
currentOperation = operation;
}
function calculate() {
let result;
const a = parseFloat(firstOperand);
const b = parseFloat(secondOperand);
switch (currentOperation) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case '*':
result = a * b;
break;
case '/':
result = a / b;
break;
default:
return;
}
display.value = result;
firstOperand = result;
secondOperand = '';
currentOperation = null;
}
function clearDisplay() {
display.value = '';
firstOperand = '';
secondOperand = '';
currentOperation = null;
}
</script>
</body>
</html>
Screeshot of the result of this project
About the course director
John Becker is an expert in mobile web development with over 10 years of experience in the field. He has taught hundreds of students how to build professional websites using their smartphones.
Time table of module 1
Day 1-5: Module 1 - Introduction to HTML & CSS
Total number of modules in this course= 6
Free trial is available for Module(Day-1, Day-2, Day-3)