148 lines
6.5 KiB
HTML
148 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Die HTML Struktur in Webseiten">
|
|
<title>HTML Struktur</title>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/code.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="wrapper">
|
|
<a href="index.html"><img src="img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
|
|
<nav role="navigation">
|
|
<ul>
|
|
<li><a href="html/semantik.html">Semantik</a></li>
|
|
<li><a href="html/header.html">Head</a></li>
|
|
<li><a href="html/struktur.html">Struktur</a></li>
|
|
<li><a href="html/navigation.html">Navigation</a></li>
|
|
<li><a href="html/formulare.html">Formular</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main role="main" class="wrapper">
|
|
<h1 id="webdeveloper-links-tips">Webdeveloper Links & Tips</h1>
|
|
<h2 id="html">HTML</h2>
|
|
<h3 id="html-lernen">HTML lernen</h3>
|
|
<ul>
|
|
<li><a href="https://wiki.selfhtml.org/wiki/HTML">selfhtml</a></li>
|
|
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML
|
|
- Mozilla Docs</a></li>
|
|
<li><a href="https://www.w3schools.com/html/">w3schools HTML5 Tutorial</a></li>
|
|
<li><a href="https://wiki.selfhtml.org/wiki/HTML/Formulare">HTML Forms</a></li>
|
|
</ul>
|
|
<h3 id="editoren">Editoren</h3>
|
|
<ul>
|
|
<li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
|
|
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
|
|
<li><a href="https://atom.io/">Atom editor</a></li>
|
|
<li><a href="http://brackets.io/">Brackets</a></li>
|
|
</ul>
|
|
<h3 id="online-tools-plugins">Online Tools / Plugins</h3>
|
|
<ul>
|
|
<li><a href="https://validator.w3.org/">HTML Validator</a></li>
|
|
<li><a href="https://html5.validator.nu/">HTML nu Validator</a></li>
|
|
<li><a href="https://chrome.google.com/webstore/search/html?hl=de&_category=extensions">HTML Extension
|
|
Chromium</a></li>
|
|
<li><a href="https://addons.mozilla.org/de/firefox/search/?q=html&type=extension">HTML Extension
|
|
Mozilla</a></li>
|
|
<li><a href="https://www.caniuse.com/">Can I use</a></li>
|
|
<li><a href="https://codepen.io/">codepen</a></li>
|
|
<li><a href="https://jsfiddle.net/">jsfiddle</a></li>
|
|
<li><a href="https://search.google.com/search-console">Google Search Console</a></li>
|
|
<li><a href="https://www.browserling.com/">Cross Browser testing</a></li>
|
|
<li><a href="https://html5test.com/">Browser Test</a></li>
|
|
</ul>
|
|
<h3>Interne Links</h3>
|
|
<ul>
|
|
<li><a href="html/semantik.html">Semantische Tags</a></li>
|
|
<li><a href="html/struktur.html">Seitenstruktur</a></li>
|
|
<li><a href="html/header.html">Kopfbereich</a></li>
|
|
<li><a href="html/formular.html">Formulare</a></li>
|
|
<li><a href="html/navigation.html">Navigation</a></li>
|
|
</ul>
|
|
<h2>CSS</h2>
|
|
<h3>CSS Lernen</h3>
|
|
<ul>
|
|
<li><a
|
|
href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a>
|
|
</li>
|
|
<li><a href="https://www.w3.org/Style/CSS/learning.de.html">CSS lernen W3C</a></li>
|
|
<li><a href="https://www.w3schools.com/css/">CSS Tutorial</a></li>
|
|
<li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials">Selfhtml CSS</a></li>
|
|
<li><a href="https://t3n.de/magazin/flexibler-als-gedacht-was-du-mit-248427/">CSS Übersicht</a></li>
|
|
<li><a href="https://www.webdesign-journal.de/css3-animationen-leitfaden/">Leitfaden Animationen</a></li>
|
|
<li><a href="https://keyframes.app/animate">Animate | keyframes.app</a></li>
|
|
</ul>
|
|
<h3>CSS (minimal) Frameworks</h3>
|
|
<ul>
|
|
<li> <a href="https://milligram.io/">Milligram</a></li>
|
|
<li><a href="https://minicss.org/">minicss</a></li>
|
|
<li><a href="https://purecss.io/">Pure.css</a></li>
|
|
<li><a href="https://css.sitetent.com/">TentCSS</a></li>
|
|
<li><a href="http://getskeleton.com/">Skeleton</a></li>
|
|
<li><a href="https://hankchizljaw.com/wrote/a-modern-css-reset/">A Modern CSS Reset</a> (Nur Reset-Funktion)
|
|
</li>
|
|
</ul>
|
|
<h3>CSS Inhalte positionieren</h3>
|
|
<ul>
|
|
<li><a href="https://www.mediaevent.de/css/position-float.html">CSS float – Positionieren und
|
|
Umfließen</a></li>
|
|
<li><a href="https://www.mediaevent.de/css/position.html">CSS position</a></li>
|
|
<li><a href="https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Flexbox</a></li>
|
|
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">Grid Guide</a></li>
|
|
<li><a href="https://learncssgrid.com/">Learn Grid</a></li>
|
|
</ul>
|
|
<h3>Responsive Design</h3>
|
|
<ul>
|
|
<li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/Layoutkonzepte#Die_Irrwege">Irrwege im Webdesign</a></li>
|
|
<li><a href="https://t3n.de/news/basics-responsive-webdesign-9-578560/">Die Basics</a></li>
|
|
<li><a href="http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/">Adaptive Responsive Liquide</a></li>
|
|
</ul>
|
|
<h3></h3>Interne Links</h3>
|
|
<ul>
|
|
<li><a href="html/float.html">float</a></li>
|
|
<li><a href="html/position.html">position</a></li>
|
|
<li><a href="html/flex.html">flexbox</a></li>
|
|
<li><a href="html/grid.html">grid</a></li>
|
|
</ul>
|
|
<h2>Javascript</h2>
|
|
<h3>JavaScript lernen</h3>
|
|
<ul>
|
|
<li><a href="https://opentechschool.github.io/js-beginners-1/index_de.html">JavaScript für absolute Beginner</a></li>
|
|
<li><a href="https://javascript.info/">The Modern JavaScript Tutorial</a></li>
|
|
<li><a href="https://www.w3schools.com/js/">JavaScript Tutorial</a></li>
|
|
</ul>
|
|
|
|
<h3>JavaScript Frameworks & Libraries</h3>
|
|
<ul>
|
|
<li><a href="https://jquery.com/">jQuery</a></li>
|
|
<li><a href="https://reactjs.org/">React</a></li>
|
|
<li><a href="https://angularjs.org/">Angular</a></li>
|
|
<li><a href="https://vuejs.org/">Vue.js</a></li>
|
|
<li><a href="http://vanilla-js.com/)">Vanilla.js</a></li>
|
|
</ul>
|
|
|
|
<h3>Interne Links</h3>
|
|
<ul>
|
|
<li><a href="html/vanilla.html">Pure JavaScript</a></li>
|
|
<li><a href="html/jquery.html"></a>jQuery</li>
|
|
</ul>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="wrapper">
|
|
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
|
|
</div>
|
|
</footer>
|
|
<script src="js/code.js"></script>
|
|
</body>
|