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

Web Framework and CMS

Web Framework and CMS

Web Frameworks vs. CMS: Understanding Options for Building Websites

When creating a website or web application, choosing the right tools is crucial for efficiency and functionality. While web frameworks and CMS (Content Management Systems) are not the primary focus of this course, understanding these technologies can help you make informed decisions in your future projects.

Web Frameworks

A web framework is a set of tools and guidelines that simplify the development of websites or web applications. It provides reusable code libraries, predefined structures, and standardized practices to streamline coding and enhance productivity.

Front-End Frameworks

Front-end frameworks focus on enhancing the user interface and user experience. These frameworks, often based on JavaScript, provide developers with tools to create interactive and responsive web pages. Examples include:

  • React.js: A component-based library for building dynamic user interfaces.
  • Vue.js: A lightweight framework designed for building user-friendly applications.
  • Angular.js: A robust framework for creating complex single-page applications.
  • Bootstrap: A popular CSS framework that provides pre-designed components for styling websites quickly.

Back-End Frameworks

Back-end frameworks focus on server-side operations, such as managing databases, handling authentication, and processing requests. These frameworks vary by programming language:

  • Django: A powerful framework for Python, emphasizing simplicity and scalability.
  • Laravel: A feature-rich PHP framework that simplifies backend development.
  • Ruby on Rails: A productive framework for Ruby, known for its convention-over-configuration approach.

Using web frameworks can significantly reduce development time and ensure your code is organized, secure, and scalable.

CMS (Content Management System)

A CMS provides a graphical user interface (GUI) for building and managing websites, eliminating the need for extensive coding knowledge. With a CMS, you can create and publish websites quickly, making it an excellent choice for beginners or projects that don’t require heavy customization.

Advantages of CMS

  • Ease of Use: Build and manage websites without knowing HTML or CSS.
  • Prebuilt Themes and Plugins: Customize your site with templates and add functionalities using plugins.
  • Quick Deployment: Launch your website faster compared to coding from scratch.

Popular CMS Options

  • WordPress: The most widely used CMS, offering thousands of themes and plugins for any type of website.
  • Shopify: A specialized CMS for building and managing online stores with ease.
  • Squarespace: A user-friendly platform with visually stunning templates for small businesses or portfolios.
  • Webflow: A modern CMS with advanced design tools for creating highly customized websites.

Web Frameworks vs. CMS: Which One Should You Choose?

  • Choose a web framework if:

    • You need full control over your website or application’s features and functionality.
    • You are comfortable with coding or are building a highly customized solution.
  • Choose a CMS if:

    • You want a fast and straightforward way to create a website without coding.
    • You are managing content-heavy websites or e-commerce stores.

Understanding these tools can help you select the best approach for your project, depending on its complexity, customization needs, and your technical expertise.


You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Using float for Text Wrapping Around Images

float: left and right

Styling Components with AI: Buttons, Cards, and More

Styling Components with AI: Buttons, Cards, and More

Fine-tuning List Marker Positioning with CSS

list-style-position

Dark Mode Design: Creating Dark Color Palette in CSS

Dark Mode Design: Creating Dark Color Palette in CSS

Using float for Text Wrapping Around Images

float: left and right

Styling Components with AI: Buttons, Cards, and More

Styling Components with AI: Buttons, Cards, and More

Fine-tuning List Marker Positioning with CSS

list-style-position

Dark Mode Design: Creating Dark Color Palette in CSS

Dark Mode Design: Creating Dark Color Palette in CSS

Tags:

CMS

Web Framework

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;