Feedback need for my first tribute page

Code Feedback
1

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

Many thanks :smile:

2

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.

3

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
4

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ā€¦

5

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!

6

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
7

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:

8

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.

9

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 Index of /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: