Purple on black is way to0 hard to read. Remember CRAP

delete 'are needed'

Don't begin sentences with a number; write Twenty percent (AP style)

I like the illustrations, but as an interactive graphic, they feel a bit arbitrary and repetitive. What distinguishes one illustration from another, in terms of how they introduce their sections? Make unique illustrations for each section, e.g., a tree for Deforestation.

Add padding around the text, left-align it, cut it in half, and make the font smaller, so it's a true dashboard, i.e. the content is all viewable at once on the screen. Right now, users just see a lot of text below the title.

I like the illustrations, but as an interactive graphic, they feel a bit arbitrary and repetitive. What distinguishes one illustration from another, in terms of how they introduce their sections? The dogs are different colors, but there's no connection between the color patterns and the story in the modals. Make unique illustrations that relate to the content, e.g., a fairy for the folklore section, a dog herding cattle for the Employed section, etc., and/or include photos in the modals to add visual interest and demonstrate the concepts.

The dataset in the chart, when juxtaposed with the illustrations above, makes you think the illustrations represent these different coat patterns.

good

typo

capitalize

The visual design is a bit sparse on desktop, with so much negative space around the wind turbine and the timeline hidden below the viewport.

why is Wind capitalized?

This is an awkward phrase. Do you mean, 'in a modern society'?

This UI is a bit awkward and confusing on desktop because you have three different Roman numerals staked vertically and the numbers aren't chronological. And you really need a sticky nav with all of the chapters available so users can navigate as they wish without scrolling all the way back up from the bottom when they're done.

Fill the negative space on desktop by using float on the image and wrapping the text around it.

This UI is a bit awkward and confusing on desktop because you have three different Roman numerals staked vertically and the numbers aren't chronological.

Patty, this looks great. You went nuts with the GIFs, but it works for this story.

Nova, As usual, you came up with a bold visual style, and I admire that. But this one's not quite right for the story; it doesn't really convey the themes (danger, death, adventure) in a way that suits the brand. The two-toned text and handwritten lead-in fonts are a bit too 'fun' and nonchalant for this story, and it makes the captions hard to read.

Take advantage of the horizontal space on desktop. Float the image and wrap the text around it.

How do we get back Home from here? The New Yorker logo would go to the magazine's main homepage, not the start of this story.

This photo is too large on desktop. Use a media query to adjust it.

Use a sticky nav or back-to-top button.

Keep breaking up long stretches of text with A/V content. People don't read websites, they scan them.

You need captions on your photos

Great job matching the brand

This is an odd and confusing way to structure the site. The article begins on this page and continues on the Article interior page; but without a 'read more' or 'continue' button at the bottom, users will mistakenly think that the text on the homepage is something separate from the Article.

Change the nav on the last page, since there is no Next section.

Nice job with bottom nav, but center it with flex.

Float the video and wrap the text around it.

To fix the navbar: use max-width on the logo image and a dropdown menu and take the chapters out of a container div so they align horizontally. On mobile, use a dropdown menu or Bootstrap hamburger menu.

The entire card (image and title) needs to be linked to the interior page.

This looks good on mobile, but the desktop layout needs work. Take advantage of the horizontal space. Use Flex on the cards so the intro text and images are aligned horizontally.

Break up long stretches of text with A/V content to maintain visual interest and consistency with the rest of the site.

You really need a stick nav and/or secondary bottom nav.

Use max-width:100% and height:auto to make the images responsive (stay within the screen on every device).

Give the audio a title and brief description so users have a reason to listen to it.

You don't need to use HTML5 video for this background. Just use a GIF for the background-image in CSS. And remove the other background-image (river.jpg).

This looks great on mobile, but as you already know, it's broken on desktop. There are several reasons for this. Let's plan on talking next week and debugging.

Overall, this is solid. You clearly have a strong grasp on coding so far.

typos

This is awkward. If the UI and flow makes sense, users will naturally explore the video and podcast on their own.

Vertically center this text by putting Flex on .title-container and flex-direction:column. Move the title up top so it's prominent and looks like a title (remember visual hierarchy). Keep trying other fonts; find one that really conveys the themes of adventure and danger in this story.

Just make the Outside logo link to this URL

