Feedback need for my first tribute page

I created tribute page for Robin Williams, really need your review

Many thanks :smile:

wow I really like your design. Its different. :slight_smile:
Suggestion :
You can add Wikipedia link for Robin Williams
You can add bullets and write in short about him like maybe timeline.

Hello @shilohchis,

HTML

  1.    Target blank vulnerability

     Line 50 , column 50

    <a id="tribute-link" 
    href="https://www.biography.com/people/robin-williams-9532797" target="_blank">Robin Williams<a>

    MDN documentation:

    Note: When using target, consider adding rel="noopener noreferrer" to avoid exploitation of the window.opener API.

    https://mathiasbynens.github.io/rel-noopener/

    TL;DR If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.

    targetblank—the-most-underestimated-vulnerability-ever

    People using target='_blank' links usually have no idea about this curious fact:
    The page we're linking to gains partial access to the linking page via the window.opener object.

    The newly opened tab can, say, change the window.opener.location to some phishing page.
    Or execute some JavaScript on the opener-page on your behalf... Users trust the page that is already opened, they won't get suspicious.

    How to fix, Add this to your outgoing links.
    rel="noopener"

    Update: FF does not support "noopener" so add this:
    rel="noopener noreferrer"

    Remember, that every time you open a new window via window.open();
    you’re also “vulnerable” to this, so always reset the “opener” property

    var newWnd = window.open(); newWnd.opener = null;
  2. error

     Line 2, column 6:

      Bad value "https://fonts.googleapis.com/css?family=Gudea|KoHo" for attribute "href" on element "link": Illegal character in query: "|" is not allowed.

     <link href="https://fonts.googleapis.com/css?family=Gudea|KoHo" rel="stylesheet">
    

    From Stack Overflow:

    The offending character here is “|” U+007C VERTICAL LINE, used by Google as a separator between font names; that’s a poor choice by them, since “|” is a reserved character, both by the “URL Living Standard” (which is what the HTML5 CR cites) and by the Internet-standard STD 66 (RFC 3986).

CSS

  1. error

     Line 66, column 11:

      Parse Error  ("<") .   Maybe you can use a "Child combinator"

    div < img { 
    align-self: center;
    }

    MDN documentation:

    The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first.

cheers and happy codding :slight_smile:

Notes:

Tools used:
w3c markdown checker web service

Video:

1 Like

Thanks for your feedback Prasad :grinning::grinning:
I’ll rebuild it again after finish all of the HTML and CSS Page with all of the feedback…

I like that you started mobile view first. When I made my first page, I tried to size it down from laptop size and I failed :sweat_smile:

Here’s a great post I read when I was making my second page: Tribute page - All feedback is greatly appreciated!
He did a really great job in explaining how it should all be set up and WHY. It’ll help keep your code clean, which is what I try to strive for with each project. I can link my tribute page if you wanna see it in action.

In small scale/mobile-view, the title of the page, “Robin Williams”, is cut off and only showing some of “Williams.”

I agree that the layout is different and I love how the background is of Robin. It is a little messy right now though in laptop view (1920px?), so some responsiveness is gunna be needed. To help, one thing I like is when you minimize your screen on codepen and drag the vertical walls of the screen left and right, it’ll tell you the pixels’ width that the screen is being shown in, thus giving you break points you can use for your @media queries!

Keep crackin at it!

wow it’s new information for me… thanks for let me know with this information… I’ll fix the page when I finish the Web Design Projects… :grinning::grinning:

1 Like

Hi pleeseno… actually I don’t realize I made the mobile view first… same like you I think I made from my laptop size and resize it… thanks for the information I know we need to use properly the html tag, not like before we just use div for everything…
Yeah I still confuse with the css why the title is being cut and the view between mozilla and firefox also different…
Many thanks for your feedback :grinning::grinning:

Does this mean I need to be worried about viewing project files on this site? Most beginners won’t know about the rel=“noopener noreferrer”> window opener requirement.

Hello @helen1,

If you are worried you can:

  • Just don’t click the <a> element ( I think this is enough for this vulnerability)

  • Disable JavaScript in your browser when viewing a project

  • Read the source code and not open the web page (only view the repo in github or gitlab,for example)

  • Use a virtual machine to view the projects

  • Use a different pc-laptop to view the projects (a pc-laptop that doesn’t log in to anything important)

  • Use the RMS approach:

I generally do not connect to web sites from my own machine, aside from a few sites I have some special relationship with. I usually fetch web pages from other sites by sending mail to a program (see https://git.savannah.gnu.org/git/womb/hacks.git) that fetches them, much like wget, and then mails them back to me. Then I look at them using a web browser, unless it is easy to see the text in the HTML page directly. I usually try lynx first, then a graphical browser if the page needs it (using konqueror, which won’t fetch from other sites in such a situation).

And not forget that at least for Google:

… this class of attacks is inherent to the current design of web browsers

Cheers and happy coding :slightly_smiling_face: