I have some previous experience with HTML/CSS, but decided to dig deeper and work through the FCC curriculum, which has been a lot of fun. I recently completed the Responsive Web Design certification and wanted to share my projects with you. I wasn’t able to link all of them individually in a single post as a new forum user, but here is my Portfolio Webpage project, which has links to the other 4 projects for the certification (or just check out my CodePen profile if you’re interested).
Well Your Tribute Page project and Portfolio project are really very professionaly good looking. I just wanted to ask if you are a beginner because even after trying hard I am not being able to make that good design.
Thanks for the compliment @_govindrathi! I am a graphic designer professionally, so my layouts were guided by lots of design experience. Several of these projects started as layouts in Sketch before I recreated them with live code. With some exceptions, I have not needed to use much more than basic HTML and CSS in my work, so it was helpful for me to study the fundamentals a little more closely.
Thanks @logancollman! Ah, maybe you’re right about the nav font. I’ve traditionally been against expressive type for purely functional UI elements but am starting to come around to the other side. So you’re saying there are more typefaces than Helvetica?
Haha, I feel you man. You can always set your fallback fonts to Helvetica, but I think a well chosen Google Font really adds a lot to a sites appearance.
Thanks @_govindrathi! And don’t be disheartened—learning the design aspect is just as attainable as learning to code. As I’m sure you’ve discovered by now, a big part of learning design is mimicking the things about other websites that work well and look good to you. You can do it!
Thanks @kinospro! Ah yes, I noticed that nav problem too but wasn’t sure how small of a screen is too small to matter. If it was going to be a real website I would probably sub the text nav with a hamburger menu or something on mobile so the links can be larger without breaking in the space. Thanks for the feedback!
Really nice! the only thing that I would suggest you change is the text on the first section.
the text that says ‘James cole design and development’. You should have them aligned center or be slowly moving around.
Hey @ConnerOw1115 thanks for taking a look! I think stylistically I prefer using left aligned type on this particular layout, but centered could definitely work too. In terms of having type moving around, I would typically avoid animation that doesn’t add value somehow. I was going for clean and minimalist on this particular layout, so unnecessary animation would be inconsistent from a design perspective. However, I could see how changing the position of the headline depending on the screen size, on mobile for instance, might make the page more dynamic. Thanks for your thoughts!
Beautiful design! Your graphic design background really shows through
I’ve only had a chance to look through this main portfolio webpage (and not your other projects linked on the page too much), but there is one thing that confuses me a bit that might be helpful to change.
Your nav bar has “Recent” and “Development,” but when I click both, they bring me to very close/similar parts of the page. Since both links are similar and the “Development” section is more of a small, call-to-action at the bottom of the page (rather than a large section a user might have to jump to), it might make more sense to scrap the “Development” link in your nav bar.
It might have just been confusing to me because I’m on a laptop rather than mobile, but it took me a bit of time to figure out what “Development” was bringing me to when I first clicked on it, so I thought I should point it out!
Hey @gojanedoe thanks for checking it out! I completely agree with you on the nav bar. Those links are more for placement than anything else (this is where the nav goes, this is how the links are spaced, etc.) but I tried to make it somewhat logical with the minimal content used to complete the project.
If I were designing a real portfolio site I would include more sections on the home page, which would push everything down and make those jump links work a lot better. I might also move contact info to a different page—that little contact area was mostly to break up the color between the CodePen profile section and the footer.
All I can say is WOW! Can’t believe you’re new to Web Development. I am working on the portfolio at the moment; after seeing yours, I’m shy to post mine.
@abelpronet Thanks! Feel free to use any ideas of mine you find useful
@Jeysongray Haha, I’m not exactly new to web dev, but definitely not at an advanced level. My design background is a complimentary skill set. Don’t be shy about sharing your work! Feedback is super important, and sharing your work gets easier the more you do it. Thanks for checking out my stuff!
Finally I decide to fork your Pen and just finished the my Personal Portfolio Challenge. Have the same locking of yours but some extra features. Thanks @jamescoledesign
Can’t believe you’re new to Web Development. I am working on the portfolio at the moment; after seeing yours, I’m shy to post mine.