css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Zipline: Build a Personal Portfolio Webpage @ FreeCodeCamp.com

Forked from Justin Richardsson's Pen Portfolio.

This Pen is a fork, but the parent Pen has been deleted.


  1. If you have any questions about this project, feel free to hit @hallaathrad directly, he'll be able to give you a hint/hand.

  2. so i have been directed to this portfolio to develop a similar one and I have to say it would have been lot better if freecodecamp told us something about Jade and Post CSS preprocessors

  3. Hello, i am a freecodecamp camper i would like to know a good resource to learn PostCss thanks.

  4. I have no idea to build an webpage from 0 to 1 @hallaathrad, I don't know which CSS style I should use. Could you give me some advice? Thanks!

  5. Thanks for you quick reply! I'm following the FreeCodeCamp.com curriculum. I think I just don't know how to combine different CSS styles. Maybe I should do more practice.

  6. Hello @hallaathrad.

    I'm trying to get my navigation tabs to respond in a similar manner (i.e. switching from say About to Portfolio) to yours when scrolling. Can't seem to find anything on the net? How did you accomplish this?


  7. Thank you, @hallaathrad. It certainly worked.

    One more thing, if it isn't asking too much. I have no idea why at a certain width (in CodePen), the contents of my Portfolio page go beyond their (Portfolio) into the 'Contact Me' page. I worked on my code using an offline HTML/CSS editor (Brackets) which uses Google Chrome to display the results. Everything worked fine on Chrome but when I transferred the code to Codepen, I noticed this issue. I have tried modifying the pages' height, tried padding, to mention but a few, but nothing seems to work.

    To understand exactly my problem here is a link to my Portfolio project.

    If you don't mind, please click on the Contact tab then try increasing the display tab's width and you'll see what I'm talking about.

    I know I'm asking a bit much, but would greatly appreciate any pointers to the problem.


  8. Thanks for the suggestions, @hallaathrad. Getting rid of the absolute position did the job but also ended up masking the background image. After some research on position properties I tried playing with the dimensions, one of which worked fairly well. Still have a lot of work to do, though, with respect to understanding styling/CSS.

    Also, I'm not entirely familiar with Bulma but will be looking into it.


  9. I'm new to coding and we're asked to do scrolling and hotlinks within the page. None of this is in any of the lessons prior to this exercise. It says don't copy codes, but where can I find out what that is even called. And lastly, why can't I get my background picture to show as a background. Is it pointed to the wrong place?

  10. @hallaathrad sorry, but the freecode camp curriculum does not cover navigation within a page or how to scroll down. These are the user story requirements for the Build portfolio. And if it does can you point me to the lesson that does and I'll try to figure it out from there.

  11. @hallaathrad when it says I can use any library -- are there resources I can view in the library or does that just mean I can use any screen.

  12. @hallaathrad, hello Justin ! I am new to front end development, it is a real eye opener to see the Pro's code like yours. I have a couple questions, hope you can enlighten me : Q1 - the html code you wrote for your pen is different from the conventional style I learned from FCC's Basic Front End Development curriculum (and other free online sites) . Can you point me direction where I can learn how to code html in the style you did ? Q2 - for this FCC's "build a personal portfolio webpage" challenge I need to meet, is sticking with coding html and css the conventional style acceptable as long as my pen delivers the functionality specified by the challenge ?

    Thank you !

  13. @hallaathrad, hello again! I completed my FCC's "build a personal portfolio webpage" challenge. I used BS ScrollSpy implementation to jump to different sections of the webpage and track scrolling movement. It works fine when run in external browsers, but when I put in on CodePen, the scroll tracking is not work, even though I did add all references to external css files for BS in my Pen's setting. Do you mind taking a look at my Pen (https://codepen.io/atan4583/pen/mWGvmJ) and tell me what is wrong please ? Thanks a bunch!

  14. @hallaathrad, hello ! I got the issue resolved by adding all external links to HTML setting rather than CSS on Codepen. Please disregard my previous post. I have a new Q : My page elements scale and stack nicely on Chrome browser, but when I launch it on Safari full size screen on a MBP, the two groups of elements in the Contact section do not sit side by side but stack one after another like on small devices. Why is the breakpoint @media(min-width:1023px) not working on Safari full size screen ? If I need to add more breakpoints what would those be ? Thanks !

  15. @hallaathrad Hi, I've searched the internet but I'm really struggling to understant why some of the words in navbar list start to pile up vertically when I reduce the width of the webpage. Please can you give me some advice? https://codepen.io/Tmurdha/pen/oWewxd

  16. @hallaathrad All Rights Reversed . LoL .

  17. Wow, what a relieve to see many people have the same problem I have when I reach this exercise.

    I understand both ways are correct.

    • I am following FCC curriculum to the letter and I'm sweating myself because I see the portfolio that I'm supposed to make (which is very nice btw :D). And it's kind of cool! I have to admit I did a little peak under the hood (just a little to see if you use CSS and JQuery or just plain HTML). I agree that everything can be google search but then again, what's the point of making a curriculum for people to follow if you want them to google search everything. At least please give a fair warning, something like "you may find out something you need to research for your self that we haven't told you. Yet!"
    • But yeah, if you just used what you teach us at that point, the portfolio would look dull and not inspiring enough.
  18. Irina @unendlichkeit on

    Hi! Can someone please explain why is resize() called at the end in this code: $(window).on("resize", function(){ //some code here }.resize(); ? Isn't resize automatically triggered when the window is resized? Why need to call it explicitly ?

  19. Irina @unendlichkeit on

    @all And what's the purpose of this line $('.navbar-toggle').addClass('collapsed').blur(); ? Doesn't .navbar-toggle already have that class?

  20. @hallaathrad Hello, Justin, thank you for make this wonderful webpage for us, I have a question about this webpage which puzzling me a lot and couldn't find answer from google , it's this css code, #banner .container::before, #banner .container::after{display:none} I don't really know what is the function of those pseudo element? I tried to delete them from the CSS document and after I found the layout of the banner totally change, the logo and menu all come to the middle. I couldn't understand.

  21. @hallaathrad Hi Justin, thank you for your quick respond, and thank you for your suggestions. For myself, make a webpage is like make a car, at the beginning, I have no idea how to make the car, it's too difficult to make a car from the theory, so I find some good car, and analyze them, study how they work, and extract the part which I think is useful. After analyze hundreds and thousands of cars, I could know good how the car works, and collect a warehouse of car parts. After I can make my own car. For me your webpage is a good car, especially the banner, that's why I study your code, and it's not just copy, I try to understand every code, and rewrite it by myself. But as you said , look under the hood probably not a good method to learn, sometimes cause me troubles, I will try find other substitute solutions next time I was blocked by someone's code. Thanks for your answer again, give me some ideas about what to do when blocked.

  22. Really this example was challenging and I gained a lot of infos and new skills, what really inspired me is that form and the way it looks when you start typing, to be honest, I've tried to cheat how you do it, but I could not xD so, I have tried to do it myself and I could :D although it's not as beautiful as yours. the only thing that I couldn't do is the activation of nav button on scrolling. here's the beginner version of your portfolio. xD

  23. @hallaathrad , Thanks for the sample page. It is a good step-up to get me started. --Mrchrisf

  24. Hello @hallaathrad!!I am not able to add footer as you did in the portfolio webpage. Please help me

  25. @hallaathrad I am really stuck. I could use some major help please. I have been trying for days to figure out how to even get started. I've decided I want to build my page from the top down and start with the header and navigation bar but I can't figure out how to make it work the way I want. I can't even figure out how to create the header. I would really love to make one like the one you created because I love the simplicity of it and the way it looks and functions. If I can get started and get the header done and made how I want I should be able to do the rest on my own. I've just recently started to learn coding and I really like it. I find it fun and relaxing. I've been learning on freecodecamp but I rushed through the beginning which has made things much harder for me now. Some help would be very much appreciated.

  26. Hello, i am a freecodecamp camper, a rookie one. I have done the both assignments, portfolio and tribute page. I was wondering if you like and that suggestions and critics you have. https://codepen.io/whiterubber2/

  27. @hallaathrad Very nice page bro, I too struggled to find what I need to even begin this challenge. I have read through what you've said and even though I dont really know where to start just yet, I feel relieved, and believe I can do it. Thank you for the pointers and the words of encouragement, I now know and see how FCC has really given me everything I need to "begin" my portfolio. Thanks again Bro.

  28. This particular challenge/project would have been better understood and received if there were hand holding lessons going from start to finish on a similar project and more instructional lessons on bootstrap and CSS BEFORE setting us off on our own to do this. Just my opinion of course and I doubt any suggestions here will make a difference but this portfolio project does present some level of frustration (a bit too early in the learning experience) due to not first learning most of what is required to get it finished.

  29. Not bad but the color picking seems kind of out of place. Font color in the navbar is just wayyy too dark

  30. 非常棒!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.