HTML & CSS Tutorial
Languages used to build and design the face of every website.
Study
HTML & CSS I
Estimated 3h50m
0%
HTML & CSS are languages used to build and design the appearances of your websites. Let's learn the fundamentals of web programming whilst actually building a web page.
このレッスンで学べること
-
1. Getting Started with HTML
-
Getting Started with HTML
-
Headings and Paragraphs
-
Links
-
Images
-
Lists
-
-
2. Getting Started with CSS
-
Colors
-
Font Size and Font Family
-
Width, Height and Background Color
-
Classes
-
-
3. The Basic Layout
-
The Structure of HTML
-
The Structure of HTML (2)
-
The Basic Layout
-
-
4. The Header
-
The Structure of the Header
-
The Layout of the Header
-
Padding
-
-
5. The Footer
-
The Structure of the Footer
-
The Layout of the Footer
-
-
6. The Contents
-
The Main Layout
-
The Structure of the Content
-
Borders
-
Padding and Margin
-
-
7. Forms
-
The Layout of the Form
-
The Layout of the Form (2)
-
Study
HTML & CSS II
Estimated 4h30m
0%
In this lesson, we'll be developing the landing page of a website. Let's learn the advanced techniques of HTML & CSS to create a modern web page!
このレッスンで学べること
-
1. The Basic Layout
-
Getting Started
-
The Basic Layout
-
-
2. The Top Section
-
The Layout of the Top Section
-
Opacity and Letter Spacing
-
Creating Buttons
-
Adjusting the Layout
-
Using Icons
-
-
3. The Header
-
The Layout of the Header
-
Creating a Login Link
-
Improving the Login Link
-
-
4. The Lesson List
-
The Layout of the Lesson List
-
Aligning the Lessons
-
Adjusting the Layout
-
-
5. The Message Section
-
The Layout of the Message Section
-
Creating a 3D Button
-
Applying CSS On Click
-
-
6. The Footer
-
The Footer
-
-
7. Fixing the Header
-
Fixing the Header
-
Dojo
HTML & CSS I
Estimated 2h30m
0%
Let's test your HTML & CSS skills! Follow the specification document to create a web page from scratch.
このレッスンで学べること
-
1. Developing a web page from scratch
-
The Header
-
The Top Section
-
The Content Section
-
The Form Section
-
The Footer
-
Dojo
HTML & CSS II
Estimated 3h20m
0%
Let's create the web page you developed in the HTML/Study/2 lesson from scratch. If you're able to complete this lesson by yourself, your HTML...
このレッスンで学べること
-
1. Developing a modern web page from scratch
-
The Top Section
-
The Header
-
The Lesson List
-
The Message Section
-
The Footer
-
Study
HTML & CSS III
Estimated 2h
0%
In this lesson, you'll be learning how to make your website responsive. Responsive Web Design makes your web page look good on all devices, like desktops, tablets, and phones.
このレッスンで学べること
-
1. Responsive Web Design
-
Getting Started
-
-
2. Media Queries
-
Using Media Queries
-
Layouts with Media Queries
-
box-sizing
-
-
3. Making Your Page Responsive
-
Responsive Design Preparation
-
The Tablet Layout
-
Fixing the Responsive Layout
-
The Smartphone Layout
-
The Smartphone Layout (2)
-
Making the font-size Responsive
-
max-width
-
Making the Header Responsive
-
Dojo
HTML & CSS III
Estimated 1h40m
0%
In this lesson, we'll create the web page you developed in the HTML/Study/3 lesson by yourself. Let's master how to optimize the layout of you...
このレッスンで学べること
-
1. Mastering Responsive Web Design
-
Making the Header Responsive
-
Making the Top Section Responsive
-
Making the Lesson List Responsive
-
Making the Footer Responsive
-
Study
HTML & CSS Flexbox
Estimated 1h
0%
In this lesson, you'll learn about the CSS layout module, Flexbox. While this module has many properties, you'll focus on the most commonly used ones. Flexbox is really useful, so g...
このレッスンで学べること
-
1. What is Flexbox?
-
Getting Started
-
-
2. Implementing Flexbox
-
display: flex
-
flex: auto
-
-
3. Responsive Design
-
flex-wrap: wrap
-
Media Queries
-
flex-direction
-
Start the lesson from the initial state.
Warning: your code will be deleted.
Review the lesson without
resetting your code.