{"id":25471144,"url":"https://github.com/rkooyenga/mod3_solution","last_synced_at":"2026-05-05T22:41:36.584Z","repository":{"id":273817266,"uuid":"920973949","full_name":"rkooyenga/mod3_solution","owner":"rkooyenga","description":"school project - module 3 solution demo","archived":false,"fork":false,"pushed_at":"2025-01-23T06:03:21.000Z","size":12855,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T06:29:24.412Z","etag":null,"topics":["css","design","javascript","web"],"latest_commit_sha":null,"homepage":"https://rkooyenga.github.io/mod3_solution","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rkooyenga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-23T05:21:45.000Z","updated_at":"2025-01-23T06:03:24.000Z","dependencies_parsed_at":"2025-01-23T06:39:39.625Z","dependency_job_id":null,"html_url":"https://github.com/rkooyenga/mod3_solution","commit_stats":null,"previous_names":["rkooyenga/mod3_solution"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rkooyenga%2Fmod3_solution","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rkooyenga%2Fmod3_solution/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rkooyenga%2Fmod3_solution/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rkooyenga%2Fmod3_solution/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rkooyenga","download_url":"https://codeload.github.com/rkooyenga/mod3_solution/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239447550,"owners_count":19640323,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design","javascript","web"],"created_at":"2025-02-18T09:36:40.848Z","updated_at":"2025-11-05T01:30:23.109Z","avatar_url":"https://github.com/rkooyenga.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mod3_solution - Responsive Restaurant Layout  \n\n[view solution site](https://rkooyenga.github.io/mod3_solution/)\n\nMy submission for the Module 2 challenge in the Johns Hopkins University, Web Programming course. A CSS only responsive web layout demo making use of media query breakpoints and  that follows specific media queries breakpoints and grid to meet the assignment specs and adding a few extra touches.  \n\n## Assignment Specs  \n\nResponsive design with layouts for large, medium, and small screens according to assignment spec and the folllowing restrictions:  \n- no inline styles, assignment required a styles file\n- assignment requires leveraging bootstrap as much as possible\n- Use of semantic, accessible HTML.  \n- Consistent color scheme and readable typography.  \n\n1. (If you haven't already) Follow the Development Setup Video (beginning of Module 1) instructions on how to create a repository and set it up such that you can host and view your finished web pages on GitHub Pages, i.e., GitHub.io domain name. You will need to provide that URL for your peer review.\n\n2. Create a folder in your repository that will serve as a container folder for your solution to this assignment. You can call it whatever you want. For example, `module3-solution` or `mod3_solution`, etc. Create an `index.html` file inside the solution container folder, e.g., `module3-solution/index.html`.\n\n3. The implementation of the page you will be creating should follow the mockup illustrations shown below. You are provided 3 mockups: desktop and tablet (same), mobile, and mobile with mobile menu dropdown shown. Your implementation has to be JUST 1 page. In other words, you will be creating a single, responsive page.\n\n4. Your page must include a CSS file. No inline styles allowed. Your CSS file should be placed into a `css` folder under the solution container folder, e.g., `module3-solution/css`.\n\n5. For this assignment, you are to use Twitter Bootstrap CSS Framework as much as possible. I suggest you start with copying the starter bootstrap files and folders we discussed in Lecture 25 part 6. If you've cloned/downloaded the code example repository, it should be in the `examples/Lecture25` folder. Copy the contents of `examples/Lecture25` to your solution container folder (e.g., `module3-solution`) as a starting point..\n\n7. Since we are using Bootstrap for this assignment, instead of specifying pixel ranges, I will define our desktop, tablet, and mobile views in terms of Bootstrap CSS class prefixes, i.e., `md`, `sm`, and `xs`.\n  * Desktop mockup illustration should correspond to Bootstrap `md`-based classes\n  * Tablet mockup illustration should correspond to Bootstrap `sm`-based classes\n  * Mobile mockup illustration should correspond to Bootstrap `xs`-based classes\n\n8. Navbar: Create a navbar that scrolls away together with the page (the navbar should become invisible and is not fixed to the top when you scroll the page down). The navbar should have a company name (i.e., `navbar-brand` class) called \"Food, LLC\" that is aligned to the left side of the navbar. (*See* [https://getbootstrap.com/docs/3.3/components/#navbar](https://getbootstrap.com/docs/3.3/components/#navbar). *Make the browser window narrower to see the mobile menu button appear in the first example shown at the provided link.*)\n\u003cbr\u003e\u003cbr\u003e\nFor desktop and tablet view, the navbar should not contain anything else. No other buttons should be visible. (_Hint: use 'visible-xs' class._)\n\n9. Navbar - Mobile View: Create a simple menu button (3 horizontal bars). When the user clicks that button, a dropdown menu should appear (as illustrated in Mobile Open Menu illustration below.) The dropdown menu should contain 3 items: Chicken, Beef, and Sushi.\n\u003cbr\u003e\u003cbr\u003e\nThe dropdown menu should take up the entire width of the browser window. Make sure the dropdown menu has a background color set that distinguishes it from the rest of the content.\n\u003cbr\u003e\u003cbr\u003e\n(_Hint: See_ [_https://getbootstrap.com/docs/3.3/components/#navbar_](https://getbootstrap.com/docs/3.3/components/#navbar) _and Lecture 31 for examples on how to accomplish this._)\n\n10.  Page Heading. The page heading that says Our Menu should be centered within the browser window. You must use a Bootstrap class to accomplish this.\n\u003cbr\u003e\u003cbr\u003e\n(_Hint: look for a Bootstrap class that centers text, see_ [_https://getbootstrap.com/docs/3.3/css/#type-alignment_](https://getbootstrap.com/docs/3.3/css/#type-alignment)_._)\n\n11.  Create a single really tall section that will use the Bootstrap Grid and take up the entire width of the browser window (minus some margins, of course) for all views: desktop, tablet, and mobile. To make the section really tall, you can either fill it out with a LOT of text or simply set its height to something like 1000px. It needs to be tall enough to cause scrolling down to be required to view the bottom of the section. Make sure its background color is set to distinguish it from the rest of the content. (_Hint: don't forget to have an element with a class='container' or class='container-fluid' wrapping your grid. Remember that to have the grid do something \"always\", i.e., no matter what browser window size, use the `col-xs-`... classes. In this case, since we want the section to take up the entire row, use `col-xs-12`._)\n\n\nBoth the tablet view and the desktop view of what's graded and required is the same. Here is the mockup illustration of the desktop \u0026 tablet version of the site (only required graded parts shown):\n\n ![Desktop and Tablet](images/desktop.png)\n\n\nHere is the mockup illustration of the mobile view (only required graded parts are shown):\n\n ![mobile collapsed](images/menu-collapsed.png)\n\n ![mobile expanded](images/mobile-expanded.png)\n\n\n**\u0026#42;\u0026#42;\u0026#42; REQUIRED GRADED ASSIGNMENT ENDS HERE \u0026#42;\u0026#42;\u0026#42;**  \n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n\u003c!--\n## Extras\n\n- Self-hosted WOFF2 fonts compressed from True Type Files using [ttf-to-woff2](https://rkooyenga.github.io/ttf-to-woff2/)\n- A logo and dummy company branding aligned demonstrating Flexbox.  \n- 3D animations and shadows for a polished look.\n\n--\u003e\n\n## Peer Review Stage: \n\n\n- Does the implementation use inline CSS styles at all (not allowed) or does it reference an external CSS file?\n\n- Is the default navbar implemented such that it scrolls away with the page, i.e., it's not statically attached to the top of bottom of the screen?\n\n- Does the brand name \"Food, LLC\" properly aligned to the left of the navbar and does it use navbar-brand class?\n\n- Is the dropdown menu button only visible when the browser is narrow enough to be in mobile view?\n\n- Does clicking the dropdown menu button make the dropdown menu to slide down? Does it take up the entire width of the browser (minus some margins)? Is the label of the each menu item (e.g., \"Chicken\")  centered using a Bootstrap class?\n\n- Is the page heading, \"Our Menu\", centered on the screen using the Bootstrap class?\n\n- Is the single cell section (or multiple sections as per optional part of the assignment) using the Bootstrap Grid System and is the section tall enough to force the viewer to scroll if they wanted to get to the bottom of the page.\n\n\n-by [Ray Kooyenga](@rkooyenga)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frkooyenga%2Fmod3_solution","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frkooyenga%2Fmod3_solution","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frkooyenga%2Fmod3_solution/lists"}