Bootstrap Triptych

🌎 Overview

As with the triptych 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—what we’ll call a “panel”—will contain the same content, but will be created differently. The first panel will focus on 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.

Remember that you can check out the Project Rubric page for more information about grading and class projects in general.

🧠 Rationale

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.

🏗 Structure

Panel One 

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.

Panel Two 

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.

Panel Three 

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

Organization

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.

📺 Content

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

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— make sure to proofread your content carefully and avoid low-resolution images.

📓 Grading (15 points total)

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.

✅ Required elements (7.5 points)

Every panel must include:

• A navbar, including:
  • A site title
  • A site logo (optional)
  • Links to all three panels in each panel
• At least one button (or link styled like a button) in the body of the page (more on buttons vs. links here)
• A portion of the page that has more than one column in a horizontal layout (in other words, you will need to use the Bootstrap grid.)
• Images (make sure they are appropriately sized) 
• A non-system font (i.e.: Google fonts, etc.) 

All panels must also meet the following criteria:

• Thoughtful responsive design throughout, including:
  • Optimization at minimum for mobile and desktop
  • Responsive images
• All CSS should be on external stylesheets (i.e.: No inline or internal style)
  • All CSS customizations must be included in a linked custom.css stylesheet
• Follow best practices with regard to file naming, HTML and CSS organization, accessibility, etc.

😍 Qualitative elements (3 points)

Here are a few things that you can focus on with each panel to help move your project from passing to excelling.

Panel One

• Creative use of Bootstrap components
• An eye toward aesthetics
• Coherent overall design

Panel Two

• Quality of the theme/template chosen (i.e.: theme works well for content, is well-rated/reviewed, etc.)

Panel Three

• Creative use of custom.css to customize Bootstrap and theme elements
• Integration of advanced CSS techniques (from FCC or other resources)
• An eye toward aesthetics
• Coherent overall design

🤔 Reflection (1.5 points)

On the main index.html in your project two folders, you’ll create a small cover page, with a screenshot and a brief (short paragraph or two) written reflection for each panel.

The reflections serve two purposes. First, articulating your thoughts about the process of building each panel will help you synthesize the skills you’ve learned. Second, the reflections also allow you to share what you’re proud of and draw the instructor’s eye to elements of your work1.  In other words, tell me why you’ve earned all those qualitative points! What did you do to go above and beyond?

In addition to directly addressing how you integrated qualitative aspects into the assignment, your reflection can also discuss:

• New skills acquired
• Struggles faced
• Things you’re proud of
• Additional things you’d like to learn/work on in the future

Write each reflection after completing each panel, before moving on to the next.

🛝 Playground (3 points)

Practicing is really important! Make sure that you’ve uploaded a playground for Bootstrap. Submission for this includes linking your work to your course homepage and uploading the files to the playground folder:

yoursite.com/webdev/playground

Submission

Your instructors will evaluate your project by visiting those URLs, so to double-check that everything’s in the right place, visit those URLs yourself, ideally in a separate browser or an incognito/private window to ensure that you aren’t falling victim to any caching issues. Check it once, and then check it again! If I can’t access your work it will be considered late.

Getting Started on Project Two

Ready to get going? Excellent! Check out the lesson aptly titled Getting Started on Project Two to get the ball rolling. If you decide to just jump right in without reading this less, no problem! However, it will be a good idea to double-check your work against the outline in his lesson to make sure you’ve hit all the highlights!