[Web Development Full Stack Course] HTML&CSS Basics

Name: [Web Development Full Stack Course] HTML&CSS Basics
Rating: 4.9 (111 reviews)

This lecture is about HTML & CSS, part of the [Web Development Full Stack Course] series designed to train full-stack web developers. Through this course, you will gain an understanding of HTML, the backbone of web development, and CSS, which makes the web beautiful.

(4.9) 111 reviews

5,389 learners

Level Beginner

Course period Unlimited

realprogrammers

HTML/CSS

Reviews from Early Learners

4.9

5.0

157350

100% enrolled

The ultimate html, css... wow, this is all you need

5.0

강부열

100% enrolled

Thank you so much for the wonderful free lecture.

5.0

T parkkk

33% enrolled

I was impressed by the way the instructor tried to explain in detail even the most practical tips!

What you will gain after the course

Basic HTML Tags
Global Attributes and Local Attributes
Semantic tags
Styling fonts, lists, colors, and tables
Layout Design
Responsive Web

The foundation for creating readable and fast websites!
Learn HTML & CSS the right way ✨

✅ This course is part of the [Full-Stack Web Developer Roadmap] series.

This course is a foundational course covering HTML&CSS as part of the [Web Development Full-Stack Course] lecture series designed to train full-stack web developers.
The Web Development Full Stack Course covers the entire process for full-stack web development, from HTML&CSS → Vanilla JavaScript → Bootstrap → Vue.js → Database → Node.js → to Portfolio.
Upon completing the full-stack web development course, you will acquire not only the foundations of web development but also the skills that can be applied directly to real-world practice.

What is HTML/CSS?

HTML5 & CSS3

HTML and CSS, the foundational technologies of the web, are languages created to connect everything.

HTML stands for Hyper Text Markup Language. It is composed of four words: Hyper, Text, Markup, and Language. Among these words, the most important one is Hyper. This is because the most crucial hint for understanding HTML can be found in Hyperlink.

Unlike text in the paper era, in web browsers or document creation tools like Word, you can connect specific locations of videos, music, photos, files, and text through a feature called hyperlinks. A hyperlink is a reference link that can connect and point to all types of data within a document. It is truly remarkable that the early web had tags that functioned as hyperlinks, such as the <a> tag. Ultimately, HTML, the foundational technology of the web, can be seen as having been born to connect everything.

Hyper has the meaning of 'transcendence' and Text means 'characters'. In other words, Hyper Text is a type of text that transcends ordinary text, where characters and characters, sentences and sentences, and documents and documents are organically connected to communicate with each other.

HTML is a language that can mark up such Hyper Text. Here, markup refers to information used to express the formatting and structure of a document in addition to its content. HTML is a language capable of expressing this markup information and serves as the skeleton of the web.

Meanwhile, CSS (Cascading Style Sheets) is a language responsible for design, like putting beautiful clothes on the skeleton of HTML. Through CSS, you can apply designs for the layout, colors, fonts, sizes, and more of a website.

HTML&CSS, why should you learn them?

You cannot become a web developer without learning HTML/CSS.

Have you ever thought about what makes a website easy to read versus one that isn't? Every day, we live surrounded by countless texts from books, TV, magazines, and blogs. However, some writing flows well while others do not. The same applies to the code written by web developers. Although invisible to the human eye, it is read by software such as search engines and screen readers. Search engines and screen readers interpret the invisible code that makes up a web page to understand the site we have developed. How can we write code that software can easily read and understand? And why is that important?

The way to write well-readable text is to write "simply and clearly." The same applies to code written by developers. When writing markup, unnecessary tags should be removed, and the structure should be kept simple by using only the tags necessary to compose the page.

Today's web must not only be well-crafted but also fast. According to Google research, if a web page takes more than 5 seconds to load, the probability of a visitor bouncing increases by 90%. You must understand the browser rendering process and optimize the resources used within the page to provide a web that is not only readable but also fast. Therefore, to develop a good web, you must build a solid foundation in HTML and CSS, the fundamental languages that make up the web.

Features of this course!

_{Easy and detailed}

_{Practical Application-Focused}

_{Even example codes!}

I will teach you so that you can understand the web development life cycle.
Understand what HTML is.
You will learn the correct usage of each tag that makes up HTML.
You will learn how to write tags that consider mobile users and the visually impaired.
You will master all the basic syntax of CSS.
You will learn CSS for creating layouts and become capable of implementing responsive websites.
All example codes are provided via GitHub.

What will you learn?

_VSCode

_HTML/CSS

_Node.js

We use Visual Studio Code as the development IDE tool. You will learn development methods using Visual Studio Code and discover useful extensions.
Install Node.js and learn what Node.js is.
You can understand the concept of the web and the entire process from planning to development and testing for web development.
You will learn all the basic HTML tags.
You will learn about global attributes and local attributes for HTML tags.
You will learn about semantic tags and become able to use the appropriate tags according to their meaning.
Through CSS, you will learn how to style colors, fonts, lists, tables, and more.
By learning CSS for creating layouts, you will be able to implement responsive webs.

_{HTML Basic Structure and Basic Elements}

_{CSS for Creating Layouts}

Who is the person
who created this course?

The Quality of a Developer

A 24-year software developer who wants to have a positive influence on the world through software technology.
I love sharing knowledge and always enjoy learning new technologies.

I have worked as a consultant and developer building ERP systems for over 60 global companies both domestically and abroad, and I also have experience selling software I developed myself to leading companies in Korea and overseas. I am also the CEO of an IT startup.

Working not only as a developer but also as a UX consultant and sometimes as a business consultant, I have accumulated extensive experience across the entire process of application and service development, from planning to implementation. Now, based on over 20 years of practical experience, I am dedicated to sharing knowledge with a sense of mission to pass on the truly essential skills and proper expertise to my juniors.

Shall we learn more?

I am providing over 200 useful lecture videos through the YouTube channel 'The Quality of a Developer'.
I am the author of the books 'Vanilla JavaScript', 'One Week Before a Vue.js Project', 'One Week Before a Node.js Project', 'IT Terms You Must Know to Become a Developer', 'Beyond Design Thinking to Programming Thinking', 'The Essentials of Smart Contract Development for Solidity Developers', and 'I Don't Teach My Children Coding Yet'.
I am the translator of O'Reilly's 'Learning TypeScript'.

View all in the [Web Development Full-Stack Course] series

Recommended for
these people

Who is this course right for?

Someone who wants to become a web developer
A person starting coding for the first time
People who want to learn HTML
People who want to learn CSS

Need to know before starting?

Anyone can take this course without any prior knowledge.

Hello
This is realprogrammers

11,250

Learners

267

Reviews

152

Answers

4.9

Rating

Courses

A 24-year software developer who wants to make a positive impact on the world through software technology.
I love sharing knowledge and always enjoy learning new technologies.

Working not only as a developer but also as a UX consultant and business consultant, I have accumulated extensive experience across the entire process of application and service development, from planning to implementation. Now, based on over 20 years of practical experience, I am dedicated to sharing knowledge with a sense of mission to pass on the essential skills and authentic expertise that junior developers truly need.

I am providing over 200 useful lecture videos through the YouTube channel 'Quality of Developer'.
I am the author of the books 'Vanilla JavaScript', 'A Week Before Starting a Vue.js Project', 'A Week Before Starting a Node.js Project', 'IT Terms You Must Know to Become a Developer', 'Beyond Design Thinking to Programming Thinking', 'The Essentials of Smart Contract Development for Solidity Developers', and 'I Don't Teach My Children Coding Yet'.
I am the translator of O'Reilly's 'Learning TypeScript'.

(Current) CEO of The Great Co., Ltd.
(Current) CTO of SunSure Co., Ltd.
(Current) CTO of ReturnValue Co., Ltd.
(Current) Technical Advisory Committee Member at Pan-Impact Korea

Email - seungwon.go@gmail.com

Curriculum

All

33 lectures ∙ (14hr 46min)

Course Materials:

Lecture resources

Section 1. HTML

16 lectures ∙ (6hr 57min)