Remove the underlines on mobile and left-align the menu items. It looks a bit dated and wonky.

text is a bit too small

Take advantage of the horizontal space on desktop. Float the images and wrap the text to fill the space.

watch the typos

Remember visual hierarchy: a title needs to be prominently displayed so it looks like a title. Right now, it's below the viewport. And vertically center the text by putting flex on the container and flex-direction:column

Overall, nice work.

remove the underlines on mobile and left-align the menu text

File not found error on this image: part3.html:60 GET https://opal.ils.unc.edu/~jelong21/project2/img/messner1.jpg 404 (Not Found)

I'm guessing the photo wasn't getting pushed with the others for some reason (and giving you the benefit of the doubt that you included it in your img folder; the path looks correct)

The HTML5 audio broken for several reasons: you can't use the same name for a class and ID ('audio'), and you can't use an already reserved tag name (<audio> and 'audio'). Also, it looks like the path to the audio file is wrong, or the file is missing.

The mobile problems with the title and Sacks photo (alignment, position) are showing up in my dev tools -- but not when I simply shrink the screen -- and I can fix them in dev tools. Make sure you're using dev tools. The best way to fix this particular problem is to use a background image for the photo (instead of img in the HTML) and put Flex and flex-direction: column on the items inside the div.

Overall, this looks great. Nice work.

Overall, this looks nice and works well.

You ran into some spacing and padding trouble with the mobile nav. Just use a CSS dropdown menu or Bootstrap hamburger menu to clear up space. And remember, the Outside logo would link to the magazine homepage, not the start of this story.

Users will expect these thumbnails to be links to something.

Alignment is the A in CRAP. Vertically align the title by using Flex on the div. Even better, make the photo full-screen and put the title in the nice clean space in the top left of the mountain.

Recenter this photo on desktop; right now, it looks like a blank screen until you scroll down and see the mountain.

Take advantage of the horizontal space on desktop. Float the images and wrap the text around them.

You need a sticky nav and/or back-to-top button.

