Without breaking your mobile styles, add in CSS rules to accomplish the following at larger window-widths:
Make sure the page continues to work visually at ANY width, without overlapping content, elements falling off the side, etc.
Make sure these items are addressed in your MLK page:
Expand the browser window, and make the css and media-query additions required to transform your wireframe appropriately for desktop sizes.
Select the wireframe with which you want to proceed (hand-made or bootstrap), and complete the design process by addressing style needs. Aim for a design so transparently complete that your users need never ask the question "How do I...?"
If you want this work to be portfolio-ready (and you should), now is the best time to make sure that it is!
Much of the time we've spent doing hands-on work with HTML and CSS has been aimed at giving you first-hand experience that will lead to more informed design decisions. This project is about putting that experience to work in the design space. You will reorganize and redesign an existing site. You will not build the site yourself — rather, you are tasked with preparing a set of 'build-ready' design files and reference documents for a development team.
Expect the site to be built on a grid system. You will use the Bootstrap 12-column grid-system to guide your layout decisions. The site will be responsive, so you will plan and design layouts at multiple widths.
Seriously consider exploring and using an interaction design tool like Adobe XD or Sketch, rather than Illustrator or Photoshop.
Your work will be measured in terms of the organization and appeal of the finished design, and also in terms of 'build-readiness': i.e. how easily a development team will be able to pick up the project based on what you provide.
First, spend some time exploring the content of the existing site, and becoming familiar with it. What is the site's mission? What audience(s) does it serve? What is the site doing well already in terms of communication?
Second, find some similar or competitive sites, and review them as well. What more do they tell you about the topic? What could your site learn from them?
Third, find examples of sites that represent where you think your site could or should go visually. These need not (and maybe should not) be in the same industry as your target site.
Create an HTML document that describes your findings and links to your references, and post it here.
Your site probably suffers not only from poor visual design, but also poor communication design. It may or may not be organized in a way that serves it's goal. Question why the site is organized the way it is, and decide what, if anything, should change. What is on the home page? What are the navigation options? Document your decisions as a sitemap and upload it as a PDF. The sitemap should include:
Once you have instructor approval of your thumbnails and sitemap, build a set of wireframes for each of the key templates. 3 templates × 2 sizes = 6 wireframes, minimum.
The wireframe does not have to be built with HTML. It can be created with whatever tools you choose, but it should: