This is a continuation of previous post.
In this post, let’s convert a UI Design of a 2nd page of the Home Control App Concept into HTML 5 and CSS 3, which can later be used for developing a fully functional app or a website.
Before you begin, you need to have basic understanding of HTML 5 and CSS 3 and also basic exposure to Bootstrap 4, as we use this framework for quick layout and positioning of UI elements. Even if you haven’t worked on Bootstrap 4 before or if you are completely new to it, then you need not worry. It’s fairly simple and easy to use Bootstrap 4 classes by referring the official documentation below: https://getbootstrap.com/docs/4.5/getting-started/introduction/
To understand how flex display works, kindly refer: https://getbootstrap.com/docs/4.5/utilities/flex/
To understand how spacing works, kindly refer: https://getbootstrap.com/docs/4.5/utilities/spacing/
For generating gradient colour effects, I’d be using https://cssgradient.io/. Feel free to use any other tool of your choice.
For box shadow effects, I’d be using https://cssgenerator.org/box-shadow-css-generator.html. Again, feel free to use any other box shadow generator of your choice.
We’d be using Lato and Barlow Google fonts.
Get a UI design which you plan to convert into HTML, CSS. Apparently, which can be used for developing a fully functional app or a website. For this tutorial, I’d be using the following UI Design:
For complete guide, kindly follow the video tutorial below:
Thanks for reading and watching. If you found this post and the video helpful, kindly like, share and subscribe for more such videos.