Packt+ | Advance your knowledge in tech

You're reading from HTML and CSS for Beginners - The First Step to Your Coding Career Master Web Development with HTML and CSS Training: Create Stunning Websites and UIs from Scratch

Product type Video

Published in Oct 2023

Publisher

ISBN-13 9781835082447

Length 12hrs 4mins

Edition 1st Edition

Languages

CSS

Tools

Scratch

Concepts

Web Programming

Author (1):

Arkadiusz Włodarczyk

View More author details

Table of Contents (16) Chapters

1. Introduction FREE CHAPTER

Introduction

2. Installing Tools

Download and Installing Visual Studio Code
Setting Your First Project

3. HTML Basics

What Is HTML? What Is Tag?
Basic HTML Document
Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET
Creating Paragraphs | What Are Whitespaces?
Void Tag and Breaking the Line
What Are Attributes? [title] and [lang]
Neutral Tag
Installing Extensions in VSC: AutoRenameTag
Change Background Without Color Generator
Awesome Color Selection Tools for Your Website!
Adding Image to Your Site <img>
Bonus: Where to Get Free Pictures on Your Site?
Getting img Size Using VSC Shortcut
How to Link to Different Folders? Creating PATH Theory

4. HTML | Improving Document and Workflow

Viewing the Source Code of Any Site. What Are Comments?
Meta Tags
Charset - Proper Encoding on Your Site
HTML Doctype
Live Server and Auto-Saving Code Feature
Entities and HTML Validation
How to Properly Name Your Files? Why Is the Main Page Called index.html?
Extension: Sweet Icons in Your VSC

5. HTML | Listing Things

<ol> Versus <ul>
Fast Tricks with Emmet to Use with Lists
<dl> - Definition List
EMMET: Creating Siblings and Treating Two Elements as One

6. HTML | Links

Creating Internal Links
External Links | _blank
#labels
How to Create a Link to Email?
Telephone Link

7. HTML | Text Formatting

Headers - <h1> to <h6>
<cite> Versus <blockquote> Versus <q> - How to Cite Others
<abbr> | <dfn>
Semantic Tags , and vs , , , <s>
Versus
Preformatted Text, Tags: <pre>, <code>, <var>
Multicursor | Searching and Replacing Text in VSC

8. Forms | Basics

What Is Form and Input? How to Create a Basic Form with Login and Password
How to Properly Submit Form and Name Its Inputs
Radio and Form Labels and Legend
Checkboxes
Most Frequently Used Form Attributes
Exercise: How to Create a Contact Form on Your Site?
Getting Date and Time from the User

9. Tables

Basics of Creating Tables
How to Stretch Cells Using rowspan and colspan?

10. CSS | Basics

What Is CSS?
CSS Placement and CSS Priority (Cascade)
Class Versus ID
Useful CSS Extensions

11. CSS | Formatting

div Versus span - Grouping More Elements
Display: Block/Inline/Inline Block
EMMET | Tricks Creating Tags with ID and Class
Selector Rehearsal
Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS
Border
Rounded Corners - Border-Radius
Tables and Padding
How to Create Horizontal Menu? States of Links: link, visited, hover, active
Changing Default List Icons | :: before Selector
How to Make Elements Transparent? Opacity Versus rgba
Changing Cursor | Creating Hint Box
Attribute Selector | Custom Named Attributes In HTML

12. CSS | Text

Text Formatting and Decoration
Paragraph Indentation and ::first-letter Selector
CSS Units: em Versus px Versus %
Line-Height | Letter-Spacing | Word-Spacing
Playing with Fonts
Custom Fonts from Web - Google Fonts

13. CSS Background

Changing Background of Your Website: Set It to Image or Pattern

14. CSS Element Placement

Box Model - Margin, Padding, Border, Content Differences, Centering Elements
Fitting Elements Inside a Container - Properly Counting Width
calc() - Automate the Calculations on Your Site
Custom Properties (Variables)
Box-Sizing - A Solution for Counting Width Faster
Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed
Relative and Absolute: Practical Example
Container Inside Another Container - Let's Make a Template for Website
Exercise: Create a Button That Moves the User to the Top of Website
Float and Clear: Floating Text Around the Image
How to Stick Element Like Menu in One Place?
Exercise: Create Drop Down Menu (Second Level) for Your Main Menu
z-index - Setting the Order of Overlapping Elements
Exercise: Create Box Informing about Cookie Usage at the Bottom of Page
How to React to Trolls That '˜Overflow' Your Content?
Aligning SVG Icons with Text Using display: flex;
Centering Element Vertically and Horizontally - Modal Box

15. HTML

Semantic Tags: article, aside, section, nav, main, header

16. CSS 3 Grid

Grid Template, Row and Column, Gaps, and Auto Expanding
Grid Areas - Name Areas for Your Grid
Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries

You're reading from HTML and CSS for Beginners - The First Step to Your Coding Career Master Web Development with HTML and CSS Training: Create Stunning Websites and UIs from Scratch

Table of Contents (16) Chapters

Authors (2)

Personalised recommendations for you

You're reading from HTML and CSS for Beginners - The First Step to Your Coding Career Master Web Development with HTML and CSS Training: Create Stunning Websites and UIs from Scratch

Table of Contents (16) Chapters

Unlock this book and the full library FREE for 7 days

Authors (2)

Personalised recommendations for you