Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

HTML & CSS IntroductionChapter 1. Overview of Website Development

Chapter 1. Overview of Website Development

Introduction to Website Development: HTML & CSS Basics

Understanding the fundamentals of website development is the first step for anyone aspiring to create an online presence. This chapter provides a high-level introduction to how websites work, essential terminologies, and the key stages of website creation, including design, coding, and publishing. Whether you are new to web development or looking to refresh your knowledge, this chapter equips you with foundational concepts that are crucial for creating effective and functional websites. By the end of this chapter, you'll have a clear understanding of what it takes to bring a website from concept to reality.

What We Cover in This Chapter

The following topics are covered in this chapter:

How Websites Work

This section explains the basic mechanisms of how websites function, including the roles of clients, servers, and key technologies such as HTTP, URL, and IP addresses. You’ll learn the essential steps in how a web browser communicates with a server to display a website.

Designing, Building, and Publishing Websites

This part provides an overview of the three main stages in website development: designing the structure and user flow, coding with HTML, CSS, and JavaScript, and publishing your website using hosting services.

Designing Websites

In this section, you’ll explore the four critical steps in web design: concept design, user flow creation, wireframing, and designing mockups or prototypes. Each step ensures that your website meets its objectives and appeals to your target audience.

Building Websites – Frontend and Backend Coding

You’ll learn the difference between frontend and backend coding, their roles in website creation, and common technologies used in each area. Topics include HTML, CSS, and JavaScript for frontend development and server-side languages like PHP and Python for backend systems.

Web App vs. Website

This section outlines the distinctions between websites and web applications, emphasizing their purposes and functionalities. Websites are typically static and focused on delivering information, while web applications are more interactive and dynamic.

Frontend Coding

This part introduces the key technologies in frontend coding—HTML for structuring content, CSS for styling, and JavaScript for adding dynamic interactions. The focus is on HTML and CSS, with examples of their real-world applications.

Web Framework and CMS

You’ll learn about tools that simplify website development, such as web frameworks and content management systems (CMS). Popular frameworks include React.js and Bootstrap. Popular CMS platforms include as WordPress and Shopify.

Publishing Websites

This section covers hosting services for making your website accessible online. It introduces cloud-based hosting services like GitHub Pages, Vercel, and Netlify and their role in publishing websites effectively.

Learn offline for better focus!
A book for this course is available on Amazon.

HTML & CSS Visual Guide

Step By Step Manual for Complete Beginners with Zero Coding Experience to Build Stunning Websites from Scratch

Your browser does not support the video tag.
Get the Book Now

More Topics to Explore

Exploring inline, block, and inline-block in CSS

inline, block and inline-block

Adjusting Font Weight and Style in CSS

font-weight and font-style

Designing Footer and Bottom Bars in HTML & CSS

Footer and Bottom Bar

Types of Links in HTML: A Comprehensive Overview

Overview of Adding Links and Images

Exploring inline, block, and inline-block in CSS

inline, block and inline-block

Adjusting Font Weight and Style in CSS

font-weight and font-style

Designing Footer and Bottom Bars in HTML & CSS

Footer and Bottom Bar

Types of Links in HTML: A Comprehensive Overview

Overview of Adding Links and Images

Tags:

Frontend Coding

Website Building

HTTP

CMS

HTML & CSS Introduction
Course Content

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;

FAQ: Chapter 1. Overview of Website Development

How do websites work?

Websites function through the interaction between clients and servers, using technologies like HTTP, URL, and IP addresses. A web browser communicates with a server to display a website.

What are the main stages of website development?

The main stages include designing the structure and user flow, coding with HTML, CSS, and JavaScript, and publishing the website using hosting services.

What is the difference between frontend and backend coding?

Frontend coding involves HTML, CSS, and JavaScript for creating the user interface, while backend coding uses server-side languages like PHP and Python to manage data and server operations.

How do websites differ from web applications?

Websites are typically static and focus on delivering information, whereas web applications are interactive and dynamic, offering more complex functionalities.

What tools simplify website development?

Web frameworks like React.js and Bootstrap, and content management systems (CMS) such as WordPress and Shopify, help simplify the website development process.