Remember visual hierarchy. The title should look like a title. Right now, the subtitle (neurologist's notebook) and title are given equal prominence.

The hamburger menu is broken on this mobile version of this page.

Break up long stretches of text with A/V content.

I like how you used the Roman numerals to reflect the imagery in the clock.

Remember visual hierarchy. The title should look like a title. Right now, the subtitle (neurologist's notebook) is given equal prominence.

Break up long sections of text with A/V content. Remember, people don't read websites, they scan them.

Remember visual hierarchy. The title should look like a title. Right now, the subtitle (neurologist's notebook) is given equal prominence.

Instead of asking users to view them comparatively, just show them that way. Put each set of images in a scrollable div side by side, so users can scroll each one and see the difference in perceived motion. You could even animate the frames with CSS.

Great job using Flex to build this photo gallery, but ask yourself: does the gallery really add value to the story? Does it really convey the themes in the story or illustrate something discussed in it?

I really like the vertically alignment and call-to-action, but the button leads to an ancillary feature in the article, not the article itself. Users would click it without any context or background about the story.

Why did you include the Subscribe button and no other items for the New Yorker's main menu? If you're going to include one, then you need to include others, e.g., News, Books & Culture, etc. Otherwise, just stick with the menu items for this particular story.

Landon, This visual design looks great, per se, but it just doesn't work within the context of the story. Remember, you were supposed to design and build this site as if you were the designer and developer for the New Yorker. Ask yourself: if you submitted this piece with motion-blurred photos of yourself as the lynchpin of the story, would your editor approve? Probably not. It's not that the photos don't look good -- they do -- but they just don't convey the themes of the article effectively or fit the New Yorker brand.

The NY logo would link to the magazine's homepage, not the start of this story.

Overall, this looks great.

I'm not sure this video really fits the story. Yes, it involves slow-mo, but they're discussing the physics of the bat breaking, not the perception of time.

Take advantage of the horizontal space on desktop. Float the images and wrap the text.

On desktop, I would move the first photo up and float it left or right so the text wraps and fills this awkward negative space.

Make this link to the URL, instead of listing it again below

Overall, this is pretty good. I like the dark theme, but remember, users respond first to images in websites. Consider making the photo full-screen (or mostly full-screen) and putting the title and intro on top. Right now, the aesthetic is rather spartan and dated. And instead of blue text, pull one of the colors from the photo.

Put the video thumbnail to the left with text to the right, so it's consistent with the other cards on this page.

Break up long stretches of text with A/V content. Remember, people don't read websites, they scan them.

Float the photo left so the text wraps around it and takes up the negative space.

Italicize this to set it apart from the rest of the text below.

Overall, this is really strong. I like the dark color scheme, but remember, people respond to images first in websites. Consider using the photo as a full-screen background (or mostly full-screen) with the title and intro on top. It's a bit spartan and bleak right now. And instead of blue text, pull one of the colors from the photo.

Keep experimenting with fonts. I think I see what you were going for with the handwritten font, but it's not quite right for the piece.

The About link is missing on mobile because you're using overflow:hidden on the navbar. If you need to free up space on mobile, use a dropdown or hamburger menu.

This looks good. Consider using a different color for the title so it really pops (maybe pull the light orange from the lights)

Why do you have two sets of nav arrows?

The entire area should be a link to the interior page, not just the chapter title. Users might think the links are broken.

The videos bleed past the viewport on mobile. Use max-width and height:auto to make the videos responsive.

These links are broken because Chapter is capitalized in Chapter1.html, etc.

Remove the Next button on this page if it's the last one.

Just make the UNC text above link to this URL

Break up long stretches of text with A/V content. Remember, people don't read websites, they scan them.

Change the color of the active page menu item so users know where they are.

These look like links to the interior pages; and they should be. Users will think the links are broken.

You should cut the About section on mobile. Use a dropdown menu or hamburger menu to free up space in the navbar.

Add more padding on mobile

Break up long stretches of text with photos, etc. Remember, people don't read websites, they scan them.

Watch your alignment and visual hierarchy. The byline should be aligned with the pull quote or story title, and smaller, so it looks like a byline.

Overall, really great stuff.

The accordion is really cool, but it's not as effective as it should be because it repeats essentially the same image over and over (mountains). The folds in the accordion should act like teasers, enticing users to open them and see the expanded content.

A chart would be nice here.

Use less padding on mobile

Nice job with the google map!

The water is mostly cut off at the bottom of the background image, making for a confusing first impression. Keep trying other title fonts, sizes, colors, etc. and consider moving it to the top left of the background image, so it really looks like a title (think 'movie poster').

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

Keep working on the hamburger menu on mobile. It's crammed all the way over to the left on my iPhone 8.

Reduce the size of the LA Times logo on desktop by using max-width:50%, height:auto, and putting it in a div and using Flex on the div to center it. And remember, the Times logo would link to the homepage of the newspaper, not the start of this story.

This needs to be a lot larger, with more contrast, so it looks like a title.

Need more space between the buttons

Put the audio player in the same div as the text and use float:left, so the text wraps around it.

A sticky nav would be nice, so users can use the burger menu without scrolling back up to get to specific sections of the story.

You need to optimize your video files before using them as HTML5 video. These are huge and slow to load; the site is almost unusable on mobile. We'll talk about how to compress them, etc.

The Outside logo needs more contrast and visual hierarchy.

watch your padding

I really like the Tibetan prayer flags idea, but it's a tricky motif for web design. Many people unfortunately won't realize what the side boxes are, at least at first, and this will make for a confusing UX. Plus, I presume you don't know the Tibetan language; it could be borderline disrespectful to use religious iconography in this piece, depending on what phrases are displayed in the flags. I think it's fine, but still...

You don't need the instructions

What exactly are we listening to? Give it a proper title, e.g, "The Sound of an Avalanche."

Use the section titles (Part 1, Part 2, etc) for the bottom nav, not previous and next. Users want to know where they are in the story.

These are operating systems, not kinds of phones. Also, this isn't the strongest dataset for this story. Market share for operating systems isn't really adding any interest or value to the piece. A better choice, for example, would be a line chart showing the rise in smartphone ownership over the last 25 years.

And watch your typos.

Bryant, You plagiarized this from the Science Node article. I won't turn you in for an honor code violation, since it's only two sentences, but I will deduct points.

Instead of 'click to learn more,' just make the first use of the word Simon link to the wiki page

Film titles go in quotes (AP style)

Why the caps?

Move this to the left so the text isn't butting up against the right side of the screen.

This isn't really a story tile, more like a chart title. Perhaps just, 'The Lucrative World of Harry Potter.'

This looks nice. Smart choice, going with the black background.

Film titles go in quotes (AP style)

Interesting fact. Nice catch

This sentence is confusing.

according to what audience ratings? Rotten tomatoes? And what does the percentage mean? (I presume it's percent fresh, if it's RT). Don't force visitors to click on Sources to find out. You need to specify your data source in the chart legend, otherwise it's vague and confusing.

can

1982! And given that Steven Spielberg created Jaws, ET and several of the other highest-grossing films of the 1970s and 1980s, you should mention him...

Film titles go in quotes (AP style)

Ahem...what about The Wizard of Oz and Gone with The Wind?? They came out in 1939, not the 1940s.

No, the first talkie was in 1927!

A more effective way to present this timeline would be to use the images as the click points, instead of plain dots, and reveal the text on click.

This is a vague and confusing section title.

You need to customize the HTML button to fit your design.

Whoah there! Some studies showed that overall alcohol sales actually increased during the recession. True, sales of premium brands decreased, but that's an important distinction. And don't use etc. in a phrase like this. You need to be specific when discussing data.

The chart is okay, but you need to put 2016 before 2017 chronologically in the X axis, and mention your data source. I can't tell where this data comes from, just by looking at your Sources. Most importantly, you must ask yourself if this chart really tells the story -- the power of a brand. Perhaps a pie chart would do a better job of that. Users would quickly see that the top 10 brands make the lion's share of money in the fashion industry. Or you could make a line chart showing that the brands being promoted by influencers have increased sales compared to brands without influencers.

The visual design is great, but I would move your logo to the top left and put the sources link in the top right corner, because they are essentially menu items, and that would make it more consistent with your portfolio.

This looks great, but some of the interactive feature feel arbitrary because they're lacking in crucial details. Users, for example, will expect the information in the second modal to pertain somehow to Danielle's outfit in that photo, but it simply mentions the economic impact of influencers. In the first modal, you should explain that GANNI designed that skirt (which I presume they did?). The purse modal should say something, "Shown here is one of Lee's 2018 purse designs."

delete

$51.4 billion

10 (AP style)

$461 billion in one month?!

I would try to make this all viewable in a single screen. Just put the upper half of the content (the title, illustration and intro) in the empty space above the albums. Then toggle it's display in the same function that shows the modals.

Overall, this is fantastic. The seating chart, however, is a bit confusing/misleading. I only deducted two points because it was my idea to create the seating chart in the first place, and you may have misunderstood the concept. If each dot represents 10,000 people, then you're showing millions of fans in a single area -- an absurd idea, of course. What you mean to show is the *average concert attendance on each tour. So for example, in 2009, Swift had 5,000 fans per show, and now it's up to 50,000. Just change the value of each dot to match this dataset and explain accordingly in the text. And you might want to mention and/or show the rise in ticket prices. That's a big factor in this story.

Overall, this is great. It's an interesting topic with a fun interactive feature and eye-opening chart. I would keep working on the visual design. It's not bad, but it is a bit cluttered at the top, with the background image and text. Try other title fonts; I think there are other fonts that would work better with this story and design. You don't need the animation on your portfolio logo. It doesn't add any value to the piece.

N-Gram doesn't show Google search frequency. It shows the frequency of a word's appearance in Google Books, i.e. the digitized repository of nearly every book published since the 1800s. This is a big mistake, because it misleads visitors. Make sure you change this before you put it in your portfolio.

Overall, this is great. It's an interesting topic, with a fun, appropriate interactive feature.

Nice animation on the dancers. It fits the story.

Put film titles in quotes (AP style)

Move your logo to the top left corner, put the story title in the top center, and give it a lot more contrast (bolder, different font from the body text, etc.)

multimillion-dollar film industries

This chart raises some interesting questions: why does Dare County spend nearly twice the amount than Mecklenburg, the home of our largest and arguably wealthiest city, Charlotte? You should add information about that in the tooltips, or even better, in the text outside the chart.

Left-align the text

This legend should read, 'dollars per pupil'

Wealthy

Instead of 'click here' within a sentence, just use a single word, Sources, as your link. Remember CSS.

Again, add an image in this section to be consistent and create visual interest.

Add an image inside this section to break up the text and establish consistency with the other accordion sections.

Great job on the accordion.

I love this photo, but it doesn't quite fit this particular story (Speed), and users unfamiliar with Oliver Sacks will not realize it's a photo of him. If you want to keep this as your main image, at least add a caption.

Wow, I wasn't expecting you to build the New Yorker's website, just one for your story. Nice job matching the New Yorker's style.

Use align-items: center to vertically center the text. And the Outside logo should link to the magazine.

This is the default HTML link color and style. Need to change it. Better yet, use the social media icons, get rid of 'Social Media' title, and align the icons horizontally with Flex.

Jill, This is a great start, but it's unfinished -- the interior pages are empty, save for pasted text, and the code needs work. Remember: leave yourself time to debug!

The menus don't work on the interior pages because the articles are sliding on top of them, blocking access to the menu links. Change the z-index to fix that.

The interior pages are clearly unfinished. You need more than pasted text, without paragraph breaks. You only have one image (video) and it's misaligned.

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

Why are some paragraphs in bold, but others are not? Are they supposed to be pull quotes? If so, you need to create a lot more contrast to make them stand out and look like pull quotes. Alternating bold and regular font makes the code look broken.

Keep experimenting with title fonts. This doesn't quite work for the story.

This article isn't fiction.

Overall, this looks really good on desktop. Great job matching the style of the New Yorker.

This video is about amphetamines, a/k/a 'speed,' not the perception of time as discussed in Sacks' article.

This ticker scroll is broken on mobile; it stops after the first few words.

Create even more contrast on your pull quotes, so they really look like pull quotes.

You really need captions on your photos to explain what they are and why they're on the page.

The LA Times logo should link to the newspaper.

A single-page app is fine, but you still need a menu so users can navigate through the piece without getting buried in a long, long scroll.

Great job on the CSS animation (Star Wars, nice). But I'm not sure the color scheme on this landing page quite fits the story, and while 'click before it's too late' is funny, you still need to allow users to enter the site if they don't click in 60 seconds. And add overflow:hidden to the intro section so there isn't a repeated series of empty gradients when you scroll down during the animation.

These captions need more contrast; they're too hard to read. And place the photos vertically above each other full width, on mobile. They're distorted right now.

I would consider removing the clip art of the boat. You don't need it, and it doesn't really fit with the style of the rest of your site.

Eva, Overall, this looks good, and most of the code works. I'm not sure that showing the intro text on hover is the best choice for the desktop homepage. Users will likely miss it because they won't know that the text is there in the first place (hence, they won't hover over it). And try to find a better GIF. This looks like a beach, not a river. Make sure your content is relevant to the story.

The blur on the menu items makes them hard to read. Remember: usability is the most important aspect of web design. And the LA Times logo should link to the newspaper.

Why do you have the external link icon in the top right corner? It doesn't go anywhere.

Keep experimenting with the title font. This feels a bit too whimsical and 'fun' for this story.

You need Previous and Next Chapter buttons at the bottom of the page so users can go both ways.

You can't use .mov in CSS background-image, only GIFs. Bummer, because I can't tell what your homepage is supposed to look like (gonna guess: awesome). Based on what I can see, you need to add a subtle pop of color (maybe on the chapter titles) to break up the monotony of the black-and-white scheme and create a sense of cohesive narrative throughout the piece. But maybe the video was color...?

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

Didn't you already use this photo in Chapter 1?

Reduce the file size for this photo. It took a long time to load on desktop, and completely froze my phone.

Add captions to your photos

Float the image so the text wraps around it and fills the negative space. And it's super easy to embed the actual Google Map. It's just an iframe, like a YT video.

If you're going to stagger the alignment between the menu and the text below, then create more contrast/clearer proximity with a border or color on the menu.

Bummer. I can see that you meant this to be a background video, but it doesn't work, so I can't tell what the homepage really looks like. You can't use .mov in background-image. If you want to use video in CSS background image, you must make a GIF and use that (it's a lot smaller file, too).