1. Understanding the Web and the Web Development Life Cycle
21:06
2. Configuring the development environment
15:04
3. HTML Basic Structure and Basic Elements
55:37
4. Global and local properties
42:19
5. style attribute
11:54
6. Use tags that make sense
33:27
7. List Tags
10:58
8. Table tags
19:36
9. form element
59:32
10. Main properties of input element
21:22
11. Other form elements
24:35
12. form tag
21:44
13. iframe
21:49
14. Video and Audio
20:24
15. map tag
22:50
16. Semantic tags
15:20

Section 2. CSS

17 lectures ∙ (7hr 48min)

17. What is CSS?
15:02
18. CSS selectors
01:11:00
19. How to apply CSS
19:36
20. How to apply color
22:50
21. Text styling
24:55
22. Font styling
41:14
23. List styling
12:56
24. Link and Cursor Styling
22:27
25. Table styling
08:01
26. CSS Box Model and Element Sizes
26:08
27. Background styling
13:34
28. Border Styling
13:56
29. Defining the position of HTML elements
32:09
30. Overflow
13:58
31. CSS for creating layouts
51:10
32. Responsive Web
53:31
33. [Special Lecture] Browser Rendering Optimization
26:10

Published: 04/10/2023

Last updated: 04/11/2023

Reviews

All

111 reviews

4.9

111 reviews

booyeal7907
Reviews 2
∙
Average Rating 5.0
06/19/2023
5
100% enrolled
Thank you so much for the wonderful free lecture.
157350
Reviews 1
∙
Average Rating 5.0
04/22/2023
5
100% enrolled
The ultimate html, css... wow, this is all you need
devkuka
Reviews 314
∙
Average Rating 5.0
04/15/2023
5
6% enrolled
It was very helpful that you explained everything from the basics of web development in detail. Thank you!
chldbwls12316785
Reviews 9
∙
Average Rating 5.0
08/11/2024
5
100% enrolled
I listened to the lecture while reviewing after a long time and I learned more. Thank you for the great lecture.
noenvy118206
Reviews 1
∙
Average Rating 5.0
06/09/2023
5
33% enrolled
I was impressed by the way the instructor tried to explain in detail even the most practical tips!

realprogrammers's other courses

Check out other courses by the instructor!

[Web Development Full Stack Course] Portfolio - Product Sales Mini Web App Development

realprogrammers

This lecture is the final lecture in the [Web Development Full Stack Course] lecture series for training full-stack web developers, and is a lecture on portfolio project development. By synthesizing everything learned in [Web Development Full Stack Course], you will be able to understand what you have learned while developing an actual web application and directly apply the basic functions.

Basic

Portfolio, Web Application

[Web Development Full Stack Course] Portfolio - Product Sales Mini Web App Development

realprogrammers

[Web Development Full Stack Course] A week before starting a Node.js project - From basics to practice

realprogrammers

This lecture is a lecture on the backend part of the [Web Development Full Stack Course] lecture series for training full-stack web developers. This lecture is based on the contents of the instructor's book <A Week Before Investing in a Node.js Project>.

Basic

Node.js, MySQL, Express

[Web Development Full Stack Course] A week before starting a Node.js project - From basics to practice

realprogrammers

[Web Development Full Stack Course] Learn Database Basics through Netflix and Carrot Market Analysis

realprogrammers

This lecture is a lecture on database basics in the [Web Development Full Stack Course] lecture series for training full-stack web developers. This lecture is a process of understanding database design while analyzing Netflix and Carrot Market. It is a basic lecture where you can learn basic database design principles and SQL.

Beginner

DBMS/RDBMS, MySQL, SQL

[Web Development Full Stack Course] Learn Database Basics through Netflix and Carrot Market Analysis

realprogrammers

[Web Development Full Stack Course] A week before starting a Vue.js project - From basics to practice

realprogrammers

This lecture is a lecture on the front-end part of the [Web Development Full Stack Course] lecture series for training full-stack web developers. This lecture is based on the contents of the instructor's book <A Week Before Investigating a Vue.js Project>.

Basic

Vue.js

[Web Development Full Stack Course] A week before starting a Vue.js project - From basics to practice

realprogrammers

[Web Development Full Stack Course] Bootstrap Basics

realprogrammers

This lecture is a lecture on Bootstrap Basics in the [Web Development Full Stack Course] lecture series for training full-stack web developers. You will learn the basics of Bootstrap and learn how to quickly build high-quality responsive web.

Basic

Bootstrap

[Web Development Full Stack Course] Bootstrap Basics

realprogrammers

[Web Development Full Stack Course] From Pure JavaScript Basics to Practice

realprogrammers

This lecture is a lecture on JavaScript from the [Web Development Full Stack Course] lecture series for training full-stack web developers. This lecture is based on the contents of the book <Vanilla JavaScript> written by the knowledge sharer.

Basic

JavaScript, vanilla-javascript

[Web Development Full Stack Course] From Pure JavaScript Basics to Practice

realprogrammers

Want to learn JavaScript properly?

realprogrammers

This is the most solid foundation course for beginners who want to learn JavaScript properly. This course will be the starting point for understanding the language called JavaScript, and you can perfectly prepare the basics to become a front-end (Vue, React, Angular) developer and server (Node.js) developer.

Basic

JavaScript, ES6, HTML/CSS

Want to learn JavaScript properly?

realprogrammers

Similar courses

Explore other courses in the same field!

[Introduction to Web Development] HTML and CSS developed by yourself with Carrot Market

mjcoding

This course is designed to help you learn HTML/CSS on your own, along with essential concepts.

Beginner

HTML/CSS

[Introduction to Web Development] HTML and CSS developed by yourself with Carrot Market

mjcoding

Scroll interaction that even beginners can create. Part 1 JavaScript

ggangcoding162118

Rather than simply following a specific site, you will learn the scroll interaction know-how and key elements shared by knowledge sharers from the ground up, and learn and create various techniques and motions of UI scroll interactions widely used by domestic companies such as Apple.

Basic

HTML/CSS, JavaScript, jQuery

Scroll interaction that even beginners can create. Part 1 JavaScript

ggangcoding162118

CSS3 Basics by Libehayan - 2024

rebehayan

CSS Welcome to the CSS Basics course based on over 20 years of practical experience! This course is designed for those of you who are taking the first step toward becoming a web publisher and front-end developer.

Beginner

HTML/CSS, nesting, css3

CSS3 Basics by Libehayan - 2024

rebehayan

Coding Basics and Web Full Stack Development of Jocoding

jocoding

Coding No. 1 YouTuber Jo Coding's practical compression! Easy and fun web full-stack development lecture

Beginner

HTML/CSS, JavaScript, Node.js

Coding Basics and Web Full Stack Development of Jocoding

jocoding

Easy to learn and create a responsive web portfolio! #Sulwhasoo

lizb

Easy to make responsive web practice portfolio! #Sulwhasoo portfolio

Basic

HTML/CSS, Responsive Web, Clone Coding

Easy to learn and create a responsive web portfolio! #Sulwhasoo

lizb

[2024] HTML Basics by Lee Behayan

rebehayan

This course covers the basics of HTML grammar. There are missions for various cases, and we will teach you the latest grammar that can be used in practice.

Beginner

HTML/CSS, nvda

[2024] HTML Basics by Lee Behayan

rebehayan

1. Web Development Basics [HTML, CSS]

vmproductor0202

Hello. I have prepared a lecture on HTML, which creates the frame of a web page, and CSS, which decorates the web page. It is the most basic before web development, and it is prepared so that even beginners can learn it easily.

Beginner

HTML/CSS, Java, spring-framework

1. Web Development Basics [HTML, CSS]

vmproductor0202

Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)

dunopi

Our class's pass rate: 90%! (National: 60%) Possible by grasping exam requirements. Don't buy practical books. Too hard.

Basic

HTML/CSS, jQuery

Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)

dunopi

2024 HTML/CSS Basic Solid Super Speed Complete Course

jyoung

It is aimed at beginners of html/css, and it builds a solid foundation, and of course, you can learn practical responsive layout creation.

Beginner

HTML/CSS, Flex, css3

