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
On this page of the site you can watch the video online Frontend projects for beginners | Building a clock using HTML, CSS, and Vanilla Javascript with a duration of hours minute second in good quality, which was uploaded by the user BeGeos Dev 09 August 2021, share the link with friends and acquaintances, this video has already been watched 90 times on youtube and it was liked by 1 viewers. Enjoy your viewing!
