Feedback Tribute Page Project

Hello, thank you for read my post.
I finish my Projet, i would like to know what can be improved.
https://codepen.io/rom73/pen/abpyRWG
Thanks so much

Hi @rom !

Welcome to the forum!

I think you need to work on responsiveness.
The design doesn’t work for smaller devices

For codepen, you don’t need the html and head tags.

<html>
    <head>
        <title>Tribute to Alan Turing</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="script.css">
    </head>
``

Welcome to the forums @rom. Your page looks good. Some things to revisit;

  • As mentioned, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • guerre” is not accessible
  • As mentioned, make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Hi @jwilkins.oboe , thanks for your advice.

I hadn’t thought of looking at the result on a small screen.
I will modify this.
I write my code on an ide and I copy it to codepen, that’s why there is the header.
is that changing something?

Hi @Roma , thanks for your helps.
I will see the error on the links.
For you the link is not accessible ? For me it works, i don’t understand .

It is just not needed for codepen.
Codepen is an artificial coding environment where the boilerplate is built in.

Nothing bad happens if you have the boilerplate but it is not needed.

For example, why do you need this?

You are not linking a stylesheet

or this?

title tags are used for the title of a web page. But this isn’t a normal web page.

When you are building web pages, then of course you need all of that stuff.

But codepen is different.

Hope that makes sense. :grinning:

@rom, If you read the referenced links you’ll understand what is meant by accessibility.
It does not mean the link does not work.

1 Like

Yes i understand perfectly .
I need the link a stylesheet because, i use IDE and to test the code i need it.
I prefert to write everything, to get a good habit. :slight_smile:

@Roma sorry I didn’t have time to consult the link before, now that it’s done I understand the problem better :wink:

1 Like

@Roma @jwilkins.oboe , hi, I need help, I changed a lot of thing, for Responsive and accessibility, but I can’t modify “id = syno” this Div overflows on “id = bio” when I decrease the size of the screen.
can you help me please :slight_smile:

What do you mean by overflows on id="bio"?

That is what I see when I decrease the browser window.

Are talking about the fact that there is still a horizontal scroll bar on smaller screens?

The horizontal scrollbar has nothing to do with either of the id's you mentioned.

Minimize your browser as much as it will go and you’ll see the horizontal scrollbar.
When you’ve done that scroll up and down until you see something that goes all the way across the screen. See it?
It’s in between the div with id="syno" and the div with id="bio".
You hardcoded that single element with a pixel value that will not let it get any smaller. If you hadn’t done that it would resize responsibly.


the text passes above the other.
how I can modify my code so that there is no longer a scroll bar.

@Roma thanks to you I found a big forgotten one.
but the main problem I still can’t find.

You need to delete the height in the syno selector.
You also need to delete that extra position: relative;

As mentioned earlier, for better responsiveness use rem, em for fonts and percentages for width.

finally … thank you very much.
I just read some article on this measurement system, it’s much easier when you master it