Just finished my first challenge – a tribute page

Just finished my first challenge – a tribute page
0

#1

I am new to the Free Code Camp and have just finished my first challenge – a tribute page about my favourite photographer S. M. Prokudin-Gorskii, one of the pioneers of colour photography in early XX century:

Be sure to check the links! If you haven’t seen those pictures before they will blow your mind :slight_smile:

Feedback welcome.


#2

Hi @alex-virt,

HTML inspector(codepen)

  • This code is not correct(nobr):
<h1>Sergei <nobr>Prokudin-Gorskii</nobr></h1>

MDN documentation:

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.


Cheers and happy coding :slight_smile:


#3

Thanks! What would be a proper way to prevent it from breaking?


#4

Hi @alex-virt, I think I don’t understand can you paste a screenshot with the problem :sweat_smile:

In general, if you are looking for something similar you can research:

The white-space property is used to describe how whitespace inside the element is handled.

The HTML <pre> element (or HTML Preformatted Text) represents preformatted text. Text within this element is typically displayed in a non-proportional (“monospace”) font exactly as it is laid out in the file. Whitespace inside this element is displayed as typed.

But all depends of the problem you want to fix.

Cheers and happy coding :slight_smile:


#5

I wanted to prevent “Prokudin-Gorskii” from breaking when the window is narrow. I tried to use non-breaking dash ‑ but it didn’t look good typographically.


#6

I understand. I tried to break the word “Prokudin-Gorskii” using the mobile device view (Blisk, opera and firefox) but I couldn’t. Therefore I couldn’t test this element (never used before) but maybe can fix the problem:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

The HTML element word break opportunity represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Or Maybe the <pre> element is a better option.

Update: wbr specs (the mdn link was broken)
https://www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element

Cheers and happy coding :slight_smile:


#7

I think the none breaking space is just working fine in this case.

Sergei Prokudin Gorskii

Thanks,