Tribute Page - Elisabeth Kübler-Ross

This is my first project for FreeCodeCamp :raised_hands:

What I wanted to achieve is:
. semantic html
. pure html / css code (without javascript)
. mobile first design
. good accessibility

Creating this little page has been a very enriching experience in which I have learned a lot! A small but important step on the endless path of continuous learning :muscle:

I would love to hear your review / opinion! :speech_balloon::slightly_smiling_face:
Thanks!:heart:

11 Likes

Lovely :slightly_smiling_face:

1 Like

It’s beautiful, I like the butterfly that fly. How did you do it?

1 Like

Thanks @broregard!:heart:

Thanks @camcode! It is a gif that I found on the internet :wink:

1 Like

Hello @MartaFagundez,

HTML

  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

    <section id="intro">

  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

      <section class="textLeft-imgRight">

  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

      <section class="imgLeft-textRight row-reverse">


  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

      <section class="text-fullWidth">

  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

      <section class="textLeft-imgRight row-reverse">


  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

      <section class="text-fullWidth">


  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

    <section id="details">


  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

    <section>


  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

From line 71 to line 71:

  <section id="quote">


  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

From line 83 to line 83:

  <section id="more-info">

MDN documentation:
<section>: The Generic Section element - HTML: HyperText Markup Language | MDN

Usage notes

Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element.

Example:

 <section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.


  • info

Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.

  <article  id="tribute-info">

MDN documentation:
<article>: The Article Contents element - HTML: HyperText Markup Language | MDN

Usage notes

Each `<article>` should be identified, typically by including a heading (`<h1>`-`<h6>` element) as a child of the `<article>` element.


cheers and happy codding :slight_smile:

Note:
Tools used:
w3c markdown checker web service

Video:

1 Like

Hola @Diego_Perez , veo en tu perfil que eres de Chile, así que te escribo en español.:wink:

Gracias por tu aporte! Volviendo a leer las especificaciones para la etiqueta <section> veo que estaba haciendo un mal uso de ella. Así que gracias a tu comentario puedo corregir un error relevante.:+1:

Gracias de nuevo!

Very nice!
I like the butterfly in the hero section. Keep going!

1 Like

Thank you @iClusterDev!:wink:

De nada :slight_smile:

Cheers and happy coding :slight_smile:

1 Like

It looks amazing. So stylish and engaging. It has made me want to go back and have another attempt at my own tribute page.

1 Like

This is a very nice tribute. Excellent presentation. Simplicity is appealing.
How/where did you create this…on FCC??

1 Like

Thank you @Blutakduck!
I like your tribute page too :+1:, it is concise and clean. The only thing that I think breaks the harmony is the blue font color for the links (on a dark background). Beyond that it seems like a very good start!:clap::clap:

Thank you @Bergi5!:smiley:
I first studied the basics of HTML and CSS in MDN.
Then I did the lessons of the first FCC module.
And now I am carrying out the projects of this first module.

To the requirements of FCC to approve the projects I always add these:

  • 100% responsive design
  • clear and clean code
  • attractive and accessible content
  • only html / css code (to know their scope and limits before learning js)

Due to these extra demands that I impose on myself, the projects take me longer :sweat:, but I think I learn much more.:grin:

And when I have doubts or problems, I search on google. :wink:

1 Like

Sounds really good! Thanks!

1 Like

That is lovely and a really nice tribute to Elizabeth!

1 Like

Thank you @john1!:blush: