Overall, nice job. I know you worked hard on this, and it shows. There are some glitches and design flaws, but they're easy fixes (refer to the other annotations here and in the interior pages)

The Outside logo should link to the magazine.

You have some alignment and padding issues on the mobile versions of these section titles.

Consider using large, set-off pull quotes to add some visual interest, break up the text, and engage the audience. There are a lot of great lines you could use in this story.

Float this image left so the text wraps around it and fills the negative space.

You have way too much padding on the article text on mobile. The gutter is so large, the column of text only allows three or four words per line, and it's really hard to read.

Keep working on the design for these buttons. Since they're Previous and Next, make it more obvious by spreading them out like nav arrows on the edges of the screen.

Overall, nice work. I like the quilt mosaic design on desktop, and you were smart to use a different layout on mobile. I'm not sure, however, that the quilt motif is the right choice for this particular story. Yes, the quilts are famous in Gee's Bend and they're mentioned in this story -- but only in passing. As visuals, they look good, but are they really integral to the themes of this piece (death, struggle, acceptance)?

The LA Times logo should link to the newspaper, not the start of this particular story.

You don't need quite this much line height

Float this image left so the text wraps around it. And don't forget captions on your photos.

Add more padding on the desktop text; it shouldn't go all the way to the edge.

Nice job creating a separate menu for mobile and using the horizontal space on desktop.

Definitely use the condensed logo here

Nhi, Overall, this looks good and most of the code works. I would try to improve the visual hierarchy on the homepage, though. The LA Times logo and story title are too similar in size and style (and proximity). Consider using the condensed version of the logo and move it to the left corner, so it doesn't compete with the story title. Also, you might want to add a subtle color on the interior pages, not just to give a little pop to the black and white scheme, but to create a sense of narrative cohesion to the piece.

Anissa,

Nice work. Overall, this looks good and everything works. You main problem -- especially on the homepage -- is the lack of visual hierarchy. The three font sizes and styes (logo, story title, and chapter titles) are too similar, and you have some alignment and proximity problems on mobile.

Add transition:0.2s on the hover states and use less of a size increase so they aren't so jarring.

On mobile, use the condensed version of the LA Times logo.

You need previous AND next chapter buttons so users can navigate both ways!

Consider making the photos smaller on desktop and floating the text around them.

If this is meant to be a pull quote, it needs to really look like one: large, set off from the rest of the text, contrasting font or color.

Add more padding to your desktop interior pages

There's no Home button in the main menu! Once users enter the site, they can't go back to the homepage. And this is what they call a landing page, or splash page. Users will expect this to be the entry point to the story, and they'll think that they should click on the tiger photo or other items on the page to enter the story. Also, this page isn't quite responsive. On mobile, the text is too small and inconsistent -- it needs to be the same size as the interior pages -- and there is too much empty space below the box. Consider using background-image for the photo and put the text on top.

Remember visual hierarchy. The title needs to look like a title; you need a lot more contrast between this text and the body text. Make it larger, use different font, color., etc. Or put the title over the photo and make the photo full-screen. Right now, there's too much white space.

Make this a sticky nav and/or repeat it at the bottom. This is a long article, and right now, you're forcing users to scroll all the way back to the top after they've read it.

This is a great start, with the first two GIFs, but then you stop and there's a long, long stretch of text without images. Break it up with more images.

Add captions to the GIFs to explain what we're looking at and why they're on the page.

This looks great, but users will expect it to be interactive, since it's separated into its own section in the menu. I showed you one way to make the images interactive in class: create text that appears in each grid area on hover. That would really improve this section. And don't forget, you need the main menu on every page of the site!!

This looks unfinished. You need to add at least one photo on this page to be consistent with the other pages.

The photo of Sacks is an odd choice for the homepage. You need to announce the story not the author. And this story calls for an image that really jumps off the page. And it needs a title font to match; think movie poster. "Speed" should be large, bold, and with lots of contrast to the body text. There's too much negative space around the photo, too. I'd consider using a full-screen photo with the title on top.

This page has way too much gutter on mobile. Just change the body padding in the media query (80px fine for desktop, but not mobile).

Float this image left so the text wraps around it and fills the big gap on desktop.

This menu is a bit confusing because it's so jarring. Users won't realize that this is a single-page scrolling section when they click on a chapter in the menu; it looks like the chapter is opening as a new page, but midway through the chapter by mistake. There are ways to make it scroll down smoothly with just CSS.

Overall, excellent work. The LAT logo should link to the newspaper, not the start of this story.

Make this look like a caption; contrast it with the article text (italics, font size)

This menu is glitchy; the numbers don't quite take you to the correct quilt box. You'll be able to build a better version of this once you know JavaScript.

This section is excellent. Nice work.

Overall, this is a solid design and the coding is strong. I'm not sure the color scheme and font quite fit the themes/mood of the story, though. Keep working on the visual design and CSS options; there are a lot of ways to evoke the themes and engage the audience visually

On your mobile menu, you need a close button and/or code to make the menu go away when users click on Beginning and they're already on that page.

The Outside logo should link to the magazine, not the start of this particular story.

Break up the long stretch of text with another photo

watch out for typos

As you can see, there is way too much negative space left of the photo because of the paragraph break. The simple solution is to wrap this section in a div and use Flex on it. Then the photo and text will sit perfectly horizontal and you can control spacing, border, etc.

Your bottom nav needs previous AND next buttons, so users can navigate back and forth! Or use a sticky nav at the top.

Nice job with the pull quote border and placement. Go ahead and make the font larger.

Remember visual hierarchy. This really needs to stand out and look like a title. Think movie poster. Consider putting it on top of the photo, in the sky.

I love the idea of the background photo and parallax, but the photo competes too much with the text. Remember: contrast, legibility. I think you increased the font size and added the drop shadow on the text because you instinctively realized this problem; but when you find yourself doing that sort of thing, reconsider using the background photo in the first place. Right now, the large body copy is (ironically) hard to read. And you added the border on the photos to avoid the photo-on-photo problem, but it's still there, largely because some of the images are duplicative (at one point, you have an photo of a mountain on top of a photo of a mountain). Again, reconsider using this particular background image in the first place if it's causing so much trouble with the design.

You need to contrast the intro text with the rest of the story, with font size, italics, etc. It needs to look like a separate intro section, not part of the original story.

The title really needs to jump off the page. Remember visual hierarchy. Think movie poster. Use the negative space in the sky and maybe change the font and color. The title needs to be much larger than the body text.

Kudos on your attempt to actually create the Outside logo with code (font color, etc.). But it broke the menu on mobile. Just use an image of the Outside logo and adjust the max width, etc.

Adjust the width and height of your photos to keep the aspect ratio (otherwise it looks squished and/or stretched).

I love this landing page photo and the dark color scheme. But keep working on the visual design for this story; there are a lot of ways to evoke the themes and engage the audience visually.  For example, the geography of Gee's Bend is such an important aspect of this story -- users will want to see a map.

The story title is missing. You need display:block in your media query, not display:static. This will really confuse users, because they won't know what they're looking at. And go ahead and put the LA TImes intro text and button over the photo, too. Right now, users might miss the text because they have to scroll past the viewport. And you can just put the UNC project info in a small footer.

The LA Times logo should link to the newspaper.

Really set your pull quotes apart from the body copy. Again, take advantage of the horizontal space on desktop -- move them out to the sides, with a border bar or other visual element to make them stand out as separate blocks.

Title needs more contrast from the rest of the text to establish visual hierarchy.

This is too much gutter (padding) on desktop. The LA Times uses a wide gutter, but they have to include ads. Take advantage of the horizontal space in your desktop layout.

Great landing page photo. But users might miss the text because it's way below the viewport on desktop. And users need to know what they're looking at immediately. I'm not sure the project about text -- without the story title -- is the best choice for the landing page. The LA Times intro text is fine, but it needs to be juxtaposed with the story title, preferably on top of the background image, with the Read More button nearby too. And you can put the UNC about info in a small footer.

On mobile, users have to scroll down the page past the two photos before they see the title and realize what they're looking at. Try using just one photo and placing the title over it.

Nice job capturing the LA Times brand. Keep working on the visual design for this particular story, though; there are a lot of ways to evoke the themes and engage the audience visually. For example, the geography of Gee's Bend is such an important aspect of this story -- users will want to see a map.

Move this to the top so users can hear it as the read, not discover it at the bottom of the page. You'll have a lot more creative options for using HTML5 audio once you know some JavaScript.

Be consistent in your pull quote styles. Use the gray background box like you did in Chapter 5

Kendal, Great job capturing the LA Times brand.

You need Previous and Next buttons (e.g., Chapter 1 on the left, Chapter 3 on the right) at the bottom so users can navigate back and forth.

This needs more contrast to set it apart from the copy below. Try italics, color, etc.

The title needs to be much higher in the visual hierarchy, like a movie poster. Try different, larger fonts and maybe put it on top of the image.

There's too much negative space around the photo; try floating the image and wrapping the text.

Pull quotes really need to look like pull quotes -- big, set apart from the body text, more illustrated, more contrast.

You need more padding around the entire desktop layout.

This is a good idea, but it feels unfinished. Users will expect the avatars to be interactive -- and with CSS, you can do that. For example, you could use Grid and have text that appears on hover. Also, the alignment is off on this gallery because the boxes are different sizes. Set a max-width and height on the boxes so all of them are the same size.

Argh. Broken image link. Probably a typo in the html

There's too much negative space on this page. Maybe align the text and photo horizontally.

testing

Make the chart larger, align it with the edge of the infographic, and add some brief explanatory text to the side. Is this adjusted for inflation? You need to mention that. The chart also needs a Y axis. And users will wonder why you stopped at 1985. There is probably an interesting trend to show in recent years: revenue has increased but so has overhead, so profit margins may be less than before. Add more recent movies to the chart; you should have the data.

awkward phrasing. And the sentence about the second Indiana Jones movie is confusing. I think you mean that the second one didn't reach blockbuster status because audiences found it too gory, but the franchise bounced back with the Last Crusade.

lowercase

Why is all of the Guardians text italicized?

Broken image link (403 error). Try re-uploading the image to your server. If that doesn't work, go through these steps: https://www.hostinger.com/tutorials/what-is-403-forbidden-error-and-how-to-fix-it

If you're going to remove the Iron Man modal window, remove the target area in the code, too.

web-slinging hero?

Quote marks

Need a space here. It looks like IV-A (or 'four A).

Move the close button to the top right and use an icon. This looks a bit unfinished.

lowercase

I'm not sure what you're trying to say here. They account for a large portion of the succes?

I love the visual design. It looks like a move poster, and that's the perfect way to illustrate this story.

Isn't this supposed to be a photo from the 1940s?

I think she's wearing pants, no?

Change the width and height of the image to preserve the correct aspect ratio

Left-align the text and reduce the line height

What's the story in this data? The cost of apparel fluctuated while other goods showed clear upward or downward trends? If so, a line chart would be a better choice to tell that story. And since your overall story is about fashion trends -- not the cost of apparel -- perhaps a chart showing sales of various iconic styles of clothing over time, e.g., high heels, blue jeans, etc.

Ashley, I like the overall look of this app; the background photo is great. But users may miss the content below the viewport. I would try putting the timeline vertically and to the left or right, with transparent background and a different color text. And incorporate the chart into the timeline, so it's not sitting on the page over the photo on page load.

Consider using a different color for the title to make it pop against the sepia photo.

Here are

This phrasing is awkward.

Wow. This is your lede. "Imagine doing 32 box jumps per minute for 20 minutes. With a weighted vest. Now do that twice a day, six days a week. Welcome to collegiate rowing."

Center the chart and make it larger so the labels aren't scrunched. You need a label on the Y axis and units for the numbers in the tooltips. Even with the detailed explanation, this chart will still confuse some viewers. I would include the average VO2 max for a non-athlete in the data, for comparison; then we'd really see how much fitter rowers are than the typical student.

How do you decide who gets to be the coxswain? Do you rotate that position?

Jeez.

at UNC

Add a blur filter to the background and/or darken it when the modal windows open.

Lydia, I love the way you organized this topic as a to-do list. But the piece needs a stronger visual. Consider using a background photo or video. I'm sure you can find a great photo of a boat on the water, with enough clean space (sky, water) to lay the text and to-do list on top.

capitalize

What's pre-hab? Define unfamiliar terms on first use (AP style).

Cut the intro text in half and put some of the details inside the relevant modal windows.

The close buttons look dated and out-of-place with the rest of the design. You can customize the default HTML buttons, or just use text or an icon.

Natalie, This looks cool and the illustrations must have taken a long time. You're a good digital artist.

Your data viz is essentially a republishing of the same chart in the Pew article. I was hoping you would try to build an original data visualization for this story.

What year does the data represent? 2017? You need to mention that in Y axis label or chart title.

You seem to contradict this statement with the Pew data in the next sentence. 36 percent is not even a majority, let alone a high enough number to suggest that it's the 'primary way' younger generations consume news. After looking at the chart, I understand what you're trying to say -- younger generations use social media as their news source more than any other platform -- but the way that you've phrased it here makes the 36 percent sound like a contradiction.

technically, it was invented in 1969

comma

networks'

In 1926, the... The copy in this entire section needs polishing. I know the written content wasn't the focus on this class, but for the purposes of your portfolio, keep working on it.

comma

I'm not sure what you're trying to say in this phrase.

add space between the dash and the word next to it

Put in quotes

None of the other classes read the paper?

This phrasing is awkward.

circulated throughout Renaissance Europe?

Cut this from the intro and put the info in the timeline sections. Remember: keep the copy short online.

Keep working on the position and design of the sources window. It looks a bit rough right now.

Safa, This is an important and eye-opening story, and as usual, your writing is great. Keep working on the layout. Consider moving the intro text to the top, laying the timeline vertically on the left or right side of the main photo, and changing out the photo on click. That would keep everything together on the screen and keep the audience more engaged.

A heat map would be a better fit for this data, so users who are unfamiliar with these states can see where they are in India. Try Google GeoCharts.

The word 'Home' is confusing because users will think it pertains to the home page of the app, not housing. Regarding the scalping and horse riding, how did the attackers know the men were Dalits? (human depravity knows no bounds...)

Safa, You're getting 403 permission errors on your images. Try the fixes listed in this article: https://www.hostinger.com/tutorials/what-is-403-forbidden-error-and-how-to-fix-it

Consider using a drop cap on the first letter (I) and wrap the rest of the intro text around it, to give the story a magazine style.

This title, 'Untouchable,' is a bit confusing. To many readers who are unfamiliar with the Dalits, the word 'untouchable' connotes a hyper-elitist mindset, e.g., the 'untouchables' are those so privileged that they're above society's rules. Quite the opposite of the Dalits.

Great phrase

Interesting. This is eerily similar to the stratified society laid out in Plato's Republic.

Users will expect the red text to link to external articles.

Keep experimenting with the visual design of your title section. It seems a bit drab or 'corporate' for such an important story with such a strong title.

Garrett, this looks good and everything works, but you need to consider your audience in a story like this. See my annotations for more details about the writing style. There are myriad ways you can explain this research with interactive elements. You're a good programmer. Keep experimenting.

What hypothesis?

The legend is cut off in the chart. Make sure you fix this before you put it in your portfolio. It's always important, but especially for a story like this.

Garrett, You must consider your audience for a story like this. A general audience won't be familiar with the terms (B-cell, mRNA sequencing, etc.) and therefore won't really engage with the story. If you want a general audience, you need to write this like an article for the health section of a national publication. Define unfamiliar terms, explain procedures in a way that laymen will understand. Dr. Tom Linden teaches Medical and Science Journalism at UNC and is a great resource if you want to learn more. Here's one of his books: [https://www.amazon.com/New-York-Times-Reader-Timescollege/dp/1604264829] If your audience is scientists, then you can keep your copy the way it is, but consider a different visual approach. The illustrations might not fit the vibe of a scientific journal. I would focus on data visualization.

This phrasing is awkward.

University of North Carolina at Chapel Hill (AP style)

Grant, This is a great story; interesting and important. The tomato graphics, however, don't convey the information as well as they could -- especially since the same carousel is repeated on each tomato -- and the style doesn't quite fit the tone of the piece. Since food waste is at heart a data story, I would put the chart front and center. The chart is the eye-opener. Then use the tooltips in the chart as the modal windows. Users can explore the food waste journey by clicking on each color band in the chart. Google Chart tooltips can include anything you want, e.g., photos, sliders, custom text, etc.: (https://developers.google.com/chart/interactive/docs/customizing_tooltip_content)

Watch the typos

Remove the bullet points on your list items.

Dominck, this is an interesting, well-written piece, and you did a good job on the timeline. You just need to rework the layout and polish the visual design. I would put the timeline to the right and the modal windows on the left, in the same spot as the header photo and intro text. That way everything stays in the same screen; just swap the photo and text on each click.

Keep experimenting with the font and layout. The design feels a bit dated and unprofessional. I like the marquee idea (and nice effort on it), but it needs polishing. If you can get a higher res photo and fix the alignment of your custom lettering on the sign, then make the image bigger and let the lettering be the title for the story; you don't need it twice. I would also make your logo much smaller and move it to the top left corner. Remember the rules of visual hierarchy. Right now, it looks like the title of the story.

Left-align the text

Ally, this is a great start, you just have some glitches and other things that need polishing. Fix the size, background, and position of the modal windows so users can easily read the text. I like the background image, and I like the illustration of the body, but I'm not sure they work well together. I'd consider a more minimalist design that focuses on the body illustration.

This title is vague and misleading. Your story is about the top five causes of death, not 'global diseases.' The top five most prevalent diseases may include ones that don't kill people, and the phrasing, 'global diseases,' implies that you're talking about diseases that exist worldwide; I think you mean 'top five causes of death, worldwide.'

Your list font should be the same size and family as the rest of the text in the window.

not smoking

The chart has problems, but you should be able to fix them easily. The title is vague and irrelevant to the data. The legend is missing the yellow, green and purple categories. The lines need tooltips to show the actual numbers on hover.

You need to change the background color on the modal window so the text doesn't compete with the chart below it. And I would move the window to the center of the screen.

The slideshow nav doesn't work.

Keep working on the design of the sources window; move the close button, center the text, etc. And add target=_blank so the sources open in new windows and users don't have to start back at the top of the piece.

This bleeds past the div; you need to fix the size of the div or add overflow-y: scroll. And some of the years in the left column bleed into the left-hand content section.

You need to define this unfamiliar term for your audience. What's the difference between a rep player and featured cast member?

I know you really struggled with the chart and ran out of time to make ones for the other comediennes. But if you're only going to include the Amy Poehler chart, don't show it until users click on her section of the timeline. It's confusing otherwise.

What's the 'rating' below Candice Bergen's bio?

You should start the content with the first year in the timeline (1975, Gilda Radner).

Maia, This looks great, but the HTML video file is large and that really slows down the app, even on desktop; it took almost 20 seconds to load on my 2017 MacBook Pro. Try using the Adobe Media Encoder to shrink the mp4 size.

Matt, This is fantastic. It's an interesting story and you told it with tasteful interactivity and great visual design.

This is a great use of data vis to enhance a story. Well done.

interesting...

This is awkwardly phrased.

typo: one of the greatest...

The 'next' button is an upside down 'previous.'

Great choice to demonstrate the Telecaster sound.

how so? what makes other guitars more complicated?

Define an unfamiliar term on first use (AP style).

You could do a separate piece on Les Paul...

Nice job with the HTML5 audio player, but the audio controls don't really fit your style. You could easily trigger the audio with the slider arrows so it plays automatically on each slide, and then add simple mute/stop/play buttons on the screen.

The yellow bitmap text looks cool, but it's hard on the eyes with the snow TV background, especially by the last few slides. Good writing though. Clear and strong. Is the TV set a crucial element of the A$AP Mob story? If not, ask yourself if it's the best design choice.

Need to align the chart with the text. And make the chart larger so you can add a legend showing which rapper/group is represented by each color.

Add target_blank so the links open in new windows and you can go back to the Sources page without clicking through the whole slider again.

What happened to Yams? Many people in your audience won't know.

I did not know that. You learn something every day.

It's hard to judge the rest of the visual design of your app because the slider is broken.

This text is too small and is surrounded by too much negative space. I would keep trying other fonts.

Aubrey, this is a good start, but as you probably know, it's broken. The first five slides appear statically on the page, outside of the slider, and the sources modal window doesn't work. It looks like you pasted code from W3 Schools for the slider. The problem with pasting wholesale is that you won't understand the code enough to fix it when it breaks. Let me know if you want help. If you fix this, you'll have a solid piece for your portfolio.

Remember my warning about small sample sizes in data visualization. This is interesting, but it's not the sort of data that warrants a chart; in fact, it's rather odd, since it's just three small numbers (1, 2 and 2) with no reason to compare why one is greater than another. And readers will want to know more, e.g., what wars did Notre Dame survive? I'm sure are other datasets you can find to tell an accurate and noteworthy story about Notre Dame cathedral.

Vennela, This is impressive. It looks great, everything works, it's well-researched, and it's an important story. Great job.

Move the close button to the top right or top left in the sources modal.

Use the full name on first instance.

This map is great. It could use a little more contrast so the disparity between nations is clearer, though, and try to write some logic into the chart code so that abbreviated nations, e.g., SS, are listed out in full.

Use the full name, not the acronym, on first instance (AP style).

This chart needs labels on the Y axis so the audience can quickly see the remarkable story in the data: that Kobe has more rings than most other teams. Without labels, the chart is confusing.

Your sources need to be links to the sites.

cut this word

Darryl, this looks great. I love the color filter effect on the iso photos. Watch your contrast, though. Some of the text is hard to read because it competes too much with the background images. Also, you need to add a close button on the modal windows, however. It's not as user friendly as it could be.

typo

This is awkward phrasing.

Again, this isn't showing up live but it works on the local server. I think it's because of the URL path (./js/restaurants.json). Also, the tooltip isn't working in the stretch from 1935 to 1970. I'm sure some restaurants opened during that time. If you don't have the data from those years, you need to mention it in your piece. If you do have it, you need to represent it in your chart.

This isn't showing up live, only on a local server. Hmmm.

This map is fantastic and really useful, even without the color-coded markers (they aren't showing up in the live site, only on a local server). I'll probably use this map myself when I'm in the mood for a certain kind of cuisine and want to see what's available.

Jeez.

How does this compare to other well-known areas, like Bourbon Street? A comparison would add a lot to the story if you can get the data.

This is an odd and unfamiliar term to your readers. Aren't the areas surrounding Franklin -- e.g., Rosemary, Weaver -- extensions of the core Franklin zone? A subzone would be a smaller area within the larger Franklin zone.

The header looks great.

This chart is okay, but it doesn't tell the story quite as effectively as it should; the story being that whites are only group whose percentage decreased from 2000 to 2010. To show that in a more striking way, consider a toggle bar chart that shows only the 2000 bars at first, with radio button for 2000 and 2010. When users click the 2010 button, the chart data updates and all of the bars would get longer, except for the whites.

Great job on these maps. A few things: first, put the map for the earlier year (2000) on the left; most users will read left to right and expect chronological order. This will also make it consistent with the order in the bar charts, below.

Also, you need to add brief text explaining this section and inviting users to explore it, especially with the News API feed below the maps. Something like, 'Between 2000 and 2010, some racial groups moved in large numbers; others largely stayed put. Choose a group from the list below to see the shifts and current headlines related to those demographics.'

the graphic is to the left on desktop