My tribute page - Westworld (sort of). Feedback appreciated!

Hi campers,

I’ve just finished my tribute page. I think I spent about 10 hours in development, including research. I’ve added a reflection of the process on the page itself!

Big thanks in advance for any feedback you guys can provide. I think I’ve reached a point where I can’t improve the page further without it, but I know there are improvements to be made.

Hello fellow camper @Zaena,

I’d like to start by saying, when I saw the title of this post I jumped in right away, extremely eager to read the content! My hopes were high.
But as soon as I started reading the content, I felt a little disappointed!
Me feeling that way has NOTHING to do with your work, so be relaxed :wink:

It is because I love that series (it’s one of my best ever watched actually). In fact, it was the first thing that came to my mind when I read the assignment. But I did not do it! So, when I saw you title, I got too excited too fast, I was hoping to find a review maybe or some analysis of the events or something of that sort. But it was not what I found Haha.
Although, I do like what you did; A brief resumé of the experience you had while working on the challenge :thumbsup:

Anyway … Now, let’s get back to code!

I will only focus on one side of you project, which I find very important.

The images:

The images in the slide clearly are not responsive. I thought “He must have fixed their height in pixels”. Looking at your code, I confirmed it.
Before explaining the logic, let’s recap:
Responsive = The dimensions of something change according the dimensions of the window.
Not Responsive = Fixed = The dimensions of something stay the same, no matter what.

.carousel-inner > .item > img{
  width: 100%;  /* <<--- this is responsive */
  height: 480px;  /* <<--- this is fixed = not responsive */
}

width: 100% = "Dear <img/> tag, use all the space available in the screen width! If the screen is 1024px wide, take all that. If it get smaller, say 700px, then you should take 700px.

height: 480px = "Hey you, stubborn <img/> tag, you are so stubborn that you never change your mind! You always think that 480px is the right height, no matter what! Whether it was a PC monitor, a tablet or a small mobile screen you will always keep that height!

Ok, what are the solutions?

First: Revise the Make Images Mobile Responsive lesson. And then, Read-Search-Ask about it, starting from the Bootstrap docs.
Second: In example like these, I think it is a good practice to make the width and the height both either relative (percentage) or fixed. But not both.

FYI:
There is something called media queries in CSS.
Basically, it allows you to set CSS values according to what range is the window.
For example, if the window’s width is less than 900px but greater 700px, then the image width should be XXXpx
But if the window’s width is less than 700px, the image width should be set to YYYpx.

Final notes

Centering things with CSS caused me some headache as well! I still can’t see how the logic behind it works exactly.
I hope those tips I learned and just shared with you will help you boost fast :slight_smile:

And, if you don’t mind taking few minutes to criticize my work, I’d be grateful :slight_smile:

Cheers.

Hey there @IOAyman,

Thanks so much for your feedback! This is more than I could have hoped for. :smiley: I’m sorry to disappoint you regarding the Westworld content haha, I absolutely did not do the series justice. I’m a big fan too!

Your post is super helpful. It definitely clears up some stuff that I wasn’t too sure about. Some things worked, but I knew it wasn’t because I coded it properly so I’m happy you pointed me in the right direction. I’m currently at work, but when I get home I’ll try to implement your feedback.

I’ll be sure to check out your page as well. I don’t know much about David Knuth yet so I’m looking forward to learning more about him. :slight_smile:

Thanks again for taking the time to make such a great post. This community is great! Let’s talk soon when I’ve had a chance to look at your work.

Max

1 Like

It’s been a pleasure :smiley: We’ll talk soon!