HTML CSS from scratch
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.
No prior coding skills or experience is required as a prerequisites
A working laptop is required.
A code editor, precisely Visual Studio Code
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.
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
Udemy | English | 12h 12m | 7.65 GB
Created by: Paschalyn Jkamso
You Can See More Courses in the Developer >> Greetings from CourseDown.com