HTML

HTML = HyperTextMarkupLanguage

Resources for design

 
And here are some useful sites to check out (the resources I mentioned in the lecture and many more :zwinkern: ):
This is a handy sheet for HTML and CSS shortcuts: https://docs.emmet.io/cheat-sheet/

And here is a list of useful design resources:

Colors:
https://colorhunt.co/
https://coolors.co/
https://color.adobe.com/create/color-wheel/

Color Picker:
http://www.colorzilla.com/
https://sipapp.io/

Fonts:
https://fonts.google.com/
https://fontpair.co/

Font Picker:
https://fontface.ninja/

Placeholder images (free to download and use):
https://unsplash.com/
https://www.pexels.com/
Random placeholder image:
https://picsum.photos/200/400
https://source.unsplash.com/random

Icons:
https://thenounproject.com/
https://iconstore.co/

Gradients:
https://uigradients.com/#Bupe

Design tools:
https://www.producthunt.com/search?q=design

(Web)Design inspiration:
https://dribbble.com/
https://www.awwwards.com/

UI Components (more on that tomorrow :zwinkern:) :
https://calltoidea.com/
https://uimovement.com/

UI Design guide (MUST READ):
https://goodui.org/

If any of you has a site they love using feel free to add it to the list! :erröten:

-> http://www.webdesigner.world/

RESOURCES BY MARTIN (teacher LeWagon)
*Colors:*
https://colorhunt.co/
https://coolors.co/
https://color.adobe.com/create/color-wheel/
https://uigradients.com

*Fonts:*
https://fonts.google.com/
https://fontpair.co/
www.dafont.com
www.myfonts.com

*Placeholder images (free to download and use):*
https://unsplash.com/
https://www.pexels.com/

*Icons:*
https://thenounproject.com/
https://iconstore.co/
flaticon.com

*(Web)Design inspiration:*
https://dribbble.com/
https://www.awwwards.com/
https://www.producthunt.com

UI Components Inspiration that I showed you during the lecture.
https://calltoidea.com/
https://uimovement.com/

*ALL YOU NEED IN ONE STOP:*
http://www.webdesigner.world/

Landing Page
  • clear value proposition
  • clear design
  • call-to-action
  • CRM (customer relation management)

Structure

the basic structure of a document looks like this:

</!DOCTYPE html>
<html>
<head>
    <title>Title of Webpage</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <!--ADD CONTENT-->
</body>
</html>
  • Head: all "intelligence" goes here. Links to stylesheets, fonts, meta-tags for SEO etc.
  • Body: all content goes here!
  • tag: always starttag and endtag.
  • self-closing tag: no end-tag needed. e.g.: img or meta or br
  • attribute: attribute.name width and attribute.value 10px

core syntax

Meta Tags

 
<!-- put title inside -->
<title></title>

<!-- meta description -->
<meta name="description" content="insert description here!" />

<!-- meta charset -->
<meta charset="utf-8" />

<!-- LINK css-style (type attribute is neede in html 4 and lower) -->
<link rel="stylesheet" type="text/css" href="URL" />

<!-- LINK JS files -->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
        

<!-- OPEN GRAPH OBJECT -->
<!-- required for OG-object -->
<meta property="og:title" content="" />
<meta property="og:type"  content="" />
<meta property="og:url"   content="" />
<meta property="og:image" content="" />
<!-- additional -->
<meta property="og:description" content="" />

<!-- TWITTER CARDS -->
<meta name="twitter:card"        content="" />
<meta name="twitter:site"        content="@username" />
<meta name="twitter:title"       content="" />
<meta name="twitter:description" content="" />

Main Tags

 
<!-- 3 main tags -->
<html></html>
<head></head>
<body></body>

<!-- headings -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!-- paragraph -->
<p></p>

<!-- hyperlinks -->
<a href="url">my linked text</a>

<!-- images -->
<img src="url" />

<!-- unordered lists -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- ordered list -->
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

<!-- div elements -->
<div></div>