HTML & CSS for Beginners

HTML & CSS for Beginners
HTML & CSS for Beginners

HTML & CSS for Beginners

Learn how to use HTML & CSS using EMMET and Visual Studio Code from SCRATCH.

Learn everything from scratch. Debunk the myth that web development is hard! Create your own sites using HTML & CSS.
After this course, you will know how to efficiently use Visual Studio Code to create websites using HTML & CSS. You will also learn EMMET which speeds up the process of creating websites.You will learn basic tags & selectors and how to use them efficiently. This course is an entrance for you to become a future web developer. After this course, you will finally understand the basics of creating websites.I provide as much detail as possible in each lesson so that everyone can understand the web development techniques. Learn fast and hassle-free website development πŸ™‚ Become a web developer today! This website development course is for everyone. You don’t need to know anything about web development to get started.

What you’ll learn?
  • How to use HTML tags and CSS selectors
  • Installing and setting VSC code
  • Learning super-efficient shortcuts including EMMET
  • What are attributes
  • How to add image on your website
  • What are meta tags and what they are used for
  • How to list elements
  • How to create internal/external links?
  • How to format your text professionally using text formatting tags?
  • How to create user forms with inputs?
  • How to create tables?
  • Difference between display block/inline/inlineblock
  • CSS rules for selecting tags
  • How to format text/add borders using CSS?
Requirements:
  • Everything is explained in the course. You don’t need to have any knowledge, but good intentions are welcome πŸ™‚
Course content
2. Installing tools
1. Download and Installing Visual Studio Code
β€”β€”β€”β€”β€”
2. Setting your first project
β€”β€”β€”β€”β€”
3. HTML Basics
1. What is HTML What is tag
β€”β€”β€”β€”β€”
2. Basic HTML document
β€”β€”β€”β€”β€”
2.1 basic-document-en
β€”β€”β€”β€”β€”
3. Nested tags and FAST wrapping existing text with tags using EMMET
β€”β€”β€”β€”β€”
4. Creating paragraphs pΒ  What are white spaces
β€”β€”β€”β€”β€”
5. Void tag and breaking the line br
β€”β€”β€”β€”β€”
6. What are attributes [title] and [lang]
β€”β€”β€”β€”β€”
7. Neutral tagΒ  span
β€”β€”β€”β€”β€”
8. Installing extensions in VSC AutoRenameTag
β€”β€”β€”β€”β€”
9. Attribute _style_ – How to change background colour – IMPORTANT LECTURE
β€”β€”β€”β€”β€”
10. Adding image to your site img
β€”β€”β€”β€”β€”
11. BONUS Where to get FREE pictures on your site
β€”β€”β€”β€”β€”
12. Getting img size using VSC shortcut
β€”β€”β€”β€”β€”
13. How to link to DIFFERENT folders Creating PATH theory
β€”β€”β€”β€”β€”
4. HTMLΒ  improving document – workflow
1. Viewing the source code of ANY site. What are comments
β€”β€”β€”β€”β€”
2. Meta tags
β€”β€”β€”β€”β€”
3. Charset – proper encoding on your site
β€”β€”β€”β€”β€”
4. HTML doctype
β€”β€”β€”β€”β€”
4.1 doctype-en
β€”β€”β€”β€”β€”
5. Live Server – Auto saving code feature
β€”β€”β€”β€”β€”
6. Entities – HTML validation
β€”β€”β€”β€”β€”
7. How to properly name your files Why main page is called index.html
β€”β€”β€”β€”β€”
8. EXTENSION Sweet icons in your VSC
β€”β€”β€”β€”β€”
8.1 changing-icons-en
β€”β€”β€”β€”β€”
5. HTMLΒ  Listing things
1. ol vs ul
β€”β€”β€”β€”β€”
2. Fast tricks with Emmet to use with lists
β€”β€”β€”β€”β€”
3. dl – definition list
β€”β€”β€”β€”β€”
4. EMMET creating siblings and treating two elements as one
β€”β€”β€”β€”β€”
6. HTMLΒ  Links
1. Creating internal links
β€”β€”β€”β€”β€”
2. External linksΒ  _blank
β€”β€”β€”β€”β€”
3. #labels
β€”β€”β€”β€”β€”
4. How to create a link to email
β€”β€”β€”β€”β€”
5. Telephone link
β€”β€”β€”β€”β€”
7. HTMLΒ  Text Formatting
1. headers – h1 to h6
β€”β€”β€”β€”β€”
2. cite vs blockquote vs q – how to cite others
β€”β€”β€”β€”β€”
3. abbrΒ  dfn
β€”β€”β€”β€”β€”
4. Semantic tags strong, em and mark vs b, i, u, s
β€”β€”β€”β€”β€”
5. sub vs sup
β€”β€”β€”β€”β€”
6. Preformatted text, tags pre, code, var
β€”β€”β€”β€”β€”
7. MulticursorΒ  Searching and replacing text in VSC
β€”β€”β€”β€”β€”
8. FormsΒ  Basics
1. What is form and input How to create a basic form with login and password
β€”β€”β€”β€”β€”
2. How to properly submit form and name its inputs
β€”β€”β€”β€”β€”
3. radio _ form labels _ legend
β€”β€”β€”β€”β€”
4. checkboxes
β€”β€”β€”β€”β€”
5. Most frequently used form attributes
β€”β€”β€”β€”β€”
6. EXERCISE How to create a contact form on your site
β€”β€”β€”β€”β€”
7. Getting date and time from the user
β€”β€”β€”β€”β€”
9. Tables
1. Basics of creating tables
β€”β€”β€”β€”β€”
2. How to stretch cells using rowspan and colspan
β€”β€”β€”β€”β€”
10. CSSΒ  Basics
1. What is CSS
β€”β€”β€”β€”β€”
2. CSS placement _ CSS priority (cascade)
β€”β€”β€”β€”β€”
3. class vs id
β€”β€”β€”β€”β€”
5. Useful CSS extensions
β€”β€”β€”β€”β€”
11. CSSΒ  Formatting
1. div vs span – grouping more elements
β€”β€”β€”β€”β€”
2. display blockinlineinlineblock
β€”β€”β€”β€”β€”
3. EMMETΒ  TRICKS creating tags with id and class
β€”β€”β€”β€”β€”
4. RULES of selecting tags – IMPORTANT LECTURE to AVOID problems in CSS
β€”β€”β€”β€”β€”
5. selector REHEARSAL
β€”β€”β€”β€”β€”
6. border
β€”β€”β€”β€”β€”
7. Rounded corners – border-radius
β€”β€”β€”β€”β€”
8. tables _ padding
β€”β€”β€”β€”β€”
9. How to create horizontal menu States of links link, visited, hover, active
β€”β€”β€”β€”β€”
10. Changing default list iconsΒ  Β before selector
β€”β€”β€”β€”β€”
11. How to make element transparent opacity vs rgba
β€”β€”β€”β€”β€”
12. Changing cursorΒ  creating hint box
β€”β€”β€”β€”β€”
13. attribute selectorΒ  custom named attributes in HTML
β€”β€”β€”β€”β€”
12. CSSΒ  Text
1. Text formatting and decoration
β€”β€”β€”β€”β€”
2. Paragraph indentation and first-letter selector
β€”β€”β€”β€”β€”
3. CSS units em vs px vs _
β€”β€”β€”β€”β€”
4. line-heightΒ  letter-spacingΒ  word-spacing
β€”β€”β€”β€”β€”
5. playing with fonts

Download all files used in the course from here | Password: freeudemycourses.online

Source: https://www.udemy.com/course/html-css-emmet-for-beginners/