My first coding - feedback very welcome

My first coding - feedback very welcome
0.0 0

#1

Hey guys,

Here is my first coded website, it’s a tribute to one of my favourite surfers. Tribute Page

I’m very eager to learn so plz feedback is very welcome :slightly_smiling_face:

Thank you!


#2

Hey looking good so far. I checked on my mobile and this isn’t responsive. Please research how to make your page responsive with bootstrap. :slight_smile:


#3

You are a genius web designer! Congrats.


#4

Is much better work without bootstrap!


#5

Thank you for the feedback! I will try and fix this asap :slight_smile:


#6

Hey @Joah sorry for getting back a bit late.

You don’t need <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> in your html section. You’ve included it in the settings for css so it’s okay.
But you added two versions of bootstrap in your CSS settings. Take one away.

I think that it’s mostly responsive. Some of the elements are not responding well on a smaller width screen. Here’s a few screen shots:

I think what I see as the main issue is that your section with the youtube videos and the “Journey of Jeremy Flores” text is not laid out properly and so it doesn’t have good flow.

I think you just need to think through how you want that section to look both on a big screen and small screen. Right now the whole text thing gets really squished! The youtube videos don’t respond to resizing the screen at all.

If you want them to be in columns (the videos beside some text) you can take advantage of bootstrap rows. I don’t have a lot of time to play around with it but you may try something like this:

<div class="container">
    <div class="row">
        <!-- two columns 50% width each -->
        <div class="col-6">(youtube video)</div> <!-- the col-6 means 6 units wide (out of 12) = 50% -->
        <div class="col-6">some text</div>
    </div>
    <div class="row">
        <!-- two columns 50% width each -->
        <div class="col-6">(youtube video)</div>
        <div class="col-6">some text</div>
    </div>
    <div class="row">
        <!-- One column 100% width -->
        <div class="col-12">more text at the bottom (full width)</div>
    </div>
</div>

Those columns will work out their own spacing when the screen gets smaller.
So when you have a wide screen you have a layout like this:
XX
YY

but when it gets smaller they will automatically adjust to be vertical like this:
X
X
Y
Y

You can read more about bootstrap grid system in their docs.

I found this article talking about how to make embedded youtube videos responsive. I didn’t read it though!

Anyway, I don’t know exactly how you want to lay out your videos and text, but that section just needs to be re-thought! :slight_smile:
If it were me personally, I wouldn’t put videos and text side by side in a column. I’d probably try to organize it in a logical order and just have it in one column. Video then text then video then text etc.

You’re doing good! Keep it up! This is a great opportunity to learn.
Sorry if my reply isn’t very coherent… it’s getting quite late here and I’ve just been typing a lot of things. If you have any more questions let me know!


#7

Hey

Sorry for the late response had a very busy day yesterday but thank you so much for all the feedback I really appreciate this!! I will get on to it right away :slight_smile:

Thanks again !!

Cheers,

Joah


#8

Good tribute page :slight_smile:


#9

Looks really good, you may also considering following notes.

Add some space between elements, example some space between first image and the next one. Same about the two videos at the left, and the list at the right.

Larger and relative font size is appreciated.

you also already set alt attribute for images, it’s really good.

Overall, looks good.

Keep going on great work. happy programming