Jens Grochtdreis jensgro

HTML und CSS lernen

Einführungen

Learn CSS auf web.dev
Learn HTML auf web.dev
Learn Forms auf web.dev
Learn to Code HTML & CSS
Frontend Handbook - eine Übersicht über alle Aspekte der Frontendentwicklung mit weiterführenden Links

Your State of HTML 2024 Reading List

HTML Media Capture

Capture input from the user’s camera.

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

MDN

CSS Broken Grid Demo

A Pen by Jens Grochtdreis on CodePen.

License.

CSS 2024 Reading List

lvh / lvw / lvmin / lvmax, sv, dv, etc.

The CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.

https://developer.mozilla.org/en-US/docs/Web/CSS/length
The large, small, and dynamic viewport units https://web.dev/viewport-units/ (web.dev)

Anchor Positioning

Future CSS: Anchor Positioning (kizu.dev)

Javascript

JavaScript for Designers
30 Day Vanilla JS Coding Challenge - sehr gute Videos von WesBos
Die dazugehörigen Aufgaben
The Modern JavaScript Tutorial
JavaScript the right way
plain JS
JavaScript fundamentals
Learn JavaScript - von Google

The Future of 11ty — Zach Leatherman
Hints and Suggestions — Miriam Suzanne
11ty and Large-Project Tooling — Paul Everitt
Digital Frontiers, IndieWeb Cowboys, and A Place Online To Call Your Own— Henry Desroches
You're Probably Doing Web Performance Wrong — Sia Karamalegos
Building a Town That Doesn't Exist — Dan Sinker
11ty for “Non-Developers” — Adrianna Tan
Don't Fear the Cascade — Mayank
Managing content management (with no vendor lock-in) — David Large, Liam Bigelow
Come to the light side: HTML Web Components — Chris Ferdi

	/* ========= nicht so praktisch ========= */
	p {
	font-size: var(--fs-xs);
	}
	@media (min-width: 800px) {
	p {
	font-size: var(--fs-sm);
	}
	}

	:where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor : not-allowed;}
	.row:has(.topic-tags-block) {}
	:where(button) { all : unset;}
	footer:has(.broadcastinfo) {}
	a:has(.lead) {}
	.teaser:has(.topline[style="display: none;"]) .hgroup a:before {}
	.media-liveblog:has(.topline) .topline:before {}

	<div class="wrapper">
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint quas aliquid in nesciunt eveniet alias quis aspernatur dicta! Ad eos, asperiores, at, veritatis dolores ullam officia impedit facilis ab velit aut excepturi voluptate fugiat quidem est quod dolor ducimus. Facilis nobis sed et omnis incidunt tenetur hic possimus quae quaerat itaque quas iure cupiditate, odit impedit. Quaerat, aliquam? Eaque odio accusamus minima vel molestias, illo ab dolorem. Soluta ab numquam ea temporibus voluptas eos amet blanditiis, in quaerat repudiandae distinctio eum quasi inventore provident vel at voluptate commodi molestias nisi consequatur. Fugiat, hic modi. Iste dolor velit in cum assumenda?</p>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro vel quas quo nemo maiores labore atque harum itaque placeat repellat. Aliquam expedita alias vel quas fuga quod quos debitis cum labore possimus ipsum, maiores nisi dolor beatae animi voluptatibus cumque veritatis velit, laborum iure