Intro
For this lab, I was required to create responsive pages using CSS and Bootstrap. According to the lab documentation, the theme for my website was based on the last two digits of my student number (58): Syria. It is a beautiful country known for its cultural heritage and long-standing traditions. Here is a brief overview of my experiences with both platforms and responsive design.
CSS
I won’t lie; I didn’t particularly like responsive CSS. While I appreciate how easy it was to customize individual elements (e.g., color, size, justification), I found it very difficult to make the page responsive while maintaining the styling of all elements—especially when it came to images. Although I was able to make my text and grids responsive, the images inside the grids posed a problem on larger screens. They did not enlarge as much as I had intended. Also, columns were not a good experiience for me... Additionally, I had difficult centering the images, which made the elements seem rather off-kilter on larger screens. However, the page responded very well on mobile devices and tablets!
Bootstrap
I preferred Bootstrap much more than CSS. Since Bootstrap has its own built-in libraries and styles, it was much easier to make the page responsive; all I had to do was assign a pre-existing class. Bootstrap also allowed me to maintain the element styles that I had defined in my CSS file. The images were a little larger than I expected, but they scaled well across various screen widths and remained centered. Columns worked much better in Bootstrap than in CSS, which helped me to organize my page entirely without grids. Implementing Bootstrap only took me about 30 minutes once I had read the documentation on the site, making it a relatively simple tool to learn!
Conclusion
Overall, I found the implementation of responsive CSS to be quite challenging, as much tinkering was required to get the page to match my vision. In comparison, Bootstrap was much easier to implement and allowed the elements to scale much better than I had anticipated.