Personal Portfolio Challenge-JW

Code Feedback
1

Well, there’s not anything in my portfolio, since I’m pretty new to this, but the design is finished. Hopefully I’ll be able to fill this in with some real work soon! Feedback would be appreciated, but be gentle…I’m still new at this!

Project Link - https://codepen.io/jeniwaters/pen/ZpGpKX

5 Likes
2

The design looks well polished and pristine. For somebody who says she’s new at this, you have great design taste. Now to some critique:

  • remove the slashes in the nav bar. Also have a look at scrollspy.

  • In the projects section, Try to position the divs at same height irrespective of inside content. Learn about flexboxes. They are the single best thing that can happen to you in terms of layout with CSS.

  • Responsiveness in the project section needs more work.

Best of Luck!

3

Thanks for the feedback. I’ve got a good bit of print and document design experience, and have played around with tweaking website templates before, but coding from scratch (or close to it) is totally new to me. So far, coming up with a design is much easier than getting the code to cooperate with what’s in my head! I’ll definitely look into scrollspy and flexbox once I get my head better wrapped around the basics.

4

Well done, add some more sections maybe. Like an about section,this will add some meat to it

5

Jeni, this is really great. Especially for somebody who 's new at this.
My suggestion would be to add smooth srcolling to anchors on your page.

6

Thanks @salasy. The smooth scrolling does look nice and I would like to incorporate into my page, but I’ve not ventured into JQuery yet, so I’m having a little trouble. I added the JQuery library in the Pen settings, then copied the code you linked over to the JS window. What else do I need to do to make it work? :confused:

7

Thanks @lecluecg . More sections will come once I’ve come up with some more content…just trying to get the basic requirements met.

8

First, include jquery in your project.
Second, add ids to your divs:
<div class="jumbotron section1" id="home">
…
<div class="caption" id="portfolio">
…
`

` ...

Last, include this in your JS section ( in codepen ):

$(document).on('click', 'a', function(event){ event.preventDefault()
$('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); });

And enjoy :slight_smile:

9

Edit:
`

`

not:
<div class="caption" id="portfolio">

10

Eeek! It worked and looks amazing. Thank you for the for the tip and walking me through it! :grin:

11

I’m glad you made it.
Try to play with scrolling speed, changing the duration of animation. 500 means that your animation will run for 500 milliseconds. Try with 100. Or 900?
Enjoy :slight_smile:

12

Looks great, jeni! You certainly have an eye for visual design.

13

Now I feel bad after seeing some of the portolios here done by “new to this” people :slight_smile:. Guess it’ll work as a motivation tool.

Great job, I really love the design!

14

Thank you :slight_smile:

15

What helped me was making sure I had a very clear idea of what I wanted it to look like before I started coding. Good luck @amek! :thumbsup:

16

I might not be that good with styling, but code-wise I’m getting close to what I wanted to create for this assignment! :smiley:

17

It looks great!! Especially for a beginner!