Tribute Page Remaking

I Built This
1

Ey! I came back!

I was a little frustrated about responsive design and how to organize my CSS so I went to study the “Introduction to Responsive Design” by Kevien Powell that you haev in YT.

Sooo, i decided to remake all my Responsive Web Projects taking all these new knowledge!

https://codepen.io/RazielTX/pen/qBqWRaN
This is the tribute page with mobile first, Flex and Grid!

I did a bit of tramp, hehe, 'cause I made all in VS Code without taking count of user stories and then I added them.

Thanks for feedback!

2

Hi @RazielTX!

I think your page looks really good.

One of your images is not loading.

Screen Shot 2021-01-28 at 12.16.22 AM
Screen Shot 2021-01-28 at 12.16.22 AM874×200 11.2 KB

Keep up the good work!

3

Hey @RazielTX! welcome back :). Your page looks great. It’s a good thing that you found Kevin’s videos ;).

4

Hi RazielTX. Your tribute page looks impressive!
I felt the same regarding Responsive Web Design and still have my struggles and occasional obstacles rendering my projects responsive. I should have a look at Keven Powell content you suggested.
One small critique- there are some grammar errors in your page, right from the 3rd line you spell the person of subject “Howard short” instead of Shore :slight_smile:

5

Thank you!

A months ago you reviewed my Technical page and helped me a lot!

I don’t know why the image don’t load, but I chagend it.

Again, lot of thanks!

6

Thanks!

I think Kevin is amazing! I was so lost in CSS’s world but I found the way!

7

Ey! Thanks!

Yes! In freecodecamp’s YouTube Chanel there ir an introduction to RD and its amazing: Introduction to RD

Oh! Sorry for the mistakes, I was so tired and began to write with no sense, haha. Thanks for the critic!

8

Your page looks good @RazielTX. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Don’t use in-line styling. Make all your styling external.
    • It will make maintenance a lot easier if you need to resize your iframes if they’re in one place rather than five.
9

Thanks @Roma!

Ok! I ran the code through the W3C Validator and sure, I was using div instead figure and the problem with the iframes.

Where can I insert the attributes in CSS? I just copied the code that YT gave me and then code the CSS.

HTML:

<iframe width="560" height="315" src="https://www.youtube.com/embed/SRgBI0WqWp4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Thanks a lot!

10

You have an iframe selector in your stylesheet. How about adding the height and width property: value; pair there.

Did you try doing that first?

11

Omg, haha, ya!

So, the tag should be:

 <iframe src="https://www.youtube.com/embed/SRgBI0WqWp4" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

And the CSS:

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border: none;
}
12

Yepper

Or if you want you could set the height and width to another size using relative values rather than using 100%. (But you already knew that part)