HTML

HTML

42 bookmarks
Custom sorting
A Call for Consensus on HTML Semantics | Stephanie Eckles
A Call for Consensus on HTML Semantics | Stephanie Eckles

Netter Artikel von Stephanie Eckles mit schönen Beispielen für K07.

HTML is supposed to be easy to learn. And sure, the basics are pretty clear, like when to use a p over an a. (But, lol, watch out for when to use a vs button).

HTML is supposed to be easy to learn. And sure, the basics are pretty clear, like when to use a p over an a. (But, lol, watch out for when to use a vs button)
A Call for Consensus on HTML Semantics | Stephanie Eckles
You don't need JavaScript for that - HTMHell (12/2023)
You don't need JavaScript for that - HTMHell (12/2023)

KilianValkhof.com Mastodocon @kilian@mastodon.social

It's one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose.

Custom Switches (genial)

  • Checkbox wird per CSS zu einem Schieberegler
  • appearance: none = geil
  • input checkbox wird grauer Hintergrund
  • ::before wird little white dot
  • :checked { background: green }
  • :checked::before { transform: translateX(1rem); }

Datalist, a native autosuggest

A color picker that does more

Accordions Dialog modals

There are dozens more examples I could've added into this article, here are just some you can look into:

  • Native smooth scrolling with scroll-behavior: smooth (but only when prefers-reduced-motion: no preference matches!),
  • Native carousels with scroll-snap,
  • "In-view" elements with position: sticky

…Not to name the whole concept of container queries.

And if we look into the future, we're getting even more cool things:

  • Scroll driven animations
  • Masonry layouts with grid-template-rows: masonry
  • A fully stylable select with the new selectlist element (where you can style each part of a select without destroying all the native functionality it comes with)
  • The :has() selector that's going to eliminate a whole class of JS selection
You don't need JavaScript for that - HTMHell (12/2023)
How to transfigure wireframes into HTML (Laura Aigmüller, HTMHell.dev Adventskalender, 12/2022)
How to transfigure wireframes into HTML (Laura Aigmüller, HTMHell.dev Adventskalender, 12/2022)
Sehr schöner Artikel mit einem Beispiel, das etwas komplexer ist als meine Übungswebsite, aber auch nicht zu übertrieben. Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an empty text file.
How to transfigure wireframes into HTML (Laura Aigmüller, HTMHell.dev Adventskalender, 12/2022)
HTML/Tutorials/Formulare/input (SELFHTML-Wiki)
HTML/Tutorials/Formulare/input (SELFHTML-Wiki)
Das input-Element (input = Eingabe) wird innerhalb von Formularen genutzt, um Daten vom Benutzer abzufragen. Dabei kann das input-Element ganz unterschiedlich aussehen - vom Eingabefeld bis hin zur Checkbox, zum Radio-Button oder sogar einem Farbwähler.
HTML/Tutorials/Formulare/input (SELFHTML-Wiki)
How to build a progressively enhanced accordion component with vanilla JS (Go Make Things, 10/21)
How to build a progressively enhanced accordion component with vanilla JS (Go Make Things, 10/21)
Today, I’m going to look how we can replace the need for a big plugin altogether by progressively enhancing HTML to add a bit more functionality to it. I love the details and summary elements. You can use them to create interactive expand-and-collapse components without any JavaScript. They work in all modern browsers. In older, unsupported browsers like IE, the content is displayed in full, so the user is always able to access it. Dieses Tutorial sieht gut aus. Vielleicht eine gute Ergänzung zur Gestaltung von und per CSS.
How to build a progressively enhanced accordion component with vanilla JS (Go Make Things, 10/21)
My current HTML boilerplate (matuzo.at, 04/21)
My current HTML boilerplate (matuzo.at, 04/21)
Every element I use for the basic structure of a HTML document, with explanations why. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document the structure we use at work for the sites we build. So, simply copying and pasting wasn’t an option, I had to understand the choices that have been made.
My current HTML boilerplate (matuzo.at, 04/21)
HTML5 Semantics (Bruce Lawson, Smashing, 11/2011)
HTML5 Semantics (Bruce Lawson, Smashing, 11/2011)
Much of the excitement we’ve seen so far about HTML5 has been for the new APIs: local storage, application cache, Web workers, 2-D drawing and the like. But let’s not overlook that **HTML5 brings us 30 new elements to mark up documents and applications**, boosting the total number of elements available to us to over 100.
HTML5 Semantics (Bruce Lawson, Smashing, 11/2011)