Design Interview Question to create responsive two column app layout
In Software Engineer Interview, you might be asked to design different app, layout, website. It is very useful to learn and know about the modern, cutting edge technologies. Even you are not able to finish code or design, you can still show your knowledge and interest in new technology.
It is very important to understand basic layouts like Flex Box and Grid Layout.
Read More about our new 3D Chart Design Post
With Tailwind CSS, you can Rapidly build modern websites without ever leaving your HTML. Also, you can use it with any latest library or framework like React, NextJs, VueJs.
You have given specific layout and your task is to create layout using cutting edge technology.
Tailwind CSS is utility first framework where you can build design quickly with great user experience. Tailwind CSS provides so many built in functionality and you can use those built in classes for UI component.
It is cross browser friendly and works across the devices using its media scale.
Now lets, start with tailwind css you can use grid or flex to create the layout. We will use flex as it provides better performance over grid layout.
First Step is to create HTML Schema:
<div>
<!--Col1-->
<div></div>
<!--Col2-->
<div></div>
</div>
Please Checkout Our Step By Step Guide to Create Responsive App Using Tailwind CSS
Now we can apply the flex class to container div and flex-1 to column divs.
<div class="flex">
<!--Col1-->
<div class="flex1"></div>
<!--Col2-->
<div class="flex-1"></div>
</div>
Read More on Interview Prep Guide:
Most Frequently asked interview questions and answers.
Now, You can provide background and other designing factors to the app. On large devices you can use flex-auto, flex-col classes to make it better with rich user experience.
Checkout this Tailwind CSS website to learn more about it and how to utilize it for your own project.