Description:

Education: Self-taught / Bootcamp Graduate Years of Experience (YOE): 5

Questions Asked:

This was a 60-minute practical round focused on HTML and CSS. The interviewer gave me a prompt and asked me to implement the solution in a shared code editor.

The Prompt: “Create a responsive form layout.”

I was asked to write the HTML and CSS for a container with two input fields and a button that would adapt to different screen sizes.

• Large Screens (desktop): The two inputs and the button must be arranged in a single horizontal row. The two input fields should expand to fill any remaining space equally.
• Small Screens (mobile): The elements must stack vertically, with each input and the button taking up the full width of their container.

My Solution / Discussion:

I used a single div as a Flexbox container.

1. Base CSS (Desktop First):

• Set the container to display: flex and gap: 8px for spacing.
• Set the input elements to flex: 1 1 0 (or flex-grow: 1) so they would expand equally to fill the available space.

1. Responsive CSS (Mobile):

• Used a media query: @media (max-width: 768px).
• Inside the query, I changed the container’s flex-direction to column. This was the only change needed to make the items stack vertically as required.

Follow-up Questions:

• “Can you explain the three values in the flex shorthand property you used (flex-grow, flex-shrink, flex-basis)?”
• “What are the advantages of using the gap property over traditional margins for spacing flex items?”
• “Could you achieve a similar layout using CSS Grid? In what scenario might Grid be a better choice than Flexbox for this type of layout problem?”