Explainer website
This project is scaffolded, teaching foundational concepts by progressively building a short one-page website about any topic, fiction or nonfiction: basic car maintenance, rides at Disney Land, game consoles, an alien invasion, anything. For content, you can use Wikipedia content, Google searches, or other credible sources. Please source your content that is not yours and provide links at the bottom of the page. Citing your sources does not have to be in a specific academic format. Small weekly tasks on this project will demonstrate the application of techniques discussed in the weekly modules.
Duration: 5 weeks
Phase 1: Prototype
The first step in the web design process is to make a plan. When we go into development with a solid design plan, it is easier to development efficient, effective, and error-free code. Prototype a mobile and desktop design for your website using Figma. You may start with a wireframe, but it is not a required part of the turn-in.
This section will be graded on your grasp of using basic tools in Figma, alignment, and overall design planning. For this stage, you will not be graded on the quality of your design, but rather your design process thinking.
Phase 2: HTML
Using our wireframe and/or prototype to identify our elements, write HTML by hand for your website.
This section will not be graded on your content, but on the quality of your HTML code and how well you have recognized which elements from your design need to be accounted for in HTML.
Phase 3: Starting CSS
Using your prototype, write CSS to begin to apply your design to your HTML.
The section will not be graded on the quality of your design, but on the quality of your CSS code and how well you have applied it to your HTML.
Phase 4: Visual Hierarchy and Polish
Using your prototype, finish writing the CSS to apply your design to your HTML, including layout and positioning properties needed to achieve the look.
The section will not be graded on the quality of your design, but on the quality of your CSS code and how well you have applied it to your HTML. The mobile view of your website should be complete at this stage.
Phase 5: Responsive CSS
Using media queries, responsive units, and grid or flex, ensure your website can be viewed effectively on different screen sizes.
The section will not be graded on the quality of your design, but on the quality of your CSS code and how well you have adapted it for different screen sizes.