{"id":76,"date":"2018-02-09T11:02:37","date_gmt":"2018-02-09T16:02:37","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=76"},"modified":"2023-09-21T01:44:04","modified_gmt":"2023-09-21T01:44:04","slug":"bootstrap-triptych","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/bootstrap-triptych\/","title":{"rendered":"Bootstrap Triptych"},"content":{"rendered":"\n
\"\"
Annunciation Triptych<\/em><\/a><\/figcaption><\/figure>\n\n\n\n

? Overview<\/h2>\n\n\n\n

As with the triptych<\/a> above, we’re going to create a three-paneled look at the same subject. That is, you’re going to create the same single page three separate times. Each version of the page\u2014what we’ll call a “panel”\u2014will contain the same content, but will be created differently. The first panel will focus creating a webpage with Bootstrap components. The second panel will have you recreate that same page using a pre-created theme, and the third panel will ask you to customize that theme so that you have a truly unique webpage. <\/p>\n\n\n\n

Remember that you can check out the Project Rubric<\/a> page for more information about grading and class projects in general. <\/p>\n\n\n\n

? Rationale<\/h2>\n\n\n\n

The three panel approach that this assignment uses will help you create a responsive, mobile-first webpage using Bootstrap components and then allow you to explore the opportunities and challenges presented by integrating a pre-existing theme into your design. Finally, you’ll learn how to customize that theme to create an original project. <\/p>\n\n\n\n

? Structure<\/h2>\n\n\n\n

Panel One <\/h3>\n\n\n\n

In Panel One, you’ll create your site from scratch, using only standard Bootstrap components. Your focus is learning how to achieve the layout and look you want using standard components.<\/p>\n\n\n\n

Panel Two <\/h3>\n\n\n\n

For Panel Two, you’ll take your content from Panel One and place it in a theme\/template of your choosing. However, in this panel, you may edit only the content (HTML) of your template, not the appearance (CSS). This panel should take the least time of the three, and is really intended primarily as a record of your progress from Panel One to Panel Three.<\/p>\n\n\n\n

Panel Three <\/h3>\n\n\n\n

In this panel, you’ll take what you created in Panel Two and customize every detail just the way you’d like\u2014colors, images, layout, etc. The end result should be a fantastic-looking Bootstrap page that, while bearing a resemblance to Panel Two, looks uniquely yours.<\/p>\n\n\n\n

Organization<\/h3>\n\n\n\n

You’ll work within the pre-structured files in your project-two folder in your webdev folder. Then, copy files from there to the project-two folder on your server as they’re ready.<\/p>\n\n\n\n

? Content<\/h2>\n\n\n\n

For content, you may choose any unified topic you’d like (it could be giraffes, NBC’s The Good Place<\/em>, your portfolio, whatever, really.)<\/p>\n\n\n\n

As with the first project, there is no specific word count tied to each panel, but you want to generate enough content that you can convincingly execute the goals of the project. In other words, have enough stuff on the page that it looks like you have a real website. This class isn’t focused on content creation, but try to show your website a bit of love\u2014 make sure to proofread your content carefully and avoid low-resolution images. <\/p>\n\n\n\n

? Grading (10 points total)<\/h2>\n\n\n\n

Note: This project is graded a little differently from the last project. Each panel is worth 3 points; this encompasses both required and qualitative elements. The reflection is worth 1 point.<\/p>\n\n\n\n

\u2705 Required elements<\/strong><\/h3>\n\n\n\n

Every panel must include:<\/strong> <\/p>\n\n\n\n