Hayat’s Chocolate Factory

Hayat’s Chocolate Factory es un proyecto de arte y educación que establece la gastronomía como uno de sus pilares fundamentales. La Factory fomenta la educación respetuosa desde el arte y utiliza diferentes disciplinas como danza, teatro, música y pintura para incitar a la expresión, autenticidad y armonía en la educación y en la sociedad.

Origen: Hayat’s Chocolate Factory

A Short History of Tag Clouds

One of the best, yet often ignored ways to make website navigation better is tag clouds. The issue with tag clouds is that they have been around for quite some time but webmasters generally aren’t familiar with their history or purpose. You might be surprised to learn that the first appearance of a tag cloud was over two decades ago. That was when the first such cloud was created in Germany in 1992. However, that didn’t get much recognition at the time.

Origen: A Short History of Tag Clouds

LeWagon: The 2-hour landing page

The 2-hour landing page

Time to discover HTML and CSS by coding our very first landing page!

To proceed, make sure you have the following programs installed on your laptop:

Then, launch the video 🎬 and follow Boris’ lead. You can open a new tab with the challenge’s instructions. You can also navigate through the slides.

Main takeaways

HTML basics

HTML is a language that defines the structure and content of your web page. Every HTML page has the same skeleton:

<html>
   <head>
     <!-- page's intelligence (metadata) -->
     <meta charset="utf-8">
     <title>My playground landing</title>
     <link rel="stylesheet" href="style.css">
   </head>
 
   <body>
     <!-- page's content -->
     <h1>My First Page</h1>
     <p>This is the important line everyone reads..</p>
     <a href="#">Start Learning Now</a>
   </body>
 </html>

 

HTML main syntax

HTML has a ton of different tags. Each tag has its own purpose, for example:

  • <h1>, <h2>, <h3>, <h4> and <h5> are used for headers and subheaders (titles)
  • <p> for paragraphs of text
  • <a> for links
  • <ul> for unordered (i.e. not-numbered) lists and <li> for the list items inside that list
  • <div> used to wrap content into divisions of your web page, allowing you to manipulate groups of elements

There are loads more tags – you’ll learn them soon!

The syntax of an HTML element is always the same:

  • all content is wrapped between an opening <tag> and a closing </tag>;
  • the opening tag is mostly plain, but it can also specify attributeswith values, such as the href attribute for a link, where the hyperlink is written inside the tag:
<a href="http://www.lewagon.com">Le Wagon</a>

 

Some elements – such as <img> – don’t have closing tags. They just have attributes inside:

 <!-- images don't have closing tags -->
 <img src="logo.png" alt="Le Wagon">

 

We call these self-closing tags.

HTML indentation

Indenting your code is ⚠️ very important ⚠️ when you start coding:

  • Your code needs to be readable by the future you 😣 or by your teammates 😖😫😩.
  • Not only is it easier to read and maintain, but if you ever get syntax errors you’ll be able to debug it in the blink of an eye!
  • It’s crucial to form good habits from the very beginning. Indenting will soon become as natural as breathing 🌬.

To properly indent your HTML code, each opening <tag> and associated closing </tag> must be vertically aligned. Any nested content should then be indented 1 tab right (= 2 spaces). Here is an example of good indentation:

<div class="banner">
   <div class="banner-content">
     <h1>Hello World!</h1>
     <p>
       At the end of Le Wagon bootcamp I'll know:
       <ul>
         <li>Ruby</li>
         <li>SQL</li>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li>Rails</li>
       </ul>
     </p>
   </div>
 </div>

 

Properly indented HTML code should draw waves in your file 🌊🌊🌊 (or should look like a flying V of ducks if you prefer this metaphor 🦆🦆🦆).

Design in CSS

  • CSS is the language that gives style 🎨 to your HTML elements.
  • Without CSS, web pages all have the same, boring and ugly look.

CSS selectors enable you to grab one or more elements, on which you can define style rules:

p {
   color: red;
 }

 

This will turn the text colour of all your <p> elements red!

Classes and IDs

Classes allow us to give multiple HTML elements the same name in order to change the css of all of them at the same time. IDs are only used when you want to manipulate one single element. For example:

<a href="..." class="link-blue">Google</a>
 <a href="..." id="link-wagon" >Le Wagon</a>
 <a href="..." class="link-blue">Facebook</a>

 

To design our classes and IDs, we need to use selectors. classselectors start with a . and id selectors start with a #.

To design the blue links we must use a class selector:

.link-blue {
   color: blue;
 }

 

To design Le Wagon’s link, this time we use an id selector:

#link-wagon {
   color: white;
   background-color: red;
 }

 

Specificity of CSS selectors

CSS selectors have priority levels that define which style rule should be applied on an element. IDs are more specific than classes, which are more specific than tags. Any clashing style command will follow this order of priority. For instance consider the following image:

<img src="..." class="img-big">

 

And the following CSS:

img {
   width: 20px;
 }
 .img-big {
   width: 100px;
 }

 

👉 The image will have a width of 100 pixels.

Now if the HTML is:

<img src="..." class="img-big" id="logo">Google</a>

 

And the CSS is :

img {
   width: 20px;
 }
 .img-big {
   width: 100px;
 }
 #logo {
   witdh: 50px;
 }

 

👉 The image will have a width of 50 pixels.

Descendant selectors

You can also be more specific by combining selectors. For instance, to select all the links inside the element with the class=”banner” you can use a descendant selector:

.banner a {
   color: white;
 }

 

Exercise

  • Your turn! It’s time to code your own landing page based on what you’ve learnt.
  • Share screenshots of your work on the forum 😎 (upload them to Dropbox for instance)

Resources

Don’t forget to take the quiz!

Happy Hacking 🚀🚀🚀