I completed the 5 certification projects of the new responsive web design. Two of these projects were not accounted for and I couldn’t get the certification. How can I proceed?
please be more specific.
Which projects were you not able to complete?
What error if any did you encounter?
You can show screenshots to help us understand as well if needed.
My point is whether I can rebuild the certification projects that were not passed or this is not allowed.
I am sorry I am still not understanding the question.
Can you give me a specific example of what you are doing that has not worked?
In the new responsive web design page, there were 5 certification projects. For me, two of those were not passed. What I wanted to know is how to proceed after that. It may be allowed that I reshape the projects that were not passed so that I can claim my certification or there is some other alternative. Thank you.
You are supposed to work on the projects until they pass all tests.
At the time I finished every project I passed the tests but I discovered later that some are not counted. What does that mean?
Hi again,
Please be specific.
For eg. Which project specifically are you talking about? (Provide a link to that specific project page or pages) Please show us the full html and css code you used.
Please take a screenshot of the issue and show that to us as well.
The more information you give us, the more likely we are to understand you or to give you help.
Sorry that I have to repeat what I was saying becaose part of it has disappeared while I was searching for link. I said that 3 of the certification projects that I completed were not counted. I am giving here links to them.
1 a Tribute page link
Please note that I strted refhaping this page but did not finish yet.
- Technical Documentation page link
A Documentation Page (codepen.io)
3- Personal Portfolio Page
Personal portfolio page (codepen.io)
For thi spage please note that I saw a problem and was asking for help to solve it but it was solved only partially. I stopped trying after applying the test and getting an OK with a comment sayiung” You are heating up”.
Please pick one of the above and show us the code you used in full.
Take a screen shot of any error you are seeing or the issue you are trying to report as we still don’t understand.
Thanks. I select the last one for which I referred to unsolved problem. It is the personal portfolio page. Here is the full code.
HTML;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<nav id="navbar">
<a class="nav-link"href="#About">About</a>
<a class="nav-link" href="#projects">Projects</a>
<a class="nav-link" href="#Contact">Contact</a>
</nav>
<section id="welcome-section">
<h1>PERSONAL PORTFOLIO</h1>
<h2><span class="bold"><i>Hamdy ElHinnawy</i></span></h2>
<h2 id="profile-link">See my profile at<a href="https:// www.freecodecamp.org" target="_blank" rel="noreferrer"> freecodecamp</a></h2>
</section>
<section id="About">
<h2><a name="About">About</a></h2>
<p>With this portfolio I am not addressing recruiters. I am not looking for a job as a developer.</p>
<p>I am learning coding, and I am a beginner.</p>
<p>I'll continue learning andin due course will decide what to do with my learning.</p>
<p>For now, I represent my portfolio to see if I am really on the right track.</p>
<p> One more reason for not addressing recruiters is that I am old and most likely will use my skill for my own purposes.</p>
</section>
<section id="projects">
<section id="projects">
<a class="item0" name="projects">Projects</a>
<div class="project-tile">
<h2>Survey Form</h2>
<p>This form was to collect data for the projectpurpose of clarifying a is normally donr in research.</p>
<p> The data to be collected includes name, gender, age and hobbies, among other things</p>
<p>See this project at <a href="https://codepen.io/hinnawy/pen/poKLrKK" target="_blank" rel="noreferrer">Codepen</a>
</div>
<div class="project-tile">
<h2>Tribute Page</h2>
<p>This was a tribute for an Egyptian writer whose work
was unique in expressinghis ideas on Egypt’s development in the 20th century</p>
<p>his funeral wa honered by the president and the highest rank of the Egyptian elite.</p> <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature and is the only Arab writer who got this award</p>
<p>See the project at <a href="https://codepen.io/hinnawy/pen/oNyqeKx" target="_blank" rel="noreferrer">Codepen</a></p>
</div>
<div class="project-tile">
<h2>Technical Documentation Page</h2>
<p>This page documented the process of design and manufacturing of a printed circuit board</p>
<p>It highlighted six steps of the process referring to the old manual method and the modern ones that rely on software</p>
<p>See the project at <a href="https://codepen.io/hinnawy/pen/RwJMLwV" target="_blank" rel="noreferrer">Codepen</a></p>
</div>
<div class="project-tile">
<h2>Product Landing Page</h2>
<p>This page was about an imaginary store called Child Play</p>
<p>It gave a representation of products that it supposedly sells, services that would be provided and a pricing list</p>
<p>See the project at <a href="https://codepen.io/hinnawy/pen/qBKoPaN" target="_blank" rel="noreferrer">Codepen</a></p>
</div>
</section>
<section id="contact">
<h4 class="item0"><a name="Contact">Contact</a></h4>
<img class="image" src="https://lh3.googleusercontent.com/a/ALm5wu3Rr1II1eKScPghch5zwxL3OX__1ZYukAZKOaKWTg=s450-p-rw-no">
<div class="text">
<p><span class="bold">Name</span>: Hamdy Elhinnawy</p>
<p><span class="bold">email</span>: haahinnawy@hotmail.com</p>
<p><span class="bold">Contry</span>: Egypt</p>
<p><span class="bold">Education</span>: Ph.D Economics, London School of Economics.</P>
<p><span class="bold">Date of Birth</span>: November27, 1941</p>
</div>
</body>
</main>
</html>
CSS
html {
box-sizing: border-box;
}
body {
background: floralwhite;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#navbar {
width: 100vw;
display: grid;
grid-template-columns: repeat(3, 1fr); grid-column: 1/-1;
background: gray;
height: 65px;
position: fixed;
z-index: 2;
top: 0px;
left: 0px;
}
.nav-link {
text-decoration: none;
color: cyan;
font-size: 1.2rem;
font-weight: bold;
margin: 15px;
}
#welcome-section {
height: 100vh;
display: grid;
grid-column: 1/3;
justify-content: center;
align-content: center;
padding: 50%;
background: linear-gradient(90deg, floralWhite, beige);
}
h1 {
text-align: center;
}
.bold {
font-weight: 800;
}
.bold {
font-size: 1.5rem;
}
#profile-link {
color: red;
}
a {
text-decoration: none;
}
h2 {
font-size: 1.5rem;
text-align: center;
}
#about {
grid-column: 1/3;
background: linear-gradient(to bottom, beige, lightCyan);
}
#projects {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item0 {
grid-column: 1/3;text-align: center;
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 20px;
margin-top: 20px;
background: LightCyan;
}
.project-tile {
border: solid 2px black;
padding: 5px;
background: linear-gradient(90deg,Lavender, lightCyan);
}
#contact {
display: grid;
grid-column: 1/3;
gap: 10px;
}
.image {
grid-column: 1/2;
border: solid 2px green;
width: 120px;
border-radius: 50%;
padding: 5px;
margin-top: 20px;
}
.text {background: linear-gradient(90deg, floralwhite, beige);
grid-column: 2/3;
}
@media only screen (max-width: 600px) {
#contact {
grid-template-columns: 1fr;
}
}
I am unable to have a screenshot as I don’t use Microsoft Office. If useful, I can describe in detail the problem as follows. The upper as well as the lower part of the page appear in two complete grid columns. The middle part is different. It appears also in two grid columns but as a whole is much narrower and aligned to the left leaving a wide empty space to the right. Such a space doesn’t exist neither in the upper nor in the lower part of the page. There were other empty spaces and alignment problems in the middle part but those were solved after getting help to check the html code.
I thank you very much for giving help and I feel very sorry for any inconvenience.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
link to the personal portfolio project page as it was not posted before
hi Hamdy,
I posted this code in the challenge and I saw that it was not passing several tests.
But you didn’t ask us how to solve these, so I will not try to help you with something you did not ask for help with.
It seems you are saying there is a layout issue you want to fix in your portfolio.
I opened your codepen to try to follow along with your description.
You said " The upper as well as the lower part of the page appear in two complete grid columns."
Can you clarify which element is the “upper part” and which element is the “lower part”?
To me, the upper part looks like a nav-bar at the top and a blank area underneath.
Is that it?
Which element is the “middle part”?
I see an area with columns, so I guess this is the middle.
I also see a contact area so this must be the lower part?
Not 100% sure what is the upper part still unless you mean the nav-bar?
I’m going to move this topic to html/css sub-forum because it is not a freecodecamp support issue but rather a coding issue. We can continue the discussions there.
I also noticed that you have some syntax issues in the code. These issues must be fixed first before you can make good progress on the layout because otherwise the layout manager will be confused and not work well.
Here is an online html validator. Please copy the html into it.
Then fix the errors being reported to you.
if you need help let us know.
Thank you. I am sorry. Forgive me. I just pot three points without looking at the appropriate tool in the editor.
please don’t worry about it. No need to apologize.
Btw. I understand Arabic. However not 100%. If you need to, feel free to use it.
Thank you. I checked the HTML code and found one minoe mistaake ,which I fixedd and rechedcked to have the following result:
Document checking completed. No errors or warnings to show.
There is no change in the layout. I mean by the middle part the part that contains the projects. It is what you guessed. tThe navbar refers to three navigation parts that are (About0, (Projects) and (Contact). Obviously, the problem is in the CSS code and how to fix the width of the grid columns. After this discussion I think I solved it. Can you please have a look at that? Thanks again.
hi again,
I copied your code again to the online validator and again, it has a lot of errors still.
Can you try to copy and paste -all- the html code in the codepen you shared with us and put it into the online validator?
You will see many errors that must be fixed including:
Error: Bad value https:// www.freecodecamp.org for attribute href on element a: Invalid host: Illegal character in domain: space is not allowed.
From line 19, column 40; to line 19, column 112
profile at<a href="https:// www.freecodecamp.org" target="_blank" rel="noreferrer"> freec
Error: End tag for body seen, but there were unclosed elements.
From line 76, column 7; to line 76, column 13
iv>↩ </body> ↩
Error: Unclosed element section.
From line 66, column 8; to line 66, column 29
↩ <section id="contact">↩<h4 c
Error: Unclosed element section.
From line 29, column 6; to line 29, column 28
↩ <section id="projects">↩
Error: Unclosed element main.
From line 10, column 3; to line 10, column 8
↩<body>↩ <main>↩ <na
Thank you very much. Now can you just give me a clue on how to proceed. I think I solved the problem of one of the three projects. Meanwile. I am working on another one. Will reshaping the three projects change the certification issue? Thank you.