{"id":368,"date":"2026-02-17T01:44:56","date_gmt":"2026-02-17T01:44:56","guid":{"rendered":"http:\/\/mediacommunications.ca\/portfolio\/css-zen-garden\/"},"modified":"2026-03-14T23:58:43","modified_gmt":"2026-03-14T23:58:43","slug":"css-zen-garden","status":"publish","type":"page","link":"http:\/\/mediacommunications.ca\/portfolio\/css-zen-garden\/","title":{"rendered":"CSS Zen Garden"},"content":{"rendered":"
CSS Zen Garden<\/div>\r\n
<\/div>\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Please click image above to view completed website and elements<\/p>\n\n\n\n

\n\n\n\n

For my CSS Zen Garden assignment, the goal was to explore how CSS can completely transform the visual design of a webpage without changing the HTML structure. The project focuses on separating content from presentation, which is an important principle in modern web design. By working with a pre-written HTML file from CSS Zen Garden, I was able to focus specifically on styling the page using CSS. This helped me understand how layout, colors, typography, and spacing can drastically change the look and feel of the same content.<\/p>\n\n\n\n

<\/div>\n\n\n\n

For my design, I created a winter-themed website that uses cool colors and soft visual elements to reflect the atmosphere of the season. I incorporated shades of light blue, white, and soft neutrals to mimic snow and ice, while keeping the design clean and easy to read. Typography and spacing were also carefully considered so the content would remain visually balanced and accessible. Through CSS properties such as backgrounds, margins, padding, and positioning, I was able to create a layout that feels calm and visually engaging.<\/p>\n\n\n\n

<\/div>\n\n\n\n

This assignment helped me gain a deeper understanding of how CSS controls the visual identity of a website. I learned how to organize styles efficiently and how small adjustments in CSS can significantly impact the user experience. Overall, the CSS Zen Garden project demonstrated how powerful CSS is in web design and reinforced the importance of creating visually appealing layouts while maintaining structured and accessible content.<\/p>\n","protected":false},"excerpt":{"rendered":"

Please click image above to view completed website and elements For my CSS Zen Garden assignment, the goal was to explore how CSS can completely transform the visual design of a webpage without changing the HTML structure. The project focuses on separating content from presentation, which is an important principle in modern web design. By […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-368","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/pages\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/comments?post=368"}],"version-history":[{"count":13,"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/pages\/368\/revisions"}],"predecessor-version":[{"id":662,"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/pages\/368\/revisions\/662"}],"wp:attachment":[{"href":"http:\/\/mediacommunications.ca\/portfolio\/wp-json\/wp\/v2\/media?parent=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}