Learning HTML and CSS from scratch

Name: Learning HTML and CSS from scratch
Rating: 4.8 (18 reviews)

create an website using HTML and design with CSS

Created byDinesh Kumar Thangavel

Last updated 5/2024

English

What you'll learn

HTML(hypertext markup language)
CSS(cascading style sheets)
integration and best practices
project work and practice

Course content

5 sections • 24 lectures • 2h 11m total length

INTRODUCTION OF HTML/CSS4:23
Learn HTML and CSS basics, including structure, elements, tags, attributes, and block line versus inline elements. Set up Visual Studio Code and Live Server to work with the HTML structure.
SETTING UP VS CODE TO HTML4:29
Set up Visual Studio Code for HTML as part of learning HTML and CSS from scratch, laying the foundations for writing and organizing HTML documents.
USING IMAGES AND HYPERLINKS IN HTML8:59
Explore using anchor tags with href links, alt text for images, iframes for embedding pages, and basic HTML structures like lists, tables, and forms with text and number inputs.
ADDING TABLES AND FORMS7:19
Learn to build HTML forms with select menus, radio buttons, check boxes, and placeholders; use table, image, frame, anchor elements, and basic structure to guide user input.
SEE ABOUT SEMANTIC FORMAT IN HTML8:20
Explore semantic format in HTML to structure web pages effectively, complementing your learning of HTML and CSS from scratch.
PLAY WITH HTML

Intro4:51
Create a dog photo app using HTML and JavaScript, structuring page with doctype HTML, title, body, and main, then add sections, images, and links with target _blank for interactive browsing.
Let's start to code DogPhotoApp4:42
Explore creating a dog photo app using HTML basics: ul and li lists, figure with figcaption and image src/alt, em emphasis, headings, and both unordered and ordered lists.
Adding images in HTML5:08
Learn to use the img tag with alt text, add captions, and build forms with fieldset, legend, label, and input elements including action and value attributes for dog photo submissions.
creating a dog form4:49
Create dog form in html with checkboxes, fieldset, and legend, capturing traits like loving, lazy, and energetic, and apply checked, name, value, id attributes with labels for dog photo app.

CSS introduction3:55
Explore the fundamentals of cascading style sheets, mastering selectors, properties and values to control layout, typography, colors, and responsive design for visually appealing, user-friendly web pages.
CSS syntax5:32
Explore css syntax by learning properties, values, and declarations, applying selectors to p elements, and understanding specificity, inline styles, and embedded style blocks for precise web design.
Examples of css and css outline3:56
Learn to use class and id selectors for efficient, scalable CSS, and explore unique id attributes, inline, internal, and external styles, linking stylesheets, and the CSS box model and outline.
Explain the css outline styles2:50
Explore the CSS outline property, which draws a visible outline around an element for focusing using the focus pseudoclass, without changing layout, with solid, dotted, or dashed options.
Explain of types of css and their examples3:06
Learn the three CSS targeting methods—inline, internal, and external—emphasizing how external styles boost modularity and reusability while internal and inline styles affect scope, maintainability, and separation of concerns.

Intro of tribute page project and setting up of vs code3:02
Explore practical CSS in Visual Studio Code by creating an external CSS workflow, linking style.css to a semantic tribute page about doctor APJ Abdul Kalam, and separating content from presentation.
Start to code of tribute page5:43
Learn HTML and CSS basics by building a tribute page with a linked stylesheet, centered text, and an alice blue background color, then present an image with figure and figcaption.
Adding a content in tribute page4:18
Create a tribute page with semantic HTML, headings, paragraphs, images, and links, styled by CSS and planned with outlines and responsive design. Include biographies like A.P.J. Abdul Kalam.
Start to code in css page6:52
Master html and css basics to build a tribute page by applying id and class attributes, adding images with captions, and styling line height, margin, color, and typography.
Making Alterations in img and ul tag with css4:33
Learn to alter img and ul elements with css by applying display block, height auto, and margins; set list style type desc and use css logical properties for tribute page.

Intro of portfolio project5:12
Learn to introduce a personal portfolio with HTML and CSS by presenting your background, skills, and goals, linking social profiles, and prompting visitors to explore or contact you.
setting up vs to portfolio project8:24
Build a basic portfolio page using anchor tags for links and downloads, divs with about and contact sections, and a front end developer skills area with a progress bar.
adding content to portfolio9:20
Add content to your portfolio using HTML and CSS to showcase your work as you learn from scratch.
styling in css for portfolio6:43
Structure your portfolio with HTML5 semantic elements like header and footer to boost accessibility and SEO, and use CSS media queries and fluid layouts for responsive design.
Making Alterations in img and ul tag with css5:30
Learn to style anchor elements with padding, text decoration, display inline-block, margins, and border radius, link HTML to CSS in VS Code, and add an editable image to showcase portfolio.

Requirements

No need to know any programming languages to create an website

Description

This course provides a comprehensive introduction to HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets), the foundational languages of web development. Participants will learn the fundamental concepts, syntax, and best practices for creating well-structured and visually appealing web pages.

Course Objectives:

1. Understanding HTML : Participants will gain a solid understanding of HTML elements, tags, attributes, and semantic markup to create the structure and content of web pages.

2. Mastering CSS : Participants will learn how to use CSS to style and layout HTML elements, including selectors, properties, values, and cascading rules.

3. Building Responsive Websites : Participants will explore techniques for designing responsive and mobile-friendly websites using CSS media queries and flexible layouts.

4. Creating Engaging User Interfaces : Participants will discover how to enhance user experience through CSS animations, transitions, and interactive elements.

5. Optimizing Code and Accessibility : Participants will learn strategies for writing clean, efficient HTML and CSS code, as well as techniques for ensuring accessibility and compatibility across different browsers and devices.

Course Modules:

1. Introduction to HTML and CSS: Basic syntax, structure, and purpose of HTML and CSS.

Target Audience:

- Beginners with little to no prior experience in web development.

- Students, professionals, and anyone interested in learning the basics of HTML and CSS for creating websites.

Prerequisites:

- Basic computer literacy and familiarity with web browsing.

- No prior coding experience required.

By the end of this course, participants will have the skills and knowledge to create well-designed, responsive websites using HTML and CSS, laying the groundwork for further exploration and specialization in web development

Who this course is for:

beginners of HTML and CSS to make an website and design it

Learning HTML and CSS from scratch

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 34min

DOGPHOTOAPP4 lectures • 20min

INTRODUCTION TO CSS5 lectures • 19min

PROJECT-TRIBUTE PAGE5 lectures • 24min

PROJECT - PERSONAL PORTFOLIO5 lectures • 35min

Requirements

Description

Who this course is for: