Need Help! Tribute Page for Lee Kuan Yew

Need Help! Tribute Page for Lee Kuan Yew
0.0 0

#1

Hey FreeCodeCampers!

Need your help and please give me your valuable inputs. Ran into a roadblock on how to improve and fix some issues I’ve discovered.

Tribute Page for Lee Kuan Yew (My country’s iron willed Minister Mentor)

The Page is Here -> http://codepen.io/vernhow/pen/RRjRLE

* Managed to complete the crux of content and bring it out here for review.
_* My padding and grey well doesn’t work properly like Quincy’s page borders and neat structure _
* want to arrange the columns for Videos and Resources to be in the same well or column
* Information is in a mess, how do I make this page present properly?

National Day is coming up next Tuesday so I really am excited and nervous to get this tribute page right.

Thanks in advance all!


#2

Hi. This is a good tribute page! I like how you are dedicated to building this page. Let me offer these inputs:

  • You don’t have to put gray borders around your page like the example did. With a lot of information in your page, the borders are already good as they are.
  • There’s a missing closing </div> at the end of your code.
  • Give your columns these values:
  • The one around Milestones with col-sm-8.
  • The one around Videos with col-sm-4.
  • The one around Resources with col-sm-4.
  • Change the class of the <div> around the quote from row to col-xs-12

That should result in the milestone <div> occupying two-thirds of the screen, the videos and resources <div>s neatly stacked on the remaining space to the right, then the quote at the bottom of the page, with no horizontal scroll bar.



Hope that helps! :thumbsup:


#3

Hi there fellow singaporean! National day is on tuesday, looks like you are right on time.

On top of what kevcomedia mentioned, you should consider layouts for smaller devices as well. You can scale the size of the window down and do some testing. You will find that because of the 3 column layout, it is almost unreadable on a mobile phone/tablet.

Just some suggestions on the layout vs device size:

  • Mobile - use a one column layout (using col-xs-*)
  • tablet - two columns (col-sm-*)
  • desktop - 3 columns (col-md-*)

Refer to this link for more info: https://getbootstrap.com/examples/grid/

Also that LKY quote is one of my favorites too. Maybe consider putting it right under the topmost picture?

Other than, good job.


#4

Big Thanks to @kevcomedia for the awesome recommendations. I read the grid bootstrap, interesting read! thanks to @zigzactly. Here’s new Pen refresh.

http://codepen.io/vernhow/pen/RRjRLE

  • Removed ="well" from the top of my <div> class so that the wordings represent better

  • Headline made font-size:420% - to highlight tributee, the only way to adjust font size I know

  • Adjusted Milestone as col-sm-8, Videos as col-sm-4, Resources as col-sm-4
    Removed <p class="text-center"> from bottom quote, name of tributee so text doesn’t “float” with weird wrapping during tablet or phone reads. Figured this looks like better typography reads.

  • Added references to Wikipedia, so I don’t take the credits.

  • Added another </div>, curious, if I hadn’t put this </div> in what could happen? I didn’t really see a big difference in page preview… maybe I missed something?

Questions:

  1. Is there any other way to “add spaces” between the bullet points, than just adding <p></p> in between all my bullets?

  2. How do I add a quote that is encapsulated at the bottom of the image?

  3. My image looks kinda of small, how do I populate the entire screen or make it stretch to fill the page in combination to using "img-responsive" class declaration?

  4. Font Family changed to “Georgia”. How do we know which font works, is there a list to what codepen makes available? (Assuming that we can’t use CSS and only HTML so calling a font-type doesn’t work here)

  5. Anyway to border my entire page nicely or is it better without borders?

Thanks in advance! anyone!

Additional Question: How do I do this kind of “intelligent grid option” with this example – http://leekuanyew.straitstimes.com/tribute-wall


#5

Hello again! I’ll try to answer some of your questions.

  1. You can add something like li {margin-bottom: 10px;} in your CSS to add some space between list items (then remove the empty <p></p>s between).
  2. I don’t know what you mean by this :confused:.
  3. You can add, say, width: 90%; to make it larger, but you might start seeing loss of image quality.
  4. Available fonts are what’s available in your local machine. If for some reason this page is viewed in a computer with no Georgia font, the font will be displayed in the browser’s default font (like say, Times New Roman). You can specify alternative fonts like font-family: Georgia, <fallback-font1>, <fallback-font2>, ...;. Better yet, import a font from Google Fonts. There are a lot of fonts to choose from, and you can be sure that your page has the same font everywhere.
  5. No page borders, but that’s just my opinion :wink:

About the intelligent grids, you can try the following plugins (I haven’t tried any of these, I only took the links from Bootstrap’s docs):

Hope that helps :smiley:


#6

Thanks again @kevcomedia!

Made the changes, you’re a genius thatli {margin-bottom: 10px;} works. I’ve removed all the <p></p> code looks neater right now.

Also, I see the reason why you recommended 90% as opposed to 95% or 100%, because during the screen shrink to a phone, the image appears more aligned to the left-most and right-most columns borders on the same line…

Took me awhile to figure out how the stylesheet API calls from Google Fonts works but I’m glad I did. I didn’t remember declare the class i made “stylesheet” in the <div> portion off the container-fluid . I’m assuming this is how you’d do it?

Yes, no borders. I decided not to do it, I just noticed with wells, it could enhance the radius of the image corners to be slightly more rounded :wink:

Hey, good call on that grid plugin, first time I’ve seen this feature made available in bootstrap. This is used more and more frequently probably because it encourages a certain “curiousity” and faster web loading time. Your thoughts?

If you were local, we could meet up. wanna buy you and Ian a coffee!


#7

Me choosing 90% is quite arbitrary, but I’m glad it worked out for you :slight_smile:

You could have applied the font directly to body instead of creating a .stylesheet class, but yours is good as well.

It does feel faster because items are only loaded when needed. I might be wrong though.

I’d like that coffee :coffee: , but I’m not in Singapore.


#8

Looking good. Personally i would go for a little more margin, but i think its still good.:+1:

Free coffee is always welcome.


#9

We’re still in Asia and practically neighbors. Anytime at all.


#10

Sure, which margin, the margins between the bullets? what did you think about the typography, would that be “violating the project rules”? I used CSS…


#11

Well in general, margins/padding between the word “Milestones” and the picture above it for example. It just feels a little congested. Margins inbetween bullets looks fine to me. BUt like i said earlier, its more of a personal preference.

Not sure what you mean by the typography violating project rules though. Thats a legit way to load up fonts.


#12

Great tribute page!!! :tada: