Akos  Mester

Akos Mester

1624438506

Responsive Video Gallery Using HTML5 /CSS3 / Vanilla Javascript

Learn how to add responsive video gallery on website using html, css and vanilla javascript.

Subscribe: https://www.youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw/featured

#html #css #javascript

What is GEEK

Buddha Community

Responsive Video Gallery Using HTML5 /CSS3 / Vanilla Javascript

Simple Menu using HTML5, CSS3 and Vanilla JavaScript

Simple Menu using HTML5, CSS3 and Vanilla JavaScript

#javascript #css3 #html5 #web-development #developer

Maida  Ratke

Maida Ratke

1604719024

Developing a Responsive Digital Clock Using HTML5, CSS3 and JavaScript

An in-depth explanation on how to create an interesting clock animation using plain vanilla JavaScript and a bit of flex-box.

I’ve always had a fascination with ornate clocks from vintage grandfather clocks to elaborately decorated timepieces, and other similar artifacts. The clock we’ll be making is nothing like the pretty ones above (rather it looks quite mundane in comparison) however, I had a lot of fun making it and hopefully you will too. Let’s start counting time with HTML, CSS, and JavaScript!

Image for post

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.

Image for post

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>

#javascript #html5 #css3 #programming #developer

Janis  Smitham

Janis Smitham

1626731040

How to Use Comments in HTML5 and CSS3 - Introduction and Learn HTML5 And CSS3

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.

  1. 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.

  2. 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

  3. 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

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

Wasswa  Meagan

Wasswa Meagan

1620489480

Best Books to Learn HTML5 and CSS3 - @ HTML5 and CSS3 Video Course

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