In this post, let’s convert a UI Design of a 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:
As you can see, there are 2 pages to this design. In this post, let’s convert the first page and in the next post, let’s convert the 2nd page.
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.