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
bodyelement in the HTML editor. (No need to include thebodytags). 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. 
@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. 
@Roma sorry I didnât have time to consult the link before, now that itâs done I understand the problem better 
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
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.
@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
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.