In this post, let’s convert a UI Design of a Mindfulness App into HTML 5 and CSS 3, which can later be used for developing a fully functional app or a website. We shall cover the first page design in this post and the next page design in the upcoming post.
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 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.
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 by clicking on ‘YouTube’ button below, for more such videos.