Robin Williams Career Tribute page Bootstrap 4.0

Robin Williams Career Tribute page Bootstrap 4.0
0

#1

Hi everyone,

I am new here and going through the program for the Front-End Development Certification of FreeCodeCamp.
Most of you probably know there is an assignment there for a tribute page.

For the ones who don’t know what I am talking about here are the specifications for the project:

*The Objective: Build a CodePen.io app that is functionally similar to this:

*Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

I finished mine and am now looking for feedback. Mainly I am interested in the use/handling of the Bootstrap 4.0 library and if I made any mistakes or best practice. I found it hard to make the page look as good on mobile(phone primarily) as it does on a desktop or laptop.

You can view the finished result here: https://codepen.io/Obexus/full/PQNmmd/

Any feedback is appreciated!

Thanks! M.


#2

Hello @Obexus,

HTML

  • error

Stray end tag “img”.

From line 18 to line 18:

   </img></figure>

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Tag omission
Must have a start tag and must not have an end tag.


cheers and happy codding :slight_smile:


#3

@erretres

Thank you!
Is there way to check for stray tags in your code somewhere quickly?
I am always counting my divs for example but its get tedious :slight_smile:


#4

You’re welcome :smiley:

I use :
https://validator.w3.org/

Cheers and happy coding :slightly_smiling_face:


#5

I noticed if the following CSS in your project is removed or stays in, the font-size is not affected.


@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

#6

Hi @RandellDawson,

Thank you for your feedback. I investigated the issue and found out that I need to implement it in a different way since this is a SASS feature. Bootstrap 4 doesn’t this! Thank you again for identifying this issue.

Never heard of SASS going to be another thing to dive into.


#7

Beautiful Tribute page! looks amazing:)