My Tribute Page - CSS or Bootstrap? Looking for Feedback and Advice

My Tribute Page - CSS or Bootstrap? Looking for Feedback and Advice
0

#1

Hello fellow coders.
Just finished the tribute page below, honest feedback is appreciated.

As I am new to coding, I am not yet familiar with bootstrap. Should CSS or Bootstrap be used in a project like this? Could anyone recommend good study material to learn bootstrap?

Thank you :)))))
Olena


#2

If you’re just getting started, I recommend CSS. Bootstrap and other frameworks have a way of hiding some of the details of CSS from you. It’s better to get to know CSS very well before you start using other tools on top of CSS.


#3

Looks good, mobile responsive and everything works. The only issue for me is the resolution of the photo. Otherwise, it’s exactly what’s been asked of you to do. Congrats!


#4

Hello @OlenaCoding,

HTML

  • error

Bad value “100%” for attribute “width” on element “img”: Expected a digit but saw “%” instead.

From line 6 to line 6:

    <img src="https://timedotcom.files.wordpress.com/2014/04/malala-yousafzai-time-100-feat.jpg?quality=85&w=550" width="100%">

IMG

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

width

The intrinsic width of the image in pixels. In HTML 4, either a percentage or pixels were acceptable values. In HTML5, however, only pixels are acceptable.


  • Do not use lower levels to decrease heading font size:
 <h1 class="text-center">Malala Yousafzai</h1>
  <h3 class="text-center"> <em>How One Girl Stood Up for Education and Changed the World</em></h3>

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

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

http://w3c.github.io/html/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.

Common Idioms
https://www.w3.org/TR/html5/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements


cheers and happy codding :slight_smile:


#5

Thank you so much for reviewing my work!
I have changed the H3 to H2 and styled it in CSS instead.

I was struggling with image to fit evenly within the figure box, then finally placed it properly by width 100%. What pixel size should be used here?

Regards,
Olena


#6

Thank you for reviewing my work! :))


#7

have you tried with css?

https://developer.mozilla.org/en-US/docs/Web/CSS/width

The width CSS property specifies the width of an element. By default, the property defines the width of the content area. If box-sizing is set to border-box, however, it instead determines the width of the border area.

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Cheers and happy coding :slightly_smiling_face:


#8

Hello again @erretres :slight_smile:
Thank you for the above. I tried every value and it does not stretch the image to the whole width of the box… It just leaves it in the middle.
The only value that makes the photo assume the full width of the box is “width=100%”…
ughhhhhh…


#9
  • “width=100%” is only a problem in HTML5.

  • You can use “width=100%” in CSS, example:

img {
 width:100%;
}

I forked your pen:

  • I deleted the width attribute (html):

  • added a css rule:

img {
width:100%;
}

https://codepen.io/erretres/pen/oEYzBQ?editors=1100

In my forked version the photo assume the full width :thinking: .

Cheers and happy coding :slightly_smiling_face:


#10

I am such a newbie!!! I was formatting “figure” element instead of “img”…
width 100% in CSS worked like a charm!!
Thank you very much!


#11

You’re welcome :smiley:

Cheers and happy coding :slightly_smiling_face: