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

Frontend Coding

Frontend Coding

Frontend Coding – HTML & CSS Introduction

Frontend coding is the backbone of creating engaging and visually appealing websites. It involves technologies that determine how a website looks and interacts with users. In this course, we focus on two core frontend languages—HTML and CSS—that are essential for building and designing web pages.

HTML: Structuring the Web

HTML (HyperText Markup Language) is the foundation of every website. It provides the structure for web pages, allowing developers to define elements such as headings, paragraphs, links, images, and videos.

Key Features of HTML:

  • Content Structuring: Use elements like <h1> to <h6> for headings and <p> for paragraphs to structure textual content.
  • Links and Navigation: Add hyperlinks using <a> tags to connect pages within or outside your website.
  • Media Integration: Include multimedia such as images (<img>), audio (<audio>), and video (<video>).
  • Forms and Inputs: Create interactive forms for user input using <form>, <input>, and other related tags.

HTML serves as the skeleton of a website, ensuring all content is properly organized and accessible.

CSS: Bringing Style to Your Website

While HTML structures a web page, CSS (Cascading Style Sheets) is used to enhance its visual design. CSS allows you to style and layout HTML elements, transforming plain text into visually appealing web pages.

Key Features of CSS:

  • Styling Elements: Add colors, fonts, and borders to create an attractive design.
  • Responsive Design: Use media queries to ensure your website adapts seamlessly to different screen sizes, such as desktops, tablets, and smartphones.
  • Advanced Layouts: Leverage modern CSS features like Flexbox and Grid for creating flexible and responsive layouts.
  • Animations: Use CSS animations and transitions to create engaging effects like fading elements or sliding menus.

CSS plays a vital role in improving user experience by making websites aesthetically pleasing and easier to navigate.

JavaScript: Adding Interactivity

While HTML and CSS focus on structure and style, JavaScript enables dynamic and interactive functionalities. It is a powerful scripting language that runs in web browsers, allowing developers to create features such as:

  • Interactive menus, like dropdowns and hamburger menus.
  • Popups and modals for alerts or additional information.
  • Dynamic content updates without reloading the page, such as live search or real-time comments.

Although JavaScript is not the focus of this course, it complements HTML and CSS to create fully functional and dynamic websites. For those interested in learning JavaScript, we recommend exploring a dedicated JavaScript introduction course.

Why Focus on HTML and CSS first?

HTML and CSS are beginner-friendly yet fundamental for web development. Mastering these languages provides a strong foundation for creating and styling websites, paving the way for advanced topics like JavaScript, frameworks, and responsive design.

By the end of this course, you’ll have the skills to structure content with HTML and design visually appealing, responsive web pages using CSS.


You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Website Development: Design, Build, and Publish Your Site

Designing, Building and Publishing Websites

CSS Overflow and Creating Horizontal Scroll

CSS Overflow and Creating Horizontal Scroll

CSS Design: Mastering Sizing and Spacing

Chapter 10. CSS: Sizing and Spacing

CSS Margins and Padding: Styling Specific Sides

Margin and Padding for Specific Side

Website Development: Design, Build, and Publish Your Site

Designing, Building and Publishing Websites

CSS Overflow and Creating Horizontal Scroll

CSS Overflow and Creating Horizontal Scroll

CSS Design: Mastering Sizing and Spacing

Chapter 10. CSS: Sizing and Spacing

CSS Margins and Padding: Styling Specific Sides

Margin and Padding for Specific Side

Tags:

Frontend Coding

JavaScript

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;