{"id":1183,"date":"2026-06-13T14:43:41","date_gmt":"2026-06-13T14:43:41","guid":{"rendered":"https:\/\/peterbsimon.local\/?page_id=1183"},"modified":"2026-06-13T14:49:59","modified_gmt":"2026-06-13T14:49:59","slug":"homestead","status":"publish","type":"page","link":"https:\/\/peterbsimon.com\/work\/homestead\/","title":{"rendered":"Online Real Estate Marketplace"},"content":{"rendered":"\n<section class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pbs-container is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)\">\n<article id=\"article\" class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<section id=\"hero\" class=\"wp-block-group article-hero is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group article-hero__text is-vertical is-layout-flex wp-container-core-group-is-layout-98bb686d wp-block-group-is-layout-flex\">\n<p class=\"has-shade-40-color has-text-color has-link-color has-secondary-font-family has-h-4-font-size wp-elements-31a59b68cb185c632ccc491b407498e3\"><em>Homestead<\/em><\/p>\n\n\n<h2 class=\"wp-block-post-title has-text-color has-shade-70-color has-h-2-font-size has-secondary-font-family\">Online Real Estate Marketplace<\/h2>\n\n\n<p class=\"has-p-1-font-size\">Written to fully leverage CSS Grid &amp; Flexbox technologies and achieve an intricate, fully-responsive layout with an understated luxurious feel.<\/p>\n\n\n\n<p class=\"has-p-1-font-size\"><a href=\"https:\/\/preview.everlydesigns.co.uk\/homestead\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:var(--wp--preset--border-radius--md);border-top-right-radius:var(--wp--preset--border-radius--md);border-bottom-left-radius:var(--wp--preset--border-radius--md);border-bottom-right-radius:var(--wp--preset--border-radius--md);background-color:#0f1823;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\"><figure class=\"wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"588\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22982.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"Frame\" style=\"object-fit:cover;\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22982.jpg 880w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22982-300x200.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22982-768x513.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n<\/section>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-group article-main is-layout-flow wp-block-group-is-layout-flow\">\n<aside id=\"side\" class=\"wp-block-group article-sidebar pbs-article-styling is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">About<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In this project, I was tasked to <strong>translate a ready design<\/strong> of an online real estate and rental marketplace <strong>into a working front-end<\/strong> web prototype.<\/p>\n\n\n\n<p>The design of this project allowed me to master aspects of <strong>CSS Grid<\/strong> layout tools and properties<\/p>\n\n\n\n<p>I hope this project will serve as an indicator of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Front-end skills around CSS Grid and Flexbox.<\/li>\n\n\n\n<li>My approach to <strong>layout planning<\/strong><\/li>\n\n\n\n<li>Focus on <strong>quality code<\/strong>, <strong>maintainability<\/strong> and organisation<\/li>\n<\/ul>\n<\/aside>\n\n\n\n<div id=\"content\" class=\"wp-block-group article-body pbs-article-styling is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Quality code<\/h2>\n\n\n\n<p>While this is a relatively small project, I still tried to ensure that the basic HTML for the page follows best semantic practices and norms.<\/p>\n\n\n\n<p>The BEM (Block-Element-Modifier) naming system and the organization of files into base and layout files, components and mixins ensures that the project is extensible and can be easily extended by another developer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/1-about-1024x589.jpg\" alt=\"1 about\" class=\"wp-image-503\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/1-about-1024x589.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/1-about-300x173.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/1-about-768x442.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/1-about-1536x883.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/1-about-2048x1178.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Project&#8217;s file organization in the Atom editor on macOS<\/figcaption><\/figure>\n\n\n\n<p>The use of SASS along with gulp.js greatly increases productivity and allows for the use of mixins, functions and includes. The folder structure follows the commonly known 7-1 pattern and all the elements are divided into modules for greater versatility.<\/p>\n\n\n\n<p>In general, I always try to future-proof my code, because no one likes to work with rigid, messy and error-prone code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Implementation<\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"2560\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-scaled.png\" alt=\"Preview.everlydesigns.co.uk homestead (1)\" class=\"wp-image-1185\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-scaled.png 992w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-116x300.png 116w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-397x1024.png 397w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-768x1982.png 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-595x1536.png 595w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/preview.everlydesigns.co_.uk_homestead_-1-794x2048.png 794w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Beautifully responsive<\/h2>\n\n\n\n<p>All my websites follow the mobile-first approach to web development. That means, I start styling the elements for mobile devices first and add more code as the viewport gets wider.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1152\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve.jpg\" alt=\"2 responisve\" class=\"wp-image-502\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve.jpg 2400w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve-300x144.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve-1024x492.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve-768x369.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve-1536x737.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2018\/06\/2-responisve-2048x983.jpg 2048w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><figcaption class=\"wp-element-caption\">Screenshots of the front page portraying site&#8217;s responsiveness<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Want to inspect the code?<\/h2>\n\n\n\n<p>If you\u2019re interested in this project further, make sure to check out the GitHub repository below. I made this project temporarily public so you can preview any aspect of my code and see if I\u2019d be a good fit for your company:<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-c1740a5a wp-block-group-is-layout-flex\">\n<p><a href=\"http:\/\/github.com\/everlydesigns\/homestead\/\" target=\"_blank\" rel=\"noopener\" title=\"See GitHub repository \u2192\">See GitHub repository \u2192<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/preview.everlydesigns.co.uk\/homestead\/\">View live site \u2192<\/a><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Get in touch<\/h2>\n\n\n\n<p>I hope you enjoyed this case study and revisiting this chapter with me. If you like what you see here and want to get in touch, I&#8217;d love to hear from you.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-container-core-buttons-is-layout-5459b461 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/peterbsimon.com\/work\/contact\/\">Get in touch<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/peterbsimon.com\/work\/#portfolio\">See all projects<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Homestead Written to fully leverage CSS Grid &amp; Flexbox technologies and achieve an intricate, fully-responsive layout with an understated luxurious feel. About In this project, I was tasked to translate a ready design of an online real estate and rental marketplace into a working front-end web prototype. The design of this project allowed me to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1117,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"slim_seo":{"title":"Online Real Estate Marketplace - Peter Simon","description":"Homestead Written to fully leverage CSS Grid &amp; Flexbox technologies and achieve an intricate, fully-responsive layout with an understated luxurious feel. Ab"},"footnotes":""},"class_list":["post-1183","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/comments?post=1183"}],"version-history":[{"count":6,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1183\/revisions"}],"predecessor-version":[{"id":1201,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1183\/revisions\/1201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media\/1117"}],"wp:attachment":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media?parent=1183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}