2024 HTML/CSS Basic Solid Super Speed Complete Course

jyoung

Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]

funcoding

This is a full-stack series course aimed at developing web and app services at a commercially viable level for beginners, based on real-world experience developing web services in the field. As Part 2 of this series, this course thoroughly covers the latest HTML5, CSS3, and vanilla JavaScript + ES6, considering responsiveness and compatibility among the various frontend technologies available.

Beginner

HTML/CSS, JavaScript, ES6

Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]

funcoding

Creating the <10,000 Hours Rule> Web Page

jejucoding

Jeju Coding Basecamp's free lectures are back!! Let's build the "10,000 Hours Rule" service together and even deploy it on GitHub!! :) Don't know anything? That's okay. Everything is prepared in this course!

Beginner

HTML/CSS, JavaScript, VSCode

Creating the <10,000 Hours Rule> Web Page

jejucoding

Web Design Technician Practical B-3 Type html+css

dunopi

This is a good example to practice even if it is not a certification exam. Let's slowly follow the B-3 type of web design technician practice.

Basic

HTML/CSS

Web Design Technician Practical B-3 Type html+css

dunopi

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!

Basic

Interactive Web, JavaScript, HTML/CSS

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

Create a web application by following along

Egoing Lee

This course allows you to learn the major trends in web development by following the overall web technologies required to complete a website.

Beginner

HTML/CSS, PHP

Create a web application by following along

Egoing Lee

Practice-oriented HTML5 visualization programming

antfellow77251

Data can be processed and presented in tabular form, but the most important thing is to present the data in a way that humans can understand at a glance.

Basic

HTML/CSS

Practice-oriented HTML5 visualization programming

antfellow77251

[2026 Examination Standards] Perfect Guide for the Web Design & Development Technician Practical Exam

codingworks

This is a specialized practical exam lecture optimized for the Web Design & Development Craftsman (formerly Web Design Craftsman) practical exam, strictly adhering to the exam standards effective from January 1, 2025, to December 31, 2027. Coding Works' Web Design & Development Craftsman practical exam lectures, covering HTML+CSS+JQUERY publishing, are different. It includes fully produced instructional videos for all exam types (Types A, B, C, D, E, and F) for the 2026 Web Design & Development Craftsman exam.

Beginner

HTML/CSS, jQuery, Web Design

[2026 Examination Standards] Perfect Guide for the Web Design & Development Technician Practical Exam

codingworks

A Real-World Guide to Getting a Job as a Publisher (PDF)

codingworks

This "Real Guide for Getting a Job as a Publisher" e-book (PDF) provides detailed information on the HTML+CSS+JQUERY publishing fundamentals essential for employment. It covers efficient publishing study methods, how to identify high-quality courses and instructors, tips for publishing like a professional even as a newcomer, desirable coding habits and principles, how to create a personal portfolio website, collaboration tips for working with designers and developers, essential websites every publisher should know, and how to improve Photoshop UI design skills. Additionally, it provides a detailed explanation of government-funded publisher training programs.

Beginner

HTML/CSS

A Real-World Guide to Getting a Job as a Publisher (PDF)

codingworks

From Figma design to publishing

Michael Kwon

All-in-one course for designers and developers! New UI3 included

Basic

HTML/CSS, Figma

From Figma design to publishing

Michael Kwon

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

Basic

HTML/CSS, jQuery, JavaScript

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

Want to learn JavaScript properly?

realprogrammers

Basic

JavaScript, ES6, HTML/CSS

Want to learn JavaScript properly?

realprogrammers

[Web Development Full Stack Course] HTML&CSS Basics

Reviews from Early Learners

4.9

What you will gain after the course

What is HTML/CSS?

HTML&CSS, why should you learn them?

Features of this course!

What will you learn?

Who is the personwho created this course?

The Quality of a Developer

Shall we learn more?

View all in the [Web Development Full-Stack Course] series

Recommended for these people

HelloThis is realprogrammers

Curriculum

Reviews

realprogrammers's other courses

Similar courses

Who is the person
who created this course?

Recommended for
these people

Hello
This is realprogrammers