After determining your main site goal, content, supporting design decisions, and site map, you should start to work on the layout of your site.
This should start with wireframe mockups. As mentioned during the course, you can do this using something like Illustrator, an online service, or simply use a pencil and paper.
For the first few iterations, you should make lo-fi wireframes, that just deal with basic placements of content on a page.
NOTE: Since this must be a responsive site, I would highly encourage you to start your wireframes for mobile devices (a long narrow column). Once you can determine good layouts for a mobile device, then work on wireframe layouts for tables/medium-sized screens, then finally large screens.
This is the step where you should start to think about what design pattern or common layout style you might want to follow (mostly fluid, column drop, etc). Here are some links (in addition to the course content) to get you thinking;
In contemplating this, make sure you look at lots of other sites. Consider what might work for your content, or might not. Please remember to document this research and your considerations for discussion in your final readme.md report.
If you need sketch grids, you might check out one of these resources;
After defining lo-fi positioning of your site, you should try to mockup higher-quality or high-fidelity mockups of what you want your site to look like.
These should include font choices, color palette choices, images, and site interaction.
This step is optional, but encouraged for those of you who are skilled with adobe (or the like) products. This is a critical step in the professional world, and one worth practicing. It can help you get an idea of what your finished site will look like, allowing your technical development time to be driven from a well thought design document.
This is also the step where you might start to alter some of the art content you collected earlier. Such as adding filters, blurring, or reducing contrast to images that will have text over them. Cropping or shaping images that will need to be “special”. Recreating images that are currently too small that need to be “high-quality” content.