Html & Css From Scratch

English Language

What you'll learn

General understanding of what HTML and CSS is

How to style webpages/websites using CSS.

How to make a responsive webpage/website using HTML & CSS

How to make lists, embed images, videos and audios to a webpage.

A complete guide to building responsive HTML forms.

How to make responsive navigation menu links that can work perfectly for all screen sizes using HTML and CSS.

How to embed YouTube APIs to webpages.

General understanding of CSS Grids and CSS Flexbox.

Introduction to CSS animations

How to create animations on a webpage with CSS animations

Practice tests and quizes to boost your knowledge.

Build a NETFLIX home page clone with HTML and CSS from the scratch.

Create and use 2D and 3D CSS transformation methods on HTML elements.

Learn about CSS transitions and how to use them on websites.

Create an Image Gallery with HTML and CSS flexboxes.

Hands-on projects with CSS flexboxes and CSS animations.

Create a story scene with moving characters using CSS animations.

Brief introduction to Online code repository - GITHUB.

Learn and Understand what Semantic HTML is and how and why we use them.

Learn about the CSS box model and its properties.

Learn how to build and style attractive HTML tables.

Learn different ways of styling website navbars - dropdown menu links, fixed/horizontal menu links and side menu links.

Learn how to host a website for free on Netlify.

Learn and understand how to link files effectively in an HTML document.

Requirements

No prior coding skills or experience is required as a prerequisites

A working laptop is required.

Internet access

A code editor, precisely Visual Studio Code

Description

                                      HTML & CSS from scratch: HTML & CSS course for absolute beginners.The "HTML & CSS from scratch" course is a course for absolute beginners: individuals without prior knowledge of HTML and CSS, or newbies in tech generally. This course promises to deliver the necessary knowledge required to make a beginner transition from a "zero" point to a "hero" point. Paschalyn, the instructor in this course, earned her Bachelor's degree as an Educationist and a Computer programmer. During the pandemic, she considered giving full attention to her teaching passion, and so out of a burning desire to give a helping hand to the society, she engaged in a couple of projects where she taught lots of students different courses: graphics design and software programming were her main courses. She began her journey by teaching school children in her home country, the Google CS first Scratch course. In 2022, she held the position of Course Director for the "1000 Women in Canva Scholarship Programme 2022" sponsored by Ingressive for Good(I4G) and Malhub Nig, where she taught a thousand women across the globe Graphics and Motion graphics using Canva. Still the same year, she worked with a Youth Empowerment Programme in her country, "The Scam Project", where she taught undergraduates Graphics design using Canva. The record still counting, she has taught countless school children who are in their teen years Computer Science/Programming both physically and virtually. This course was birthed as a result of the yearning to give an elaborate explanation of concepts in HTML and CSS which most tech newbies may be struggling to come to terms with. Paschalyn explains all the necessary details to a satisfactory level; she also adopts the use of explainer videos to aid her to achieve this goal.Throughout this course, it is advisable for students to practice along in each lesson and also pay good attention in class. The students would engage in a lot of lessons but to highlight a few, students will learn:general understanding of what HTML and CSS are,how to style webpages with CSS,create and style HTML forms, navbars/menu-links, tables, images, etc,CSS grids and CSS flexbox: learn to create an image gallery with CSS flexbox,CSS animations,build 2 hands-on projects on CSS animations: CSS animation story scene, walking sprites in CSS,build a responsive Netflix home page with HTML and CSS,host a website for free on Netlify,semantic HTML - HTML5,CSS box model - margin, padding and border, andCSS transitions and CSS 2D & 3D transforms, etc.This 12 hours course explains all of these with relevant examples and attaches the source codes and each video or other file used, to the lesson.

Overview

Section 1: Introduction

Lecture 1 Introduction to HTML & CSS from the scratch course

Section 2: INTRODUCTION TO HTML

Lecture 2 MEANING AND HISTORY OF HTML

Section 3: OVERVIEW OF AN HTML FILE

Lecture 3 HTML TAGS, ATTRIBUTES AND ELEMENTS

Section 4: HTML COMMENTS & HTML QUOTATIONS

Lecture 4 HTML COMMENTS AND QUOTATION TAGS(blockquote, q, abbr, address, cite, bdo)

Section 5: HTML STYLE AND SCRIPT

Lecture 5 HTML STYLE & SCRIPT

Section 6: HTML IMAGES, HTML FAVICONS & HTML MEDIA

Lecture 6 HTML IMAGES (background images and picture elements)

Lecture 7 HTML FAVICONS

Lecture 8 HTML MEDIA (HTML audio, HTML video and HTML YouTube API)

Section 7: HTML TABLES

Lecture 9 HTML TABLES

Section 8: HTML LISTS

Lecture 10 HTML LISTS (ordered lists, unordered lists and descriptive list)

Section 9: HTML FORMS

Lecture 11 HTML FORM AND INPUT TYPES

Lecture 12 HTML FORM ELEMENTS - select element

Lecture 13 HTML FORM ELEMENTS - textarea element

Lecture 14 HTML FORM ELEMENTS - button element

Lecture 15 HTML FORM ELEMENTS - fieldset and legend element

Lecture 16 HTML FORM ELEMENTS - datalist element

Lecture 17 HTML FORM (INPUT ATTRIBUTES) I

Lecture 18 HTML FORM (INPUT ATTRIBUTES) II

Section 10: HTML CLASSES AND IDS

Lecture 19 HTML CLASSES AND IDS

Section 11: HTML SEMANTIC ELEMENTS - HTML5

Lecture 20 HTML SEMANTIC ELEMENTS

Section 12: FILE PATHS

Lecture 21 FILE PATHS

Section 13: HTML IFRAMES

Lecture 22 HTML IFRAMES

Section 14: RESPONSIVE WEB DESIGN

Lecture 23 RESPONSIVE WEB DESIGN

Section 15: BONUS - IMPORTANT HACKS AND TIPS

Lecture 24 LIVE SERVER

Lecture 25 Shortcut keys for commands

Lecture 26 Introduction to online IDE - Codepen

Lecture 27 Introduction to online code repository - Github

Section 16: INTRODUCTION TO CSS

Lecture 28 MEANING , HISTORY & INTODUCTION TO CSS

Lecture 29 CSS SYNTAX - how to add CSS to an HTML document.

Section 17: CSS SYNTAX CONTINUATION

Lecture 30 CSS COMMENTS

Lecture 31 CSS selectors

Section 18: CSS STYLES

Lecture 32 CSS COLORS

Lecture 33 CSS BACKGROUNDS

Lecture 34 CSS HEIGHT/WIDTH

Lecture 35 CSS IMPORTANT RULE

Section 19: CSS BOX MODEL

Lecture 36 INTRODUCTION TO CSS BOX MODEL

Lecture 37 CSS MARGIN

Lecture 38 CSS BORDER

Lecture 39 CSS PADDING

Section 20: CSS TEXT FORMATTINGS

Lecture 40 CSS TEXT COLOR

Lecture 41 CSS TEXT TRANSFORM

Lecture 42 CSS TEXT SHADOW

Lecture 43 CSS TEXT ALIGNMENT

Lecture 44 CSS TEXT DECORATION

Lecture 45 CSS TEXT SPACING

Section 21: CSS FONT PROPERTIES

Lecture 46 CSS FONT FAMILIES

Lecture 47 CSS FONT SIZE

Lecture 48 CSS FONT STYLE & FONT WEIGHT PROPERTIES

Lecture 49 CSS FONT SHORTHAND PROPERTY

Section 22: CSS DISPLAY PROPERTY

Lecture 50 CSS DISPLAY PROPERTY

Section 23: CSS OVERFLOW PROPERTY

Lecture 51 CSS OVERFLOW PROPERTY

Section 24: CSS POSITIONING

Lecture 52 CSS POSTION PROPERTY

Section 25: CSS Z-INDEX PROPERTY

Lecture 53 CSS Z-INDEX

Section 26: CSS FLOAT PROPERTY

Lecture 54 CSS FLOAT

Section 27: CSS OPACITY/TRANSPARENCY

Lecture 55 CSS OPACITY AND TRANSPARENCY

Section 28: CSS COMBINATORS

Lecture 56 CSS COMBINATORS

Section 29: CSS PSEUDO CLASSES

Lecture 57 CSS PSEUDO CLASSES

Section 30: CSS GRADIENT

Lecture 58 CSS GRADIENT I -linear gradient

Lecture 59 CSS GRADIENT II - radial gradient

Lecture 60 CSS GRADIENT III - conic gradient

Section 31: CSS LINKS

Lecture 61 CSS LINKS

Section 32: CSS BOX SHADOW

Lecture 62 CSS BOX SHADOW

Section 33: STYLED TABLES IN CSS

Lecture 63 STYLED CSS TABLE

Section 34: CSS PSEUDO ELEMENTS

Lecture 64 CSS PSEUDO ELEMENTS

Section 35: CSS GRID

Lecture 65 CSS GRID

Section 36: CSS FLEXBOX

Lecture 66 CSS FLEXBOX

Lecture 67 CSS FLEXBOX PROJECT - RESPONSIVE IMAGE GALLERY

Section 37: RESPONSIVE CSS STYLED NAVBARS USING LISTS

Lecture 68 RESPONSIVE CSS NAVBARS - fixed/horizontal navbar

Lecture 69 RESPONSIVE CSS NAVBARS II - side navbar

Lecture 70 RESPONSIVE CSS DROP DOWN MENU

Section 38: RESPONSIVE CSS FORMS

Lecture 71 RESPONSIVE CSS FORM

Section 39: CSS TRANSFORMS (2D & 3D TRANSFORMATIONS)

Lecture 72 CSS TRANSFORMS (2D AND 3D)

Section 40: CSS TRANSITION

Lecture 73 CSS TRANSITION PROPERTIES

Section 41: CSS ANIMATIONS

Lecture 74 CSS ANIMATIONS

Lecture 75 CSS ANIMATIONS PROJECT I - STORY SCENE ANIMATION

Lecture 76 CSS ANIMATIONS PROJECT II - CSS SPRITES

Section 42: BUILD A RESPONSIVE WEB PAGE WITH HTML & CSS

Lecture 77 RESPONSIVE WEB PAGE

Section 43: CONCLUSION

Lecture 78 How to host a website online - netlify

Lecture 79 END OF LESSON / WHAT TO DO NEXT

Beginners in HTML and CSS,Beginners in web design and development