Portfolio challenge, advice

Code Feedback
1

Hi there,

Currently doing the portfolio challenge :smiley: , i have some crazy idea’s some i know i straight up cannot do yet.
But what i would like is that every section on my page takes up full screen whatever the browser size is.(also height)
Now when i check my page on my laptop i can see parts of my about section on my home page.

So the question is: Is this possible with only HTML and CSS bootstrap? Because i can find some java-script solutions that i do not understand yet, and so i don’t want to copy and paste just so i can get on with it.

Or would be better to finish my page just not perfect and do more of freecodecamp until i understand all the solutions i read about on the web and than update my portfolio-page.

Appreciate any help/tips,

Greetz Jeffrey

Link to page: https://codepen.io/Jefsev/full/Kmbvea

2

Hi Jeffery,
I had the same problem, I had a lot of ideas, but I’m also not strong enough in Javascript yet. I just went ahead and did my portfolio with the idea in mind that its kind of a template and I will be changing and updating once I learn more. I’ve also seen others that have place holders and not fully complete, but ready for additions. I hope this helps : )
Also I would like to know the answer to your problem too if there is a solution with html and css : )
Good luck

3

Hey les,

Thx for the reply! :slight_smile: I will continue and finish the page with what i know without javascript.
Really looking forward to the javascript lessons on freecodecamp. :smiley:
If i find an answer that only uses css and html/bootstrap than i will let you know.

4

Hi les,

I found it i think!

What i understand now is that your parent page so html, body has to contain height: 100% and overflow: auto.

html, body{
height: 100%;
overflow: auto;
}

and then every section has to also contain this lines, so for me like this:

#about {
height: 100%;
overflow: auto;
}

same for home, work and contact.

for now it seems to do the job correctly on every screen.
Hope it helps.

Oh and when you do hidden on overflow scrolling is not possible anymore and only the navbar brings you to the section. For this challenge we need scrolling but anyway nice to know :smiley:

1 Like
5

That sounds right to me : ) Thank you so much for sharing, its always good to get some new skills :smile:

1 Like
6
  1. It triggers google translate on Chrome when i click on projects
  2. Theme looks dated
  3. Color change when hovering upon tab buttons can be improved
7

Hey rjsh,

thx for the feedback.
The project thumbnails should not lead you anywhere, strange for me they just reopen the same page. (later i will put links in here to my projects)

Theme looks dated, care to explain a bit more? some tips? to much grey or background not good, layout what makes it dated?
Yes the color change is not nice, ill find something which looks better.

Jeffrey

8

Even I am a beginner in this game (just completed random quote project)
your page reminds me of early 2000’s website theme. If anyone has around for more than a decade he will think it is some old website. some crisp background , theme and button changes should remedy it though. Best of luck.

9

Thats not what i want :P,
Ill have a look and change some stuff, thx for the reply.
You also best of luck and your random quote generator looks cool :wink:

10

use col and row. that should work

1 Like
11

Hey,

Looks good, I like the design.
One tip, if you want your images to scale with the page, use relative sizes.
Now, the size of the image stays the same no matter how big or small the screen while the rest does change size.

1 Like
12

Hi,

Thanks.
Ill use that tip, was wondering/searching about that already for a few days.