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
Auf dieser Seite können Sie das Online-Video Frontend projects for beginners | Building a clock using HTML, CSS, and Vanilla Javascript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer BeGeos Dev 09 August 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 90 Mal angesehen und es wurde von 1 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
