Frontend projects for beginners | Building a clock using HTML, CSS, and Vanilla Javascript
In this video I am going to build the entire frontend side of an application using HTML, CSS and vanilla Javascript to display a working clock with animation, colors and style. In web development frontend is the client-side rendered version of a website. Whatever the browser is showing you. Creating a web application is always fun and entertaining, and something like this project is very well suited for beginners programmers who would like to try and move their first steps into frontend development.
The basics of such application are extremely straightforward:
HTML - markup for the page, list the elements that are displayed and their hierachy, parent, children etc. Everything has a logical as well as a stylistical order;
CSS - used to style the content on a web page. It entails almost everything from size and fonts, to color. position and even animations. Here the style is very basic. Using CSS Flexbox makes it easy to layout div and elements beside each others or even one upon the other;
Javascript - to add functionality to your website you need to have a programming language. Something that can handle th elogic, gets an input, does some calculations and elaboration and finally gives back an output. JS per se, is a language that was created to work natively on the browser, create features and functions was its main purpose, something like moving the hands of a clock is the perfect way to test your skills to manipulate the DOM.
This video belongs to my Milestone project series where I share my project when I first started programming, to more advanced stuuf like APIs, web framework, databases, routing and much more.
Using tools like Flask, Django, Express, Python and NodeJS I have created so many things that I am totally happy to share if they might ever be of help for someone. Self-taught programmer have a tough times learning, they need structure, organisation and motivation. My milestone project series is meant to give exactly this.
This series still has many videos to come so stay tuned for more,
BeGeos,
Follow me on Twitter and GutHub:
Twitter: / begeosdev
GitHub: https://github.com/BeGeos
Timestamps:
Intro: 00:00
Folder Structure: 01:25
HTML Markup: 02:19
CSS Styling: 07:14
Javascript: 16:00
Final Thoughts: 32:33
Outro: 33:53
Sur cette page du site, vous pouvez voir la vidéo en ligne Frontend projects for beginners | Building a clock using HTML, CSS, and Vanilla Javascript durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur BeGeos Dev 09 août 2021, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 90 fois et il a aimé 1 téléspectateurs. Bon visionnage!
