Inhaltsverzeichnis
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
- HTML
- backend
- HTML & CSS not programming languages
Resonable Understanding
- start learn HTML/CSS (3-5h/day for 1-1,5 month)
- learn JavaScript (6 weeks)
- learn React – because most popular (1-2 months)
- eventually other frameworks later
- 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
- Hyper Text Transfer Protocol (Secure) – HTTP(S)
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
- network tab
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 SEOname="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)
- use VSCode command palette shortcut to „wrap with abbreviation“
- 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
- e.g.
- 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)
- starting with
- 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
- use either relative or absolute URL’s
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
- may play with different values for
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
Neueste Kommentare