I EARNED MY CODECADEMY BADGES!

12:58 Amélie 0 Comments

Hi everyone, Hello tout le monde,

As I said last time, I finished the HTML/CSS course on Codecademy and earned 18 badges and 106 points in total. I do not really know what it is worth but it is still good to earn some digital rewards for your work!
As for today, I was thinking to finish all the last pieces for CSS so you can master it a bit better.

Comme je vous l'ai annoncé la dernière fois, j'ai terminé le cours HTML/CSS sur Codecademy and j'ai amassé pas moins de 18 badges et 106 points au total. Je ne sais pas vraiment ce que ça vaut mais il est toujours gratifiant d'avoir des médailles digitales pour récompenser le travail accompli!
Pour aujourd'hui, je pensais finir les derniers détails du CSS pour que vous puissiez mieux le maîtriser.
code digital program blog coding technology innovation codecademy MIT Londres New York USA Etats-Unis Angleterre London France Paris tech entrepreneur female femme créer entreprise apprendre blog autodidacte own technology sillicon valley myself autodidact programmeur programator HTML CSS style font family size
One of my Codecademy badge
Credits: codedamy.com

1. THE COLOURS / LES COULEURS

We saw previously that we could change the colour of your font and background. But there is an infinity of colours and they unfortunately do not have all a name. And if we start the debate on whether it is a ducky blue or a ducky green, this might lead to a lot of fights with yourself or your peers ;)
The solution is hexadecimal value. What is that? Very simple, let me explain it to you:
- It is a combination of 8 letters and/or numbers from A to F and from 0 to 9
- Any value will start with a hashtag #........
- It is not sensitive to capital/lower-case letter so #11DA890c is the same as #11da890c

If you wish to find what code is associated to what colour, click here

Nous avons vu précédemment que nous pouvions changer les couleurs de votre police ou fond. Mais il existe une infinité de couleurs et elles n'ont malheureusement pas toutes un nom. Et si nous commençons le débat sur est-ce un bleu canard ou un vert canard, cela vous amènera certainement à de nombreux conflits internes avec vous-mêmes ou avec vos collaborateurs ;)
La solution est donc la valeur hexadécimale. Qu'est-ce que c'est? Très simple, laissez-moi vous expliquer:
- C'est une combinaison de 8 lettres et/ou chiffres de A à F et de 0 à 9
- N'importe quelle valeur commencera avec un hashtag #........
- Le code n'est pas sensible à la casse, c'est à dire que peu importe que vous mettiez des majuscules ou des minuscules, le résultat sera le même: #11DA890c est pareil que #11da890c

Si vous souhaitez trouver quel est le code associé à la couleur choisie, cliquez ici

code digital program blog coding technology innovation codecademy MIT Londres New York USA Etats-Unis Angleterre London France Paris tech entrepreneur female femme créer entreprise apprendre blog autodidacte own technology sillicon valley myself autodidact programmeur programator HTML CSS style font family size RGB hexadecimal colour color couleur
Credits: htmlcolorcodes.com
code digital program blog coding technology innovation codecademy MIT Londres New York USA Etats-Unis Angleterre London France Paris tech entrepreneur female femme créer entreprise apprendre blog autodidacte own technology sillicon valley myself autodidact programmeur programator HTML CSS style font family size
Credits: htmlcolorcodes.com

2. WHAT HAPPENS WHEN I GO TO MY TABLET OR A SMARTPHONE? / QUE SE PASSE-T-IL LORSQUE JE VAIS SUR MA TABLETTE OU UN SMARTPHONE?

Whilst surfing on the Internet on a tablet or a smartphone, I am 100% sure you must have seen this message: Do you want to pursue on the normal website or go to the mobile version?
Yes you got it right, websites can 'change' and adapt themselves to the support you are using so it does not look 'weird'.

We do that by using 'em' - and not <em></em> - which means relative measure.
1em = default font size of the screen you are using

It is perfect to adapt to the screen as the measure will adapt the size and will not use the absolute value such as 12px.

<p style='font-size:0.5em'>...</p>

Quand vous surfez sur Internet à partir d'une tablette ou d'un smartphone, je suis sûre et certaine que vous avez déjà rencontré ce message: Voulez-vous continuer la navigation sur le site normal ou sur la version mobile?
Et oui, vous avez bien compris, les sites peuvent 'changer' et s'adapter au support que vous utilisez pour que cela ne rende pas 'bizarre'.

On fait ça en utilisant 'em' - et non pas les balises <em></em> - ce qui signifie mesure relative.
1em = taille de police par défaut de l'écran utilisé

