Feedback Tribute Page - Noam Chomsky

Feedback Tribute Page - Noam Chomsky
0.0 0

#1

This project is my first attempt at putting a web page together. You’ll notice that I tried to keep things as simple as possible, only a handful of HTML elements to practice my Bootstrap on, I also added some jQuery in an attempt of making it look a bit more alive, a simple sequential fade-in effect applied to all elements. I would like to ask for your honest opinion on the project itself, and most importantly, on the way I’m using Bootstrap. I have to say I felt a bit confused about how to properly work with the Grid system, where to and not to use containers, and the way of properly centering elements(I tried a little bit of everything here).

Thanks in advance!

Tribute Page to Noam Chomsky


#2

Props for the clean design with lots of white space. I think it goes well with the b/w photo. The site is also responsive.

The issue I can see is the quote beside the picture. For one, it has that horizontal scrollbar. 2nd, at narrower display width, it gets cutoff and sometimes even disappears.

Try to find a way to fix that as your next challenge.

Other comments:
If you can, avoid using !important in your CSS. As a CSS file grows in complexity in a project, and the more !important tags you use, the more problems you’ll also encounter. Look for a solution that doesn’t need these overrides.

BS is predicated on 12 columns. So if you want to center something, you can add some empty col containers on either side… ex: md-3, md-6, md-3 or md-2, md-8, md-2 and then at various device widths, you can hide some of these columns… say get rid of the left and right columns on xs widths… by using hidden-xs classes.


#3

I agree with @owel that horizontal scrollbar on the quote is bad.
As a rule, try to avoid horizontal scrolling anywhere on a webpage.
The mousewheel is for vertical scrolling!
I notice when I resize the browser the quote becomes almost completely hidden :open_mouth:
I’m not sure a click saying “learn more” is accessible. Just “learn more about Chomsky” would make it accessible.
I like the clean design. That is great. The fade in effect looks good. It’s not too long to annoy the user.
The use of bootstrap seems fine to me. I notice you have overridden a couple of classes. Ok for a small project like this one.


#4

First I would like to thank both of you for taking the time to look into my humble first project. Having said that, I would like to make it clear that I did my best to implement all of your tips, but there still might be(most likely) some silly mistakes in my code, or things that could have been done better. Please, don’t hold back if you spot something else that can be improved, thank you all.

Noam Chomsky - Tribute Page V2

P.S: I’m having trouble keeping my layout proportions and alignment in smaller devices, some tips on the topic would be welcome.

This is how it’s supposed to look: Tribute page snapshot


#5

@gjdias I really like your project, well done!

If you don’t mind, I’ll chip in and try to help too.

The first thing I noticed is that it is not centered properly. You may not have noticed, but it is off-center towards the right. Anyone who has spent time centering with CSS (and by the time you are done with the freeCodeCamp front-end section you will have) should quickly see that it is off-center. This is true for all devices including desktop.

The problem has to do with the alignment of the image. If you look at the image inside of its container, you will see the blank space because you have it floated on the right:

If you want to fix that, you can, but let’s get it responsive first.

First, the quote is an easy fix. You can use margins to center the element:

#text01 {
    margin: 0 auto;
}

Since you only want it like this once the screen breaks down, you will want to apply it with a media query. Something like this would work:

@media screen and (max-width: 720px) { /* make sure you use the correct value here */
  #text01 {
    margin: 0 auto;
  }
}

For the image, you can also use the margin auto to center it. You will first want to make it a block element:

element {
    display: block;
    margin: 0 auto;
}

For the second quote, remove the margin you have, and use margin auto. That will give you a perfect center every time:

#text02 {
    /* margin: 5% auto 5% 21.2%; */
    margin: 5% auto;
}

And finally add margin: 0 auto to your final container.

And there you have it! Easily fixed by using auto margins. I suggest you work on centering better on desktop in regard to the image. It is definitely possible, but might be tricky. If I were to do it, I might use a combination of display inline-block and text-align center, or I would use flexbox. Anyway, hope the margin thing helped!


#6

Not OP but thank you for taking the time to come up with such an elaborate answer.


#7

Wow, your effort and time spent writing this answer are deeply appreciated!

I considered all of your suggestions carefully, what eventually lead me to the re-factoring of my grid set up, now, instead of empty columns, I used offsets to center my content so my HTML is a bit more clean. Also, all central columns now take up 4 units of width (col-sm-4), which made it easier to preserve the overall alignment on the page. The image and first quote were grouped inside a div, which was used to center the content once the page breaks (though a media query, as advised).

There’s still a problem though, when on my desktop the page seems perfectly aligned, but on my laptop I get this small difference:

index

I don’t understand why this is happening, all columns have exactly the same width and the same offset, I suspected this could be related to the padding of the elements inside the columns or of the columns themselves, I tried tweaking it for a while without success.

Tribute Page - Noam Chomsky V3


#8

Just a sidenote, you can have multiple classes in your div

<div class="col-sm-4 col-md-6 ...etc..."> 

This gives you better control of how wide it should appear on various screen sizes.


#9

Thanks for mentioning this, I have just finished the final details and it helped a lot. I tested the page on my desktop, laptop and iphone, It seems to be scaling decently now. Once again, thanks to you and all the others who came by offering a helping hand.