Screenshot from my Codepen featuring the clock we are trying to build
First off, what components do we need in order to build this? Well, we will use flexbox to create the digits and separator between the digits so that it can be made painlessly responsive. We also need a script to constantly obtain the current time and extract the digits for hours, minutes, and seconds. Each clock digit is represented as follows:
<div class="flex-item digit"> <div class="digit-inner"> </div> <div class="digit-inner-lower"> </div> </div>
If you visualize the digits on a digital watch, or picture the digits on traffic light counters or in a calculator, each digit can be approximated as consisting of two boxes (one stacked on top of the other). To display the number nine, for instance, there are no curves used. Instead, the number is comprised of a rigid straight line representation as shown below. So, imagine the number nine to be made of two boxes with the top box having a black border on all four sides, and the box below it having a black border on the right and bottom sides only. To display the number three, the top box has a border on the top, right, and bottom sides; and the bottom box has a border on the right and bottom sides. This is the basis we shall use to make our clock digits too.
Photo from Unsplash for illustration
Here’s the code for the digits denoting the seconds:
<!--Seconds--> <div class="flex-item digit"> <div class="digit-inner"> </div> <div class="digit-inner-lower "> </div> </div> <div class="flex-item digit"> <div class="digit-inner "> </div> <div class="digit-inner-lower"> </div> </div>
Want to learn HTML5 and CSS3 from scratch?
This is the seventh episode of my “Learn HTML5 and CSS3” course. In this course, we will learn everything about how we can create markup for a website. At the end of the course, I will add some full tutorials where I will be creating famous websites from scratch. So, if you have any suggestions, just let me know and I might make a video about it!
In this episode, we will be adding comments in HTML5 and CSS3. I will also talk about the advantages of using comments and why you should use comments. There are more reasons why you should use comments than I explained in the video so I will add a couple extra right here.
Commenting code blocks out
Being able to comment out in HTML helps in easy debugging or testing. Sometimes you find errors in your code but aren’t sure where or what is the exact problem.
Understanding your own code later on
html comment tag provides us flexibility to understand it better way. According to our experience, Finest developers need to memorize it and utilize it during writing code
Comments show respect for the next developer to read your code
Source code should be written in the way that you yourself would most like to encounter unfamiliar code
#css3 #html5 #comments in html5 and css3
Além de assistir vídeos, esse nosso curso também é composto por arquivos PDF para download gratuito. Nesse vídeo vamos ver algumas referências e bibliografia recomendada para aprender HTML e CSS.
Tópicos deste vídeo:
00:00 - Capítulo 01, aula 03
00:35 - Teremos PDFs de apoio
01:33 - Cursos grátis para quem é nosso aluno
02:56 - Bibliografia recomendada para HTML e CSS
03:41 - Baixando nossos PDF grátis
05:38 - Referências on-line e documentação
10:04 - Livros para aprender HTML e CSS
12:05 - Nossas redes sociais
12:34 - Livros bonitos e úteis
15:25 - Livros do Maujor para aprender HTML e CSS
16:18 - Livros para aprender design
18:20 - Outros livros importantes
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
#html5 e css3 #css3 #html5