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 2nd page design in this post. For the first page design, you can click here
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 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.