HTML/CSS Fundamentals (Notes)

VSCode

Extensions

• Prettier
• lLve Server
  • develop locally in browser
  • refreshes current page automatically while developing locally

Web Development Categories

• frontend
  • HTML
    • structure and building blogs of web page
  • CSS
    • visual effects
  • JavaScript
    • functionality
• backend
• HTML & CSS not programming languages

Resonable Understanding

1. start learn HTML/CSS (3-5h/day for 1-1,5 month)
2. learn JavaScript (6 weeks)
3. learn React – because most popular (1-2 months)
   1. eventually other frameworks later
4. Git – version control system (2 weeks)

How the web works

• URL
• resources
• Client – Server communication
  • Hyper Text Transfer Protocol (Secure) – HTTP(S)
    • request (from client to server)
    • response (from server to client)
    • status code
    • date
    • content-type
    • HTML document
  • Document Object Model (DOM): represents objects, elements and resources of web page
    • browser constructs DOM by reading requested HTML document
    • every resource has own URL
      • browser sends seperate HTTP request to server for each requested resource from HTML file
    • browser renders (= displays) result

Inspect HTTP requests and responses

• browser developer tools
  • network tab
    • lists requests and their details
    • filterable by resource type
  • headers
    • including HTTP info
  • may be used to play with current styles and test changes on certain properties and elements

HTML basics

• index.html often homepage
• IP 127.0.0.1 represents local computer
• img tag no closing tag
  • src: relative path to image file
  • alt: optional alternative text (in case image can’t be displayed)

CSS basics

• usable inside <style> HTML tag inside respective HTML file

Formatting code

• browsers don’t care about format
• format especially important for human readability and consistency
• may use command palette (short cut) to Format Document
• VSCode configuarable to format code every time when file is saved
  • Code > Preferences > Settings > format on save

Validate web page

• if page not displayed as expected: start with quick validation
  • can often point you to right direction
• use markup validator to find possible improvements, errors and warnings in HTML
  • e.g. validator.w3.org
• use CSS validator to find possible improvements, errors and warnings in CSS
  • e.g. jigsaw.w3.org/css-validator

HTML essentials

Head section in HTML

<meta ...> elements

• character set (charset)
  • should always be included in every web page
  • <meta charset="UTF-8">
  • map character to numeric value
    • e.g. ASCII
    • mostly used: UTF-8
• viewport (size of browser window)
  • should always be included in every web page
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • needed to look good on all devices (mobile and desktop)
• name="keywords" content="..." defines keywords for SEO
• name="description" content="..." defines short description for search engine results

Text in HTML

• p: basic text
• em: emphasize – display italic
  • tells browser that text is important
  • can be „un-italizised“ by using CSS font-style: normal to tell browser about importance but still be displayed as usual text
• i: deprecated (because HTML not meant for styling – but only structuring content)
• strong: importance, seriousness, urgency
  • displayed bold
• b: deprecated (styling should be done in CSS)
• may use lorem + number to create non-sense text of so many words as defined in number

trick / shortcut:

• to surround highlighted text with HTML element tags (instead of creating tag and then moving text inside)

1. use VSCode command palette shortcut to „wrap with abbreviation“
2. type name of HTML element

Headings

• h1 to h6
  • used to create hierarchy (not for styling -> use CSS)
  • always only use one h1 on every single page (to avoid confusion of search engines😵😂)

Special characters (entities)

• &; -> basis for special character notation
  • e.g. < becomes <
  • e.g. © becomes ©
  • ❗ e.g.   used to create a space between two words but never divide them on two different lines
• don’t need to remember all – there are lists on the internet

Hyperlinks

• <a href="...">: anchor element
  • use either relative or absolute URL’s
    • starting with / represents root of website (for absolute URL’s)
  • can include clickable images in anchor elements
  • use download attribute to make resources downloadable on click
  • may be used to link to identifiers (id tag) on same page
  • use target="_blank attribute to open link in new tab
  • use href="mailto:email@mail.org" to write email to respective email address

Images

• <img src="link/to/image.png" alt="alternative text">
• width and height might be adjusted
• use CSS object-fit: cover; to „crop“ image with width and height
  • may play with different values for object-fit in browser developer tools to see their impact on the image

Pending Questions

• Why do we use Prettier extension? Doesn’t VSCode do the formatting (quite good) by default?
• Why do we use Live Server extension? Can’t we just open the respective files in the browser?

Sources

• HTML Tutorial for Beginners: HTML Crash Course by Programming with Mosh