Become a Web Designer - HTML & CSS for Beginners

Contains step by step instructions. Learn HTML, CSS with Flex, Grid, Icons & Responsive Web Design

Created byChandrasekaran Janardhanan

Last updated 7/2022

English

What you'll learn

Fine grained steps and instructions to learn HTML and CSS
Learn to implement a web page Heading, Paragraphs, Links, Images, List and Tables
Learn to implement a web page with Forms to capture data from user
Learn to implement colors, fonts, borders and spacing
Learn to implement screen layouts using Float, Flex and Grid
Learn to apply styles and formatting for tables
Learn to apply styles for form fields
Learn to create layout using position property
Learn to include icons
Learn the basics of Responsive Web Design
Host your pages as website using GitHub pages

Course content

36 sections • 325 lectures • 8h 9m total length

Introduction5:25
What you will learn?4:16
Learning Approach2:51
Explore a four-step learning approach to beginners' web design with HTML and CSS: define requirements, follow step-by-step coding, gain conceptual understanding, and reinforce skills through a case study.
Setting up your course2:40
Adjust playback speed and video quality to suit your bandwidth, set the resolution to 720 pixels for clear coding visuals, and disable auto play to control your course progress.
Install Chrome1:32
Install Brackets Editor2:47

Hello World0:24
Develop your first web page by displaying the hello voice message in a window developed using SDM, with a provided saper layout, and proceed to implement the page.
Create project folder0:39
Open project folder in Brackets1:16
Open the Brackets editor and learn how to access and select a project folder to start writing HTML and CSS, pinning the app for quick access.
Create HTML File0:38
Create an HTML file by clicking the left pane to add a new file and naming it as hallowed HTML, then save and prepare for coding.
Key in HTML Code - Step 10:57
Focus on typing hello world and understanding the code structure, starting with the less-than symbol, exclamation symbol, and doctype space, then Stearman Yemen and the great symbol.
Key in HTML Code - Step 22:08
HTML is a text file0:37
See that HTML is a plain text file, demonstrated by opening the created HTML file in Notepad and viewing its typed content.
Launch HTML file in browser0:35
Launch HTML using Live Preview1:11
Launch HTML with live preview to see immediate changes in the browser, understand when to refresh manually, and use the provided library to test your pages without delays.
Understanding hello.html1:30
Explore how to declare the HTML5 doctype, define the HTML and body tags, and structure headings from h1 to h6, with a preview of how browsers render the page content.
About HTML1:17
HTML in the Internet1:21
Practice Exercise on Heading0:03

Link0:16
Implementing a Link0:59
Understanding Anchor tag1:18
Demonstrate how the anchor tag uses its text, the article title, to label the link and how clicking navigates the browser to the linked page.
Understanding HTML Attributes1:50
Learn how HTML attributes extend tags with name-value pairs, using quotes, and discover that each tag has a predefined attribute list, with multiple and user defined values.
Practice Exercises on Link0:03

Image0:32
Create folder for images0:40
Create a folder for images to hold image files you download from the internet, so you can display them in your HTML project.
Displaying Brackets and Chrome side by side2:19
Download Image1:03
learn how to download Wikipedia image by searching for international space station, selecting a 640 by 408 pixel image, and saving it in the images folder as ISIS dot GPG.
Implement image display1:36
Learn to implement image display by inserting the image tag and using live browser preview to verify the image appears in the article, fixing tag issues along the way.
Practice Exercises on Image0:03

Requirements

No prior development experience required
Desktop PC or Laptop with minimum 4GB of RAM and 500MB hard disk space
On screen instructions provided for Apple Mac users
Brackets Editor - Installation instructions are provided in the course

Description

New to programming?

Don't like programming, but you want to get started?

You are in the right place. HTML is easier to learn than programming languages like Python, Java, C#.

This course contains fine grained steps for anybody to get started.

HTML

Heading
Paragraph
Links
Images
Lists
Tables
Forms
Form Validation
Create web pages that capture data from users using forms
Understand the purpose of semantic tags

CSS

Applying styles using Inline, Internal and External
Understand Element Selector, Id Selector and Class Selector
Understanding and Applying Fonts
- Font Classification - Serif, Sans Serif, Monospace
- Font File Types - TTF, OTF, WOFF, WOFF2
- Understanding fonts installed in your desktop
- Finding fonts from internet
- Apply font using @font-face
- Apply font using @import
- Font Size - Absolute Size Keywords, Relative Size Keywords, Length, Percentage
- Font Weight
Understanding and applying colors
- Red, Green and Blue
- Apply color using RGB
- Apply color using Hexadecimal values
- Other color applying options - RGBA, HSL, HSLA, currentcolor
- Color Picker
Create Borders with various styles and apply border radius
Apply Spacing using Width, Padding and Margin
Position elements using float and clear
Understanding the Box Model
Understanding Border Box Box Model
Design page layout using Float and Clear
Display property
- Apply display property as none, inline, block, inline-block
- Design page layout using flex
- Design page layout using grid and understand about fractional unit
Apply styles to Form Elements
- Style Labels
- Style Input Text
- Style Password
- Style Drop Down
- Style Text Area
- Align Radio Buttons and Checkboxes
- Apply border to Input Text
- Style Buttons with hover effect
Position Elements
- Relative
- Absolute
- Fixed
- Sticky
- Layout Design using Position
Styling List and Table
Using Third Party Library Icons using CSS
Apply Responsive Web Design using CSS
Launch the screens developed during this course into GitHub Pages

Who this course is for:

Graduates
Developers looking to enhance their skills

Become a Web Designer - HTML & CSS for Beginners

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 20min

How Internet Works3 lectures • 6min

HTML - Web Page that displays "Hello World"13 lectures • 13min

HTML - Title4 lectures • 2min

HTML - Paragraph5 lectures • 2min

HTML - Comments1 lecture • 1min

HTML - Link5 lectures • 4min

HTML - External Link3 lectures • 3min

HTML - Image6 lectures • 6min

HTML - List4 lectures • 3min

Requirements

Description

Who this course is for: