Personal portfolio finished. Plain and simple one. Hope to hear from you guys that what do you think about it? Design wise or coding wise, how can I improve. Thanks! 
1 Like
I really like the simplistic design, but its not very responsive. Sliding down to phone screen size, the header doesnât grow to contain the navigation, and the images and form slide off the page.
There is no need to put âAll rights reservedâ. Thatâs a copyright formality, so if there is no copyright to reserve it kind of just implies you dont know what youâre talking about 
The image for your first completed project, with the black bars on wither side, makes it look like it isnât formatted correctly, that is, without the correct aspect ratio.
Code wise, your CSS seems to have very inconsistent indentation. Its good habit and very beneficial to those reviewing your code to have good styling habits like proper indentation. Also, with codepen theres no need to put link tags in the body code, that can be added in the HTML settings.
Good on ya on using semantic HTML, not enough people use header/nav/main tags. Your nav element doesnt need an ID of nav. I would just use the nav element itself as your css selector, or if you care about specificity put âheader navâ as the selector.
Lastly, I would research HTML content models. You have p tags as titles and section tags without headers. There is a fundamental content structure that the W3 pushes for organizing HTML. Theyâre not requirements per say, but they aid in accessibilty for search engines and screen readers. In a nutshell, sections should have headers and content (usually in a p tag), div tags should only be used to divide content stylistically, and so on. In the long run it will help you structure your code more professionally and cleanly.
1 Like
Oh⌠wow⌠Thanks for the inputs⌠and yes, I have no idea when to put those"all rights reserved" at the bottom⌠>.<
That is a lot of info for me to digest⌠I think I will change whatever I can in the next few weeks and post my progress here as well as along the way all the challenges I will encounter.
Hey again,
This looks very straight-forward. It was also great that you left comments on your coding to help people navigate throughout the project. Your coding reminded me to place alt = ââ elements for the pictures; I completely forgot about that in my project.
I donât feel like, I can give you the best suggestions, but I only have 2 points. First, âfor your layouts or backgroundsâ vehicles style=âwidth: %â or style=âwidth: vh/vwâ auto for your layouts. When I found that in CSS, it helped my portfolio page become more responsive, but Iâm still trying to get the hang of it. Second, you should place labels on what your portfolio projects are, and that shouldnât be too hard 
One question: In the code for your work section, under the div row class, why are there so many col-xx-xx? I didnât really understand that section in the freecodecamp course, but maybe you can explain it?!?
Regardless, youâre doing awesome and it was very cool to meet someone who was moving along at the same pace in freecodecamp as me! I hope there is a way I can keep you in contact with freecodecamp. Nice to have some online classmates 
cheers!
Hello,
Great job finishing the portfolio project! There are a few things that I would like to remark on:
-
There is a lot of space above your nav bar, about me section and work section. It would be ok if there was a textured background behind it, but right now thereâs a lot of empty space. Itâs good if youâre going for that minimalist design, but to me it would look better with a little less space.
-
Right now there is placeholder text in the about me section, but keep in mind that it shouldnât be too long.
-
Grey color scheme is good since itâs simple, but combined with all that empty space, itâs giving off the vibe that your portfolio is missing stuff.
-
All the links work! Sweet!
-
On the nav bar, it would be cool if the text changed colors (perhaps that blue you used in the Works section) or if it was underlined if the user hovered over the text.
Overall, I like how well separated the individual sections and how itâs a no fuss kind of design. Nice work man!
Hey, 1st of all thanks for the feedback. I will look into it when I have time. And you can add me on whatsapp or slack. I created a group on slack. https://free-code-camp-group.slack.com/ You can add me there and we can chat. Or you want my cellphone num I can pm you.
Hi, I just made a slack account but Iâm having trouble getting in because Iâm confused. Do you need to send me an invitation to get in?
I need your email in order to invite you.
Dude⌠you can just give me your imessage account⌠I have an android phone. But I use macbook. imessage is more convenient. Anyway. up to you
Hey, thanks for your feedback again. I want to ask a few more question regarding the feedback you gave me.
-
You said that I should include in every section I create. But I thought every webpage only have one (at the top of the page)?
-
I am building another website, cloning to be more specific, the thing I wanna ask is that when do I work on the responsive part?? Cos normally the website looks correct on my native screen, (a 1440p monitor) , however if the screen resolution changes, the site becomes all messed up. When do I need to include bootstrap or flexbox?? Can I finish the look of the whole page, then starting to make it more responsive??? Or After every section I finish, I need to make it looks right on every screen immediately. Between these two I donât know which one is more professional/productive.
-
Wat?
-
Different developers do it at different points in their workflow. If you havenât seen it already I highly recommend the course Google teaches on Responsive design over at Udacity, itâll teach you the methodology of responsive design a lot better than I can in a forum post, itâs only a few hours long and free too. Personally, I like to have my markup work on MY screen first and then go back and rework it, but thatâs just me. If youâre working with something like Bootstrap or Foundation, a lot of their classes are already pre-built to be responsive to their respective grid system, so you work it as you go. I love flexbox (and the eventual CSS Grid), so I use that for all my responsive design needs, along with media queries. It takes a bit of hard practice to get right, but youâll get an eye for it in time.
Pro tip though: Chrome and Firefox have a responsive design mode built into their dev tools that I use all the time, it lets u load a tab in pixel perfect dimensions instantly, as opposed to just resizing your browser window manually.
Opps. sorry about the 1st question.
What I wanted to say is that you mentioned every section should has its own header.
But I thought one website only have one header??? Like in this pic??
Ah OK. When I said header, I meant as in h1, h2, etc. type headers, not the actual header tag. Yes Each page should only have one header tag. Each section tag should have an h1 describing the content within, basically like a title. If you have subsections deeper within, you title those with h2, and so on. Sorry for the confusion.
1 Like
Wow. No need to say sorry dude.
I learned a lot just from your comment about my personal portfolio page.