• Post category:StudyBullet-17
  • Reading time:17 mins read

HTML & CSS from scratch
English Language

What you will 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.

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 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.


Get Instant Notification of New Courses on our Telegram channel.


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, and
  • CSS 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.

English
language

Content

Introduction

Introduction to HTML & CSS from the scratch course

INTRODUCTION TO HTML

MEANING AND HISTORY OF HTML
SECTION 2 QUIZ

OVERVIEW OF AN HTML FILE

HTML TAGS, ATTRIBUTES AND ELEMENTS
Overview of an HTML FILE

HTML COMMENTS & HTML QUOTATIONS

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

HTML STYLE AND SCRIPT

HTML STYLE & SCRIPT
HTML STYLINGS (HTML CSS)
HTML SCRIPT (HTML JAVASCRIPT)

HTML IMAGES, HTML FAVICONS & HTML MEDIA

HTML IMAGES (background images and picture elements)
HTML IMAGES
HTML FAVICONS
HTML FAVICONS
HTML MEDIA (HTML audio, HTML video and HTML YouTube API)
HTML MEDIA

HTML TABLES

HTML TABLES
HTML TABLES

HTML LISTS

HTML LISTS (ordered lists, unordered lists and descriptive list)
HTML LIST

HTML FORMS

HTML FORM AND INPUT TYPES
HTML FORM ELEMENTS – select element
HTML FORM ELEMENTS – textarea element
HTML FORM ELEMENTS – button element
HTML FORM ELEMENTS – fieldset and legend element
HTML FORM ELEMENTS – datalist element
HTML FORM (INPUT ATTRIBUTES) I
HTML FORM (INPUT ATTRIBUTES) II
HTML FORMS

HTML CLASSES AND IDS

HTML CLASSES AND IDS
HTML CLASSES AND IDS

HTML SEMANTIC ELEMENTS – HTML5

HTML SEMANTIC ELEMENTS
Semantic HTML

FILE PATHS

FILE PATHS
FILE PATHS

HTML IFRAMES

HTML IFRAMES
HTML IFRAMES

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN

BONUS – IMPORTANT HACKS AND TIPS

LIVE SERVER
Shortcut keys for commands
Introduction to online IDE – Codepen
Introduction to online code repository – Github

INTRODUCTION TO CSS

MEANING , HISTORY & INTODUCTION TO CSS
CSS SYNTAX – how to add CSS to an HTML document.
INTRODUCTION TO CSS

CSS SYNTAX CONTINUATION

CSS COMMENTS
CSS selectors
CSS SYNTAX CONTINUATION

CSS STYLES

CSS COLORS
CSS BACKGROUNDS
CSS HEIGHT/WIDTH
CSS IMPORTANT RULE
CSS STYLES

CSS BOX MODEL

INTRODUCTION TO CSS BOX MODEL
CSS MARGIN
CSS BORDER
CSS PADDING
CSS BOX MODEL

CSS TEXT FORMATTINGS

CSS TEXT COLOR
CSS TEXT TRANSFORM
CSS TEXT SHADOW
CSS TEXT ALIGNMENT
CSS TEXT DECORATION
CSS TEXT SPACING
CSS TEXT

CSS FONT PROPERTIES

CSS FONT FAMILIES
CSS FONT SIZE
CSS FONT STYLE & FONT WEIGHT PROPERTIES
CSS FONT SHORTHAND PROPERTY
CSS FONT

CSS DISPLAY PROPERTY

CSS DISPLAY PROPERTY
CSS DISPLAY

CSS OVERFLOW PROPERTY

CSS OVERFLOW PROPERTY
CSS OVERFLOW

CSS POSITIONING

CSS POSTION PROPERTY
CSS POSITION PROPERTY

CSS Z-INDEX PROPERTY

CSS Z-INDEX
CSS Z-INDEX

CSS FLOAT PROPERTY

CSS FLOAT

CSS OPACITY/TRANSPARENCY

CSS OPACITY AND TRANSPARENCY
CSS OPACITY & TRANSPARENCY

CSS COMBINATORS

CSS COMBINATORS
CSS COMBINATORS

CSS PSEUDO CLASSES

CSS PSEUDO CLASSES
CSS PSEUDO CLASSES

CSS GRADIENT

CSS GRADIENT I -linear gradient
CSS GRADIENT II – radial gradient
CSS GRADIENT III – conic gradient

CSS LINKS

CSS LINKS
CSS LINKS QUIZ

CSS BOX SHADOW

CSS BOX SHADOW

STYLED TABLES IN CSS

STYLED CSS TABLE

CSS PSEUDO ELEMENTS

CSS PSEUDO ELEMENTS
CSS PSEUDO ELEMENTS

CSS GRID

CSS GRID

CSS FLEXBOX

CSS FLEXBOX
CSS FLEXBOX PROJECT – RESPONSIVE IMAGE GALLERY

RESPONSIVE CSS STYLED NAVBARS USING LISTS

RESPONSIVE CSS NAVBARS – fixed/horizontal navbar
RESPONSIVE CSS NAVBARS II – side navbar
RESPONSIVE CSS DROP DOWN MENU

RESPONSIVE CSS FORMS

RESPONSIVE CSS FORM

CSS TRANSFORMS (2D & 3D TRANSFORMATIONS)

CSS TRANSFORMS (2D AND 3D)

CSS TRANSITION

CSS TRANSITION PROPERTIES

CSS ANIMATIONS

CSS ANIMATIONS
CSS ANIMATIONS PROJECT I – STORY SCENE ANIMATION
CSS ANIMATIONS PROJECT II – CSS SPRITES

BUILD A RESPONSIVE WEB PAGE WITH HTML & CSS

RESPONSIVE WEB PAGE

CONCLUSION

How to host a website online – netlify
END OF LESSON / WHAT TO DO NEXT