Build a Personal Portfolio Webpage "MTayachi"

Back End Help
#1

Tell us what’s happening:

Problem 1—> As specified in the user story, I set the “navbar” position to “fixed”, however, for some reason it messed the other elements flow in the page:
The “projects” section is displayed on top of the “welcome-section”, despite the fact that it comes after it in html, and there are positions specified in CSS for both sections.
The display is fixed only when I remove the “fixed” position for “navbar”

Problem 2—> When I specify a “line-height” for “h1” and “h2” in “welcome-section”, the text doesn’t wrap anymore when I reduce the size of the window, instead, the words overlap.

Problem 3—> When I tried my code on a local server (WAMP), the display is completely messed up, not the same as in codepen.io

Your code so far

https://codepen.io/MTayachi/pen/VwZpddQ

Your browser information:

User Agent is: `
Google Chrome
Version 76.0.3809.100 (Build officiel) (64 bits)
Firefox
68.0.2 (64 bits)

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/

#2

for issue#1 please check your grid

  display : grid;
  grid-template-rows: 2.5em 90vh auto auto;
  grid-template-areas: 
    "_navbar"
    "_about"
    "_work"
    "_contact";
#3

What’s wrong with it ? I can’t figure out, ty.

#4

FYI codepen exports don’t link CSS and JavaScript to HTML.

Maybe on the project tiles in your portfolio you could use imgs instead of iframes. When I add /image/small.png to the end of your pens URL like this:
https://codepen.io/MTayachi/pen/VwZpddQ/image/small.png
I get this:

#5

That’s actually a nice trick, thanks a lot, I was wondering how to put a screenshot of the webpage without having to store it somewhere, it’s more of a PHP function right ?

#6

It’s not working, I tried with the first one but it shows the “alt”.
image

#7

Sorry that’s not what I meant. When you’re in codepen you add it to the URL then the resulting page is the link to the screenshot. Inspect the screenshot in the post you’ll see the different URL.

@MTayachi Here is the image address I got from appending /image/small.png to the pen’s base URL:
https://screenshot.codepen.io/3507185.oNvYENp.small.6461e711-6372-4cdd-8b81-3a6be0c1a928.png

#8

I see, yeah I changed "“full” with “pen”, it works. So it’s only something related to codepen, how can I do if I want to add the screenshot of any other website? Thank you.

#9

Yes it is for your codepens. You need a screenshot or screen grab utility. There are some browser extentions and some stand alone programs that can do this. Just make sure you can take a picture of a portion of the screen as well.

1 Like