Master HTML & CSS

    Index

    HTML

    1. HTML Roadmap

    2. Websites to learn HTML 👇

    3. YouTube Channels👇

    4. Real-Time HTML Editors👇

    5. HTML Cheatsheet page👇

    CSS

    1. CSS Roadmap

    2. YouTube Channels👇

    3. CSS Projects Ideas

    4. CSS Project Resources

    5. CheatSheets

    6. HTML/CSS Code Snippets👇

    Getting Started: How to Guides to Start your HTML & CSS Journey🥳

    1. How to download Visual Studio Code:

    How to Install Visual Studio code in your system

    1. Install Sublime code editor:

      How to download Sublime code editor

    1. Create stunning code screenhots:

    Create beautiful code snippets with ease

    1. CSS Box-Shadow in Seconds:

    Generate css box-shadow in seconds

    1. Generate Click path css code:

    How generate clip path CSS code in second

    • Want to make a fantastic step-by-step manual like the one shown above?

      Visit => scribehow.com

    1. HTML Roadmap

    1. Understanding the full form of HTML

    2. Anatomy of tags

    3. HTML5 boilerplate

    4. Heading tags

    5. ul, ol, li, tags

    6. img, span tag

    7. Table tags for layout

    8. Form and Validation

    9. Some more semantic elements

    10. Basic attributes

    11. Seo Basics

    2. Websites to learn HTML 👇

    1. FreeCodeCamp

    🔗 https://www.freecodecamp.org/

    1. Coursera

    🔗 https://in.coursera.org...

    1. W3Schools

    🔗 https://www.w3schools.com

    1. HTMLDog

    🔗 https://htmldog.com/

    1. Traversy Media

    🔗 https://www.traversymed...

    1. Javatpoint

    🔗 https://www.javatpoint.com/html-tutorial

    1. Html

    🔗 https://html.com/

    1. Developer Mozilla

    🔗 https://developer.mozil...

    1. Geeksforgeeks

    🔗 https://www.geeksforgeeks.org/html/

    1. Mygreatlearning

    🔗 https://www.mygreatlearning.com/academy/learn-for-free/courses/html-tutorial

    3. YouTube Channels👇

    1. FreeCodeCamp

    🔗 https://www.youtube.com...

    1. Simplilearn

    🔗 https://www.youtube.com/watch?v=7mdEvKyLoYM

    1. Edureka

    🔗 https://www.youtube.com...

    1. Programming with Mosh

    🔗 https://www.youtube.com/watch?v=qz0aGYrrlhU

    1. SuperSimpleDev

    🔗 https://www.youtube.com...

    1. Intellipaat

    🔗 https://www.youtube.com/watch?v=gG3tTJRrzeA

    1. Apna College

    🔗 https://www.youtube.com...

    1. CodeWithHarry

    🔗 https://www.youtube.com/watch?v=BsDoLVMnmZs

    1. codedamn

    🔗 https://www.youtube.com...

    1. Great Learning

    🔗 https://www.youtube.com/watch?v=THp_EowtJ0M

    1. My Lesson

    🔗 https://www.youtube.com...

    12, Codevolution

    🔗 https://www.youtube.com/watch?v=N8YMl4Ezp4g

    4. Real-Time HTML Editors👇

    1. Codepen

    🔗 https://codepen.io/pen/

    1. Squarefree

    🔗 https://htmledit.square...

    1. HTML Online

    🔗 https://html-online.com/editor/

    1. HTML Code Editor

    🔗 https://htmlcodeeditor....

    1. Liveweave

    🔗 https://liveweave.com/

    1. HTML Instant

    🔗 https://www.htmlinstant...

    1. LIVEditor

    🔗 http://liveditor.com/index.php

    1. LightTable

    🔗 http://lighttable.com/

    1. Visual Studio Code

    🔗 https://code.visualstud...

    1. Atom

    🔗 https://atom.io/

    5. HTML Cheatsheet page👇

    1. Stanford

    🔗 https://web.stanford.ed...

    1. Geeksforgeeks

    🔗 https://www.geeksforgeeks.org/html-cheat-sheet-a-basic-guide-to-html/

    1. Softwaretestinghelp

    🔗 https://www.softwaretes...

    1. Digital

    🔗 https://digital.com/tools/html-cheatsheet/

    1. Freecodecamp

    🔗 https://www.freecodecam...

    1. Htmlcheatsheet

    🔗 https://htmlcheatsheet.com/

    1. Hostinger

    🔗 https://www.hostinger.i...

    1. Interviewbit

    🔗 https://www.interviewbit.com/html-cheat-sheet/

    1. Html . co

    🔗 https://html.com/wp-con...

    1. Websitesetup

    🔗 https://websitesetup.org/html5-cheat-sheet/

    1. Htmlreference

    🔗 https://htmlreference.io/

    1. Overapi

    🔗 https://overapi.com/html

    1. devhints

    🔗 https://devhints.io/html

    1. Cheatography

    🔗 https://cheatography.com/tag/html/

    CSS

    1. CSS RoadMap

    1. Inline, internal and external CSS

    2. Selectors

    3. Background

    4. Color

    5. Box model

    6. Height and width

    7. Margin and padding

    8. Border

    9. Positioning

    10. display

    11. Layouts

    12. Grid and Flex

    13. Alignment

    14. Fonts

    15. Animation

    16. Pseudo-classes

    17. Media query

    2. Youtube Channels

    👉 CodeDam 🔗 https://t.co/rrKJQImvCf

    👉 FreeCodeCamp 🔗 https://t.co/FyEfCHNBvh

    👉 CodeWithHarry 🔗 https://t.co/dffbOAjndW

    👉 Apna College ⚡️ 🔗 https://t.co/o7VgJJSOa

    👉 EdurekaIn 🔗 https://t.co/EWVH8YwxDR

    👉 Intellipaat 🔗 https://t.co/5Gf0o1ajwY

    👉 Great Learning 🔗 https://t.co/SkfrMkhDd9

    👉 Traversy Media 🔗 https://t.co/XefmEYOh8C

    👉 Clever Programmer 🔗https://t.co/S8aGk8UqUt

    👉 DevTips 🔗 https://t.co/67aGA0HJht

    👉 The Net Ninja 🔗 https://t.co/eBnxf1aOU2

    👉 ProgrammingWithMosh 🔗 https://t.co/lNri2SBYPU

    👉 Learn Code Academy 🔗 https://t.co/CO2S02RCCO

    👉 MyLesson 🔗 https://t.co/GYZ2KbVbop

    👉 Academind 🔗 https://t.co/CDMdBMpO8Q

    👉 Derekbanas 🔗 https://t.co/3FtKfFZ3jQ

    👉 Thapa Technical 🔗 https://t.co/HLZkNAtGTW

    👉Codevolution 🔗 https://www.youtube.com/watch?v=N8YMl4Ezp4g

    👉 Simplilearn 🔗 https://t.co/j2bcSq1rPm

    👉 TheNewBoston 🔗 https://t.co/uYabX2bN2z

    4 WebDevSimplified 🔗 https://t.co/4r3ob771ig

    👉 Kevin Powell 🔗 https://t.co/X2X7YE3JKW

    👉 WsCube Tech 🔗 https://t.co/Om5ahoJehn

    👉 Pepcoding 🔗 https://t.co/k8GrPBT2yY

    3. HTML & CSS Project Ideas 👇

    1. Survey Form

    2. Website Products Display

    3. Technical Documentation Page

    4. Adding Animation

    5. Event page

    6. Video Background Site

    7. Create an Image Slider

    8. e-Voting System

    9. Music Store

    10. A Tribute Page

    11. Landing Page

    12. Webpage Including Form

    13. Parallax Website

    14. Landing Page

    15. Restaurant Website

    16. Photography Site

    17. Personal Portfolio

    18. Technical Documentation website

    19. Restaurant Website

    20. A Questionnaire page

    4. CSS Project Resources

    1. Create your first HTML/CSS project

    🔗 http://youtube.com/watch?v=wzWmZYi4qMg…

    1. One Page Full Website Project For Practice

    🔗 http://youtube.com/watch?v=ZFQkb26UD1Y…

    1. How To Make A Website Header Using HTML And CSS

    🔗 https://www.youtube.com/watch?time_continue=3&v=Oa9LTDR9ugU&feature=emb_title

    1. Create a Website for Beginners

    🔗 http://youtube.com/watch?v=kMT54MPz9oE…

    1. Build a responsive website from scratch with HTML & CSS

    🔗 http://youtube.com/watch?v=8w_kHIAkucA…

    1. Building a pricing block with HTML & PuRe CSS

    🔗 https://www.youtube.com/watch?v=DGYMErzcflw

    1. Build Glass Website with HTML and CSS Tutorial

    🔗 http://youtube.com/watch?v=O7WbVj5apxU…

    1. How To Make Website using Html & CSS

    🔗 http://youtube.com/watch?v=enBAFo2kEfE…

    1. how To Make Ecommerce Website Using HTML And CSS

    🔗 https://www.youtube.com/watch?v=yQimoqo0-7g

    1. Building 10 Websites - From Design to HTML and CSS

    🔗 http://youtube.com/watch?v=Rz-rey4Q1bw…

    1. Build a Responsive Website

    🔗 http://youtube.com/watch?v=p0bGHP-PXD4…

    1. Creative Agency Website From Scratch | HTML & CSS

    🔗 https://www.youtube.com/watch?v=lvYnfMOUOJY

    1. Create a Website With Video Background | HTML & CSS

    🔗 http://youtube.com/watch?v=8MgpE2DTTKA…

    1. Build a Modern Landing Page Website | HTML & CSS

    🔗 http://youtube.com/watch?v=X1dz0xRbSJc…

    1. Create a Website With Video Background | HTML & CSS

    🔗 https://www.youtube.com/watch?v=8MgpE2DTTKA

    1. Microsoft Homepage Clone - CSS Grid, Flex & Media Queries

    🔗 https://www.youtube.com/watch?v=uKgn-To1C4Q

    1. Basic Parallax Website With HTML & CSS

    🔗 http://youtube.com/watch?v=JttTcnidSdQ…

    1. Hulu Webpage Clone | HTML & CSS

    🔗 http://youtube.com/watch?v=9OVLaEjY-Rc…

    1. Product Landing Page | Build & Deploy | HTML & CSS

    🔗 https://www.youtube.com/watch?v=61R5kn_kYwY

    1. HTML & CSS Mobile UI Layout | CVS Clone

    🔗 http://youtube.com/watch?v=1_ljUv6cvVE…

    1. Build a Responsive Grid CSS Website Layout From Scratch

    🔗 http://youtube.com/watch?v=moBhzSC455o…

    1. HTML & CSS Easy Elegant Landing Page With Blur Effect

    🔗 https://www.youtube.com/watch?v=HZv8YHYUHTU

    1. Build a Responsive, Mobile First Website - HTML5 & CSS3

    🔗 http://youtube.com/watch?v=XsEnj-1hG2o&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=12…

    1. Pluralsight Login Page Clone - HTML & CSS

    🔗 http://youtube.com/watch?v=wIx1O5Y5EB4&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=10…

    1. Pure CSS Hamburger Menu & Overlay

    🔗 https://www.youtube.com/watch?v=DZg6UfS5zYg&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=18

    1. Basic Parallax Website With HTML & CSS

    🔗 http://youtube.com/watch?v=JttTcnidSdQ&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=19…

    1. Build A Responsive HTML & CSS Template With FlexboxGrid

    🔗 http://youtube.com/watch?v=qlA7dputiNc&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=40…

    1. Real Glassmorphism Card Hover Effects | Html CSS Glass morphism Effects

    🔗 https://www.youtube.com/watch?v=hv0rNxr1XXk

    1. Glass morphism 3D Flip Debit Card UI Design using Html & CSS

    🔗 http://youtube.com/watch?v=XeX1vsaufF0…

    1. Creative Our Team Section Using HTML & CSS

    🔗 http://youtube.com/watch?v=Q22Tli-D4mw…

    1. How to Build An HTML 5 Website With Responsive Layout

    🔗 https://www.youtube.com/watch?v=oSA6bpLbSJg

    1. Website Design With HTML And CSS

    🔗 http://youtube.com/watch?v=PgAZ8KzfhO8…

    1. How To Make Product Page On Website Using HTML And CS

    🔗 http://youtube.com/watch?v=YuDH0PSlGwg…

    1. Make Complete College Website Design

    🔗 https://www.youtube.com/watch?v=6Mgyufh46gM

    1. How To Make A Website With Background Video Using HTML and CSS

    🔗 http://youtube.com/watch?v=xekZXhumB0k…

    1. How To Make A Responsive Website Design Using HTML And CSS

    🔗 http://youtube.com/watch?v=Rtf42_Bp-Fo…

    1. How To Make Login & Registration Page On eCommerce Website

    🔗 https://www.youtube.com/watch?v=vOXGuNVRGpA

    6. CheatSheets

    1. Htmlcheatsheet

    https://htmlcheatsheet.com/css/

    2. OverAPI➖

    https://overapi.com/css

    3. Toptal ➖

    https://www.toptal.com/css/css-cheat-sheet

    4. Lighthouselabs

    https://www.lighthouselabs.ca/en/blog/css-cheat-sheet

    7. HTML/CSS Code Snippets👇

    👉 codepad.co

    👉 snipplr.com

    👉 codepen.io

    👉 webcode.tools

    👉 codemyui.com

    👉 bootsnipp.com

    👉 codeply.com

    👉 freefrontend.com

    👉 css-tricks.com/snippets/

    👉 codesandbox.io/search

    Thank you so much for getting our ebook.

    Feel free to give your feedback https://twitter.com/codemarch