Lucifer Fanpage

Project Feedback
#1

Hello guys!

After doing a FEND course with Udacity and learning webpack, I wanted to apply some of the things I learned into a project. My time frame was one week, and here is the result of 1 week into a fan page based on the show Lucifer on Netflix

https://codepen.io/erickkg/full/mdVjvPV

After reading a book “Dont Make me Think”, I also tried applying some topics to make the site somewhat short and to the point of the content. As well a color contrast, spacing, and font sizes.
I was wondering if there are areas on the page that can be improved, or suggestions on making it better?

I also uploaded the page to a site I own at https://lucifer.elitabay.com

I still feel somewhat new to uploading content to a hosting site and was wondering what tips or things to keep in mind I should know regarding web hosting.? You dont have to check my personal site out, its just the same as the code pen. All feedback and suggestions are welcome, thanks for your time !

#2

A few things I noticed that could be improved:

  • You should have an <h1> heading near the top of the page (which should probably be the red “Lucifer”) and then don’t skip heading levels as you work your way down, the <h2>s are fine but all of the <h4>s should be <h3>s. Also, the ‘About’, ‘Credits’, and ‘Developer’ headings should be <h2>s. Or create a new <h2> heading to put all three of them under as <h3>s.
  • Any content on the page must be accessible without having to use a mouse. Currently the only way to see the content under each cast member is to mouseover. Don’t forget about users who can’t/don’t use a mouse.
  • The social media links at the bottom of the page need link text so that screen readers know how to announce the link. You can visually hide the link text if you want but it should there inside the <a> tag.
  • As I manually increase the text size the ‘Stream on Netflix’ content starts to break out of its box. Use ‘em’ units for setting height/width on elements with text content so that they can grow as the text size grows.
  • Also with increased text sizes the cast boxes get slightly out of alignment with regards to the name heading and image. It’s not terrible, just doesn’t look as good as with the default text size.
2 Likes
#3

Thanks mate, i’ll be applying some changes to it

#4

It looks really nice. I think you captured the mood of the show well. You have a picture of Amenadiel in Maze’s spot.
I am still a beginner so I can’t really advise on the technical aspects, but I am a huge fan of the show so I had to go look. Good job.

#5

Thank you! I tried using colors to get that same mood lol, nice to see another fan of the show :smiley:

#6

Hey Erick,

great work!

My ideas:

  • when I decrease my screen width, the top image loses some of the folks on the image. On purpose?

Keep us posted.

#7

I made some updates to the codepen

There currently is a bug when resizing the window and not refreshing. So if someone visits in desktop mode then shrinks the width to mobile, they need to refresh the window. Otherwise the cast cards get weird.
Il try to fix it tomorrow (later today), along with a few other things I made note of.

Can you tell me more about your 4th point? I tried zooming in/out, resizing window but I couldnt get the ‘Stream to Netflix’ to go outside of its box. Testing on Firefox, maybe thats why?

#8

@cmfred I fixed the images, hah thank you!

And yes @miku86, the people not showing based on width is on purpose, I played around with diffrent images and styles and that was the one I enjoyed the most.

#9

Fixed issues with mobile and desktop! Any other feedback would be welcome, thanks again for you time

#10

Great work!

Overall, you use many best practices:

  • good naming
  • good use of spacing
  • using a lot of css classes (leading to lower complexity due lower css specificity)

Some additional ideas:

  • the cast images (.cast-img-X) have a lot of duplicate code. You could separate this class into two, one for the stuff these images have in common and one specific for the background-image
#11

You’re suggestion is genius! Thanks mate

1 Like