C'est parfait pour l'adaptation aux écrans puisque la mesure adaptera la taille et n'utilisera pas la valeur absolue comme 12px.

3. EMERGENCY VALUE / VALEURS DE SECOURS

Another one I am pretty sure you may have seen: What if you are using a font that another user cannot read? 
It happened to me a lot of times when working on a PPT from a Windows computer and then opened it at home on my MacBook and it would change and take a very weird look. 


This can happen to websites too!

In order to avoid the awkward look it could give your website, you can use emergency values. So when the machine reads the CSS, if it cannot find a specific font, it will go to the next one until it finds one it can read.

p {
     font-family:Tahoma, Verdana, Arial, Times New Roman,
    }

This means that the machine will firstly look for Tahoma, then Verdana and so on. The list works from left to right and once a font is being used, the rest of the list will be ignored.

Une autre situation que je suis sûre vous avez tous vécus: Que se passe-t-il quand vous utilisez une police qu'un autre utilisateur ne peut pas lire? 
Cela m'est arrivé tellement de fois quand je travaillais sur un PPT à partir d'un ordinateur Windows et quand je l'ouvrais à la maison sur mon MacBook tout prenait une autre forme, souvent très bizarre je vous l'accorde. 


Et bien cela peut arriver aux sites internet aussi!

Pour éviter ce look bizarroïde que cela donnerait à votre site, vous pouvez utiliser des valeurs de secours. Quand la machine lira le CSS, si elle ne peut pas trouver une police spécifique, elle ira lire celle juste après jusqu'à ce qu'elle trouve une police qu'elle connaît.

p {
     font-family:Tahoma, Verdana, Arial, Times New Roman,
    }

Cela veut dire que la machine regardera d'abord si elle peut lire Tahoma, ensuite Verdana etc... La liste fonctionne de gauche à droite et une fois qu'une police est utilisée, le reste de la liste sera ignoré.

4. VERY BAD LOOKING BLUE HTML LINKS / LES AFFREUX LIENS HTML BLEUS

Yes, I am saying it. Those HTML links you set up in an email, in a doc are very ugly (don't worry I am setting them as well): bright blue, bold and underlined. And once you click on them they turn into purple...

YOU CAN CHANGE THAT! I know, it sounded like a miracle when I found out about it... 

Easy to do, it is called text-decoration.

Below I wanted my link <a> to Google to look red #cc0000 and to not turn into the basic HTML link. 
I just put text-decoration:none.

code digital program blog coding technology innovation codecademy MIT Londres New York USA Etats-Unis Angleterre London France Paris tech entrepreneur female femme créer entreprise apprendre blog autodidacte own technology sillicon valley myself autodidact programmeur programator HTML CSS style font family size
Credits: codecademy.com
code digital program blog coding technology innovation codecademy MIT Londres New York USA Etats-Unis Angleterre London France Paris tech entrepreneur female femme créer entreprise apprendre blog autodidacte own technology sillicon valley myself autodidact programmeur programator HTML CSS style font family size
Credits: codecademy.com
Oui, je n'ai pas peur de le dire. Ces liens HTML que vous mettez dans un email, dans un document sont vraiment laids (je les utilise aussi...): bleu roi bien flashy, en gras et souligné. Et une fois que vous avez cliqué dessus, ils deviennent violet...

VOUS POUVEZ CHANGER CA! Je sais, ça m'a fait l'effet d'un miracle quand j'ai su qu'on pouvait le faire...

Facile à faire, il s'agit de text-decoration.

Vous pouvez observer l'exemple ci-dessus où je voulais que mon lien <a> vers Google soit rouge #cc0000 et qu'il ne devienne pas un lien HTML basique. 
J'ai donc mis text-decoration:none.


Do you feel you know a bit more about CSS? Let me know if you have questions or would like to share your experience here! 

I am now going to start a MOOC on OpenClassrooms! 
It is for creating a website on Wordpress as I already feel this blog is not looking good enough to my standards and there is only little room for changes on Blogger... 

Est-ce que vous pensez que vous en connaissez le CSS un peu plus maintenant? N'hésitez pas à me poser vos questions ou si vous désirez partager votre expérience ici!

Je vais maintenant commencer un MOOC sur OpenClassrooms!
Il s'agit de celui pour créer un site sur WordPress car je trouve que ce blog ne correspond pas à mes standards et la marge de manoeuvre de modifications sur Blogger est minuscule voire inexistante...


To be continued in the next episode, Amélie X

La suite au prochain épisode, Amélie X

0 commentaires: