{"id":1189,"date":"2026-06-13T14:38:47","date_gmt":"2026-06-13T14:38:47","guid":{"rendered":"https:\/\/peterbsimon.local\/?page_id=1189"},"modified":"2026-06-13T14:45:52","modified_gmt":"2026-06-13T14:45:52","slug":"foodie","status":"publish","type":"page","link":"https:\/\/peterbsimon.com\/work\/foodie\/","title":{"rendered":"Responsive Recipe Web App"},"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-399f73eb1248a65cef5d4e91ac8735db\"><em>foodie<\/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\">Responsive Recipe Web App<\/h2>\n\n\n<p class=\"has-p-1-font-size\">Recipe based web app for real foodies. Front-end built using CSS Grid, Flexbox &amp; vanilla JS with structural HTML, SEO optimization and structured data.<\/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:#272342;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-22983.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-22983.jpg 880w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22983-300x200.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22983-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, my task was to <strong>translate a complex Figma design<\/strong> <strong>into<\/strong> a functioning <strong>front-end<\/strong> prototype.<\/p>\n\n\n\n<p>Starting from scratch, I used <strong>CSS Grid and Flexbox<\/strong> to assemble this <strong>complex layout<\/strong> and made it <strong>responsive<\/strong>.<\/p>\n\n\n\n<p>Additionally, I designed the website along with a fictional brand called &#8216;foodie.&#8217;<\/p>\n\n\n\n<p><strong>This project features:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Web Design process<\/li>\n\n\n\n<li>Development (HTML, CSS and JS)<\/li>\n\n\n\n<li>SEO (Structured content)<\/li>\n\n\n\n<li>SASS, SCSS, Gulp.js, BEM<\/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\">Design and Layout<\/h2>\n\n\n\n<p>The design process for this web app began with a simple sketch. This mirrors my process. Before I jump into Figma, I always make sure that the structure and content hierarchy is correct. This first low-fidelity iteration helps me better communicate with the client and spot mistakes early.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/09191BDD-9F18-4F6E-87EB-4E06CAD7361C-1024x542.png\" alt=\"09191BDD 9F18 4F6E 87EB 4E06CAD7361C\" class=\"wp-image-1190\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/09191BDD-9F18-4F6E-87EB-4E06CAD7361C-1024x542.png 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/09191BDD-9F18-4F6E-87EB-4E06CAD7361C-300x159.png 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/09191BDD-9F18-4F6E-87EB-4E06CAD7361C-768x406.png 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/09191BDD-9F18-4F6E-87EB-4E06CAD7361C-1536x813.png 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/09191BDD-9F18-4F6E-87EB-4E06CAD7361C.png 1724w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Working from a brand file, I iterated inside of Figma to deliver the home page and the recipe page. This design file featured desktop, tablet, and mobile views, plus the reusable components in all the required states.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1032\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout.jpg\" alt=\"3 design layout\" class=\"wp-image-494\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout.jpg 2400w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout-300x129.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout-1024x440.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout-768x330.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout-1536x660.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/3-design-layout-2048x881.jpg 2048w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><figcaption class=\"wp-element-caption\">Overview of pages and viewports in Figma, which was used for designing and prototyping.<\/figcaption><\/figure>\n\n\n\n<p>In my view, making sites responsive is not just about making things smaller on mobile. It starts with the design process. I always test my sites on a real mobile device to ensure that all the elements are big enough for the thumb to tap and reachable without much strain.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Development environment<\/h2>\n\n\n\n<p>This project was created before Webpack and Vite were around. At the time, the best tools to compile <strong>SASS and JS<\/strong> was gulp.js and <strong>Node<\/strong>. The task runner was used to automate the process of minifying, prefixing, parsing SASS files. I also used <strong>Babel<\/strong> to convert <strong>ES6 JavaScript<\/strong> and gulp-uglify to reduce the file size. You can see that setup below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"630\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/4-development-setup-1024x630.jpg\" alt=\"development setup\" class=\"wp-image-493\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/4-development-setup-1024x630.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/4-development-setup-300x185.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/4-development-setup-768x472.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/4-development-setup-1536x945.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/4-development-setup-2048x1260.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Quick screenshot of the package.json file for the project<\/figcaption><\/figure>\n\n\n\n<p>After everything was set up, I began to create and categorize all .scss files according to the 7-1 folder structure. The git repository I created kept track of all the changes and was hosted on GitHub.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsiveness<\/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\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1260\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/03\/5-site-development-2048x1260-1.jpg\" alt=\"5 site development 2048x1260\" class=\"wp-image-768\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/03\/5-site-development-2048x1260-1.jpg 2048w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/03\/5-site-development-2048x1260-1-300x185.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/03\/5-site-development-2048x1260-1-1024x630.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/03\/5-site-development-2048x1260-1-768x473.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/03\/5-site-development-2048x1260-1-1536x945.jpg 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/figure>\n\n\n\n<p>In doing so it\u2019s easier to ensure that the mobile version of the site isn\u2019t a hurried after-thought. But it also means that mobile devices don\u2019t have as much code to load and the site loads more quickly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Semantic HTML + BEM + A11Y<\/h2>\n\n\n\n<p>The semantic structure of this web app made use of <strong>modern HTML5<\/strong> principles. For example, header and footer tags were used and headline tags (h1-h6) followed the site structure, instead of just being based on appearance. <\/p>\n\n\n\n<p>This approach also helps makes sites accessible so that people with various impairments can enjoy their content as well. If you&#8217;d like to learn more about how I approach <strong>accessibility<\/strong> in my projects, please see my <a href=\"https:\/\/peterbsimon.com\/work\/st-pauls-a11y-audit\/\" title=\"Optimising the St Paul\u2019s Digital Experience for Accessibility\">WCAG audit of the St Paul&#8217;s website.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"672\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/term-gulp.jpg\" alt=\"Term gulp\" class=\"wp-image-456\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/term-gulp.jpg 780w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/term-gulp-300x258.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/term-gulp-768x662.jpg 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure>\n\n\n\n<p>To help prevent specificity wars, the <strong>CSS<\/strong> classes have followed the <strong>BEM<\/strong> (Block, Element, Modifier) methodology. Next, following the <strong>7-1 folder structure,<\/strong> I begin the styling part of the website by breaking down every section or <strong>module<\/strong> into a separate SCSS file \u2014 this makes locating the relevant piece of code easier for others working on the site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Interactivity and JS<\/h2>\n\n\n\n<p>Once the site is styled I then add relevant functionality.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1084\" style=\"aspect-ratio: 1274 \/ 1084;\" width=\"1274\" autoplay loop muted src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-13-at-3-.33.17.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>This project uses vanilla JS for all its functionality. Sometimes, my projects require the use of a 3rd party library, like in this case Swiper.js.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1188\" style=\"aspect-ratio: 990 \/ 1188;\" width=\"990\" autoplay loop muted src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-13-at-3-.29.28.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>I can easily follow the documentation to ensure that the library works well with the site and behaves as intended by the author.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Structured Data (SEO)<\/h2>\n\n\n\n<p>As this is a recipe sharing site, it was very important for me that the search engines can understand the content that is published on the platform.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1476\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo.jpg\" alt=\"6 seo\" class=\"wp-image-491\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo.jpg 2400w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo-300x185.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo-1024x630.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo-768x472.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo-1536x945.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2020\/09\/6-seo-2048x1260.jpg 2048w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><figcaption class=\"wp-element-caption\">The recipe page is fully eligible for Google&#8217;s search engine rich results.<\/figcaption><\/figure>\n\n\n\n<p>This kind of <strong>SEO optimization<\/strong> will not only allow us to <strong>drive more traffic<\/strong> to the site but also help our visitors use our recipes on devices like <strong>Google Home<\/strong> or <strong>Amazon&#8217;s Alexa<\/strong> smart speaker devices.<\/p>\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\/foodie\/\" 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\/foodie\/\" title=\"\">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>foodie Recipe based web app for real foodies. Front-end built using CSS Grid, Flexbox &amp; vanilla JS with structural HTML, SEO optimization and structured data. About In this project, my task was to translate a complex Figma design into a functioning front-end prototype. Starting from scratch, I used CSS Grid and Flexbox to assemble this [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1116,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"slim_seo":{"title":"Responsive Recipe Web App - Peter Simon","description":"foodie Recipe based web app for real foodies. Front-end built using CSS Grid, Flexbox &amp; vanilla JS with structural HTML, SEO optimization and structured dat"},"footnotes":""},"class_list":["post-1189","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1189","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=1189"}],"version-history":[{"count":3,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1189\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1189\/revisions\/1197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media\/1116"}],"wp:attachment":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media?parent=1189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}