====== Bausteine [HTML & CSS] ======

Internetpräsenz erstellen - Hilfreiche Links

===== Lernvideos =====

==== Menüleiste / Navigation Bar ====
[[https://www.w3schools.com/css/css_navbar.asp]]

<code css>
 <ul>
  <li><a href="webseite1.html">Home</a></li>
  <li><a href="webseite2.html">News</a></li>
  <li><a href="webseite3.html">Contact</a></li>
  <li><a href="webseite4.html">About</a></li>
</ul> 
</code>

{{ :informatik:html-css:bausteine-html-navigation-bar.mp4 |}}

===== Misc =====

==== Farbkombinationen ====
https://www.canva.com/learn/100-color-combinations/


==== Bild als Hintergrund ====
  * https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder
  * CSS background-image Property https://www.w3schools.com/csSref/pr_background-image.asp

==== Schriftart ====
  * https://www.w3schools.com/css/css_font.asp
  * https://fonts.google.com/ google fonts


==== Designvorlagen HTML/CSS ====

  * html https://www.w3schools.com/html/default.asp
  * css https://www.w3schools.com/css/default.asp
     * Navigation Bar https://www.w3schools.com/css/css_navbar.asp
     * Dropdown https://www.w3schools.com/css/css_dropdowns.asp
     * Bildergalerie https://www.w3schools.com/css/css_image_gallery.asp
     * Bildergalerie https://wiki.selfhtml.org/wiki/CSS/Tutorials/Bildergalerie
     * Flexbox https://www.w3schools.com/css/css3_flexbox.asp / https://css-tricks.com/snippets/css/a-guide-to-flexbox/

==== Layout ====
  * Float https://www.w3schools.com/css/css_float.asp
  * Grid https://www.w3schools.com/css/css_grid.asp 


Inhalt in einer Box zentrieren:

<code css>
display: flex;
align-items: center;
justify-content: center;
</code>



==== Editor ====
  * notepad++ https://notepad-plus-plus.org/download/v7.6.html



==== Responsive Design ====
https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

<code css>
/* Mobile Styles */
@media only screen and (max-width: 400px) {
    
     }
     
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
    
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
    }

</code>