My Finished Project

Code Feedback
1

Hey fellows,
I just completed my Portfolio Webpage, would love some feedback on it, you can let me know about your feedback through here or throught the contact form in the site, i spent a good amount of time researching and trying to make it to work properly (and i only made it to work so good because another FCC collegue told me about this wonderfull service for forms in the help chat xD) so would love some beta-testers hehehehe

2

Do you have a link to the project?

3

@jstewart8053 Iā€™m sorryā€¦ I forgot xD

Itā€™s late over here, or should i say early in the morningā€¦ hehhehe

Corrected in OPā€¦

P.S.: donā€™t care about the bad logoā€¦ Design is not really my thing xP
I will most likely need to get a Illustrator + Phtoshop course somewhere later xD

4

No worries! I am always up way to lateā€¦ Okay, I looked at your Portfolioā€¦ and I am no expertā€¦ I have been coding for 1.5 years, but have been doing design projects with Illustrator, Photoshop, Publisherā€¦ like Newsletters, Business Cardsā€¦ that kind of thingā€¦ for over 10ā€¦ (donā€™t ask my age!) Just to let you know who you are getting advice fromā€¦ I :grinning:like to think I have an eye for designā€¦ so most of my suggestions will be based on design.

  1. I love the blue in you siteā€¦ it is really soft, clean and easy on the eyes. However, blue on blue is a little much. I counted 4 different versions of blue. Color palettes are really hard to come up with, but luckily there are a ton of color generators to help out. A popular one being, Googleā€™s Material Design Palette. https://www.materialpalette.com/

  2. The work you have done in your Portfolio section looks like it is really good, but I can barely see it. I would possibly insert an Iframe from those sites, so users really get a good look at this work! Orā€¦ get new images that are larger, with better resolution, so the pictures are clear, and show detail. Same suggestion with your logo in the header. Also, make sure to include links to these pages you have done, so users can ā€˜walk-throughā€™ your past work. The logo on your container in the upper right corner needs to be brought up more, or your ā€œAbout Meā€ section needs to be lowered. Your content should begin below your logo.

  3. The container idea you used looks really clean, and you have nice shadows, making it look crisp, and modernā€¦ I think using a contrasting background color (like gray) would really make it pop! I think that same container design could be applied to each section in your portfolio, perhaps as a background to the text content. I would use a light color, and only about 60-75 percent transparency if you did use containers. Also, justify the text in each section. And make the border-radius the same as you did in your original container. Having those mini-containers (trasparent-ish boxes, with rounded corners, and the text within justified) behind each of the different sections will really help to make the page look organized, sharp, and well-put together. Also, make sure you export your text to a grammar/spelling checker. You have grammatical errors like lower-case ā€˜iā€™ rather than ā€œIā€ and some spelling mistakesā€¦ just common stuff we all do, but others notice and judge.The biggest change in grammar you should make is with your logo. You have the word ā€œProblemsā€ capitalized, but not the word ā€œsolutions.ā€ You donā€™t want peopleā€™s problems to seem bigger then your solutions :slight_smile:

  4. The form you built is a really good start, but you could build a form on www.jotform.com for free, and you donā€™t need to use a bit of coding. Iā€™m not promoting using generators, but it really helps come up with a good outline/base for you to build upon with your own codeā€¦ and it takes just minutes.

  5. My last suggestion is for you, but also for anyone making a portfolio site that will be seen by potential employers. If you say in your profile that you can do Javascript, or SVG, or Canvasā€¦ or whatever it might be, then include it in your portfolio. If you have these skills, show them off where it counts. Even if you just add some event listeners in JS for hover effects, IMOā€¦ it is better than having no JS, yet listing it as one of your main skills. Like if an artist says they can create pencil, chalk, and oil paintings, but then has no oil paintings on his portfolioā€¦ would you really believe he was talented in that area? (For the sake of argument, letā€™s pretend oil paintings are way harder than pencil and chalk). You would be likeā€¦ show me the money! And remember, if you have any other artwork you have done in the past like graphic design, photography, even Newsletters, you can put those in your portfolio as well. And in time, you will fill the page up!

I forked your portfolio page on CodePen, and added some color I thought you might like, and enlarged the pics on your site, just to give you an idea of the size that is viewed best from a desktop. Feel free to keep the changes, revise, or ignore them. And please know that words donā€™t convey tone very well, so any suggestions from me are meant in the most respectful, and helpful place within me. Donā€™t mistake the suggestions as criticism, I think you are off to a great start! Keep up the good work! Let me know if you have any questions or need any help! Remember to click ā€˜edit on codepenā€™ to really get a good look at revisions I madeā€¦ the viewer isnā€™t all that great that CodePen has us embed.

See the Pen gpedro Portfolio by Jen (@jstewart8053) on CodePen.

5

Overall ā€œlook and feelā€ is really nice, but there are quite a few strange things going on in the code, many of which are affecting appearance and functionality. Iā€™ll avoid repeating those that @jstewart8053 pointed out above.

  • Your nav buttons all have the same id attribute. Each element should have either a unique id or no id at all.
  • Youā€™re using <b> tags, which breaks web design best practice. Keep the styling in the CSS.
  • Your nav buttons donā€™t point where they should on the page. I canā€™t quite work out what the rationale is for the placement of the anchors, but really you want them to be pointing to your <h2>s, which signal the start of their respective sectionsā€¦ however, this breaks when you have a top nav bar with position: fixed. There are a few workarounds for this. My preferred one is something like this:
h2::before {
  display: block;
  content: " ";
  height: 60px; /* Depends on nav bar height and how much space you want above */
  margin-top: -60px; /* = 0 - value of `height` */
  visibility: hidden;
}
  • If you point your nav buttons to your headings, youā€™ll no longer need <a> tags to anchor them at all. You can simply anchor them to the id attribute of the headings. This kinda blew my mind when I discovered itā€¦ but it makes sense when you consider that the syntax uses #.
  • Your nav bar is 101.6% wide instead of 100%, which is whatā€™s pushing your leftmost navigation button right up against the edge of the screen (on larger screens; there are other problems on medium-sized screens - see below).
  • Iā€™m not an expert on bootstrap column behavior, but your use of col-md-n seems to be causing strange things to happen on mid-sized screens (try resizing the browser). Perhaps simply aligning the buttons to the right would be better?

Also, from a personal branding point of view, make sure to proofread your text before presenting it to prospective clients.

6

@jstewart8053 @lionel-rowe
First of all, thanks for the feeback, i really appreciatedā€¦ I was pretty sure i would have a few typos in there since my english is far from perfect and i didnā€™t asked no one to proof-read itā€¦

@lionel-rowe i will try to keep the formatting all inside the CSS then, i wasnā€™t aware it would break the best praticesā€¦ Regarding to the nav buttons your advice is pretty mind blowing, yes (lol), I tried to make the anchors to show the text inside the h2 too although it was hiding it, that is why my first nav button points to the #top and not to the About title, i will have to work a bit more on it to try and figure out the best looking setup. ;D
Regarding the navbar being 101.6% was because if i put it at 100% it would not fit the entire screen wich i found odd but after playing a bit with it, the 101.6% was the best setup i had come up with, and in my screen it is fitting the entire screen perfectly (with no horizontal scroll bar) even if i play with the browser window width, can you say if you saw a horizontal scroll bar? o.O
I have to play a lot more with the bootstrap functionalities and i just made it to mid-screens, since i didnā€™t lose time right now with make it mobile friendly but it is in my to-do list for a future reviewā€¦

@jstewart8053 Regarding the pallettes i was not 100% convinced i made the right decisions and thanks for your suggestions on this, i really liked the gray you putted in the background of your fork, i will most likely borough it to my refurbished portfolio page :stuck_out_tongue_winking_eye: And thanks for that link for the palettes, it will come in handy many times for sureā€¦
Regarding the portfolio section, when you say you can barely seeing it, you mean because is too small? I was thinking in put it with a legend saying the skills used and then (the JS part wich is not implemented yet xP) make a popup with some extended preview of the site instead of having the images linking directally to the websitesā€¦
Regarding ā€œYou have the word ā€œProblemsā€ capitalized, but not the word ā€œsolutions.ā€ You donā€™t want peopleā€™s problems to seem bigger then your solutionsā€, you are absolutely right, OMG i am not sure how i missed it, since i am usually a big critic about this kind of things (it may been the late hours) LOL, thanks for noticing and i will fix it in my next review,
Regarding the containers and shadows, i thought i should not have a big difference in colors because i was worried it to be too much contrast between things, and tried to kept the colors all in the same scale, looking at your fork i now understand how that contrast can be good, and i will try and use it better next timeā€¦ Regarding the spelling, like i said, english is not my first language so i should provably use a lot more Grammarly and ask someone with native english to review the text for me, i will make sure to correct thatā€¦ ;D
Regarding the forms i didnā€™t knew about www.jotform.com although i used https://formspree.io/ wich doesnā€™t really give you different templates to your forms but gives you a way of receiving the replys in my e-mail, like i now see www.jotform.com doā€¦ I will dig deeper into that and see if i come up with something betterā€¦
Regarding the JS tip you said, it is in my to-do list to put a series of things including a drop down menu (wich should be shown to mobile devices when its done) and some popups, although it already has a little JQuery script on the top of the html for add the page as bookmark/favorite because even if it was not requirement for the challenge i knew i would not want to put ā€œi know JSā€ and donā€™t put a single line of JS code in there :stuck_out_tongue_winking_eye: but it will have more JS in the next review for sureā€¦
Regarding the graphic design i donā€™t have anything made really, since i never interest myself by that, i actually have some friends that are A LOT better than me with that and i plan to partner with them when i will need some graphics work done for a clients project or something, but i will certainly need some basically (at least) knowledge in that field so if you could recommend me some good tutorials or even something like a FCC for graphics design i would love to watch themā€¦ xP

I will also have a better logo before put this site on air, but i want to have also a better portfolio before i do itā€¦
I am also thinking in make my portfolio including my all CV in all the fields i already worked, since it may come in handy sometimes and i think i am not finding a job in this fields at the moment because my CV is ā€œtoo normalā€ even if the content of it is not that normal LOL, and i think that when companies see a CV being presented in a much different and ā€œfreshā€ way it shows a lot about your verstility and what you know, aswell as presenting much better your skills in different fields.
@jstewart8053 @lionel-rowe Do you agree with me on this or do you think i should make it in different pages and not the link the different fields CVs?

7

@lionel-rowe Really, really, good advice ! Iā€™m going to stalk you out when Iā€™m done with my portfolioā€¦lol! :blush:
I had a question for youā€¦I read your code above for positioning, but what do you mean by, you will no longer need the ā€˜aā€™ tags? Iā€™m basically wondering if you can give me a brief example of how you code the web page to scroll to that section when the user hits the link in the nav? I have been wondering how to implement that feature in my own portfolio.

@gpedro First off, thank you for taking the suggestions so positively! Iā€™m always hesitant to to make suggestions to people, in fear they make take it the wrong way. You have a great attitude, and I know companies really like people who can handle constructive criticismā€¦ In my resume introduction or in the bullets section, I always put something like ā€˜can handle constructive criticismā€™, 'follows directions the first time, ā€˜attentive note-taking during training,ā€™ ā€˜Not afraid to ask questions, and learn from others.ā€™ I know they may not be traditional quotes you would see in CVā€™s, but employers eat it up! They always mention it during the interviewsā€¦ I just thought Iā€™d bring this up since you were talking about including your CV (which I think is an awesome idea) and your great attitude.So yesā€¦ I think you should include it! I think no matter what experience you have, you can find a way to apply it Developing, skills likeā€¦ problem solving, working with teams, working with computers in general, working independently, etcā€¦ those kind of things apply to a lot of fields. I would just rephrase your CV in a way that shows similarities between your past jobs, and Web-Developing.

Sorry for not clarifying before, yesā€¦ this pics on your page were too small. Keep in mind, Iā€™m on a desktop. Have you thought about uploading the images to DropBox and then linking them? That way you can maintain a clear resolution, and set the picture size according to the device that is viewing your page in the meta tag. Or maybe Bootstrap handles that partā€¦ I donā€™t use Bootstrap, so Iā€™m not sureā€¦ I use plain CSS Flexboxā€¦ They are the BEST new CSS feature! They would make formatting your page a hundred times easier. It took me literally one hour to learn how to set layout a responsive, website with Flexbox. Plus, way less coding, and much easier to implement. (oh, and you can always use an i-frame).

The palette colors on my projects are really something I struggle with, because Iā€™m so indecisive. So I have a bunch of links to help me come up with colors. I think contrasts catch the viewers eye, but on the other hand whitespace, and subtle simplicity is also really sleek. I think it just depends on the project. You should go with the color palette that you like most, even if itā€™s not my idea :slight_smile: I think there are parts of design, like colorā€¦ that reflect our personalities :slight_smile: Just having a palette of set colors when you begin your CSS, makes things so much easier, and saves so much time. . (I will post my fav. links in a separate reply, for readability) Iā€™ll list a few more for you, so you can have some optionsā€¦ One thing I do that really helps me find all my favorite sites for developing is to create 4 folders on my bookmark bar in Chrome. I have a CSS, HTML, JS, and a Portfolio folderā€¦ So whenever I find helpful info, cheat-sheets, or inspiration, I just save to those folders. In no time I had lots of helpful resources, so I could save time on projects, and never have to start with a blank plate. Just an idea :slight_smile:

As far as your grammer goesā€¦ English is incredibly hard, and really weirdā€¦ as time goes on, you will natrually get better :slight_smile: You can check your spelling and grammer online with a Chrome app, or Microsoft Word online, or just Google it :slight_smile:

Please let me know if you have any other questions, and post the finished project!

1 Like
8

Links:
https://www.w3schools.com/cssref/css3_pr_filter.asp (CSS Filters.)
https://www.slideshare.net/DavideDiPumpo/understanding-flex-box-css-day-2016 (Flexbox SlideShowā€¦you may have to create a loginā€¦ itā€™s free though, and they have slides on every subject!)
http://the-echoplex.net/flexyboxes/ (FlexBox code generatorā€¦ really great for getting the feel of Flex.)
https://material.uplabs.com/ (Material Design Inspiration)
http://www.wifeo.com/code/39-css-material-design-button.html (Beautiful CSS buttons, layouts, everything!)

1 Like
9

Thanks for your advices, first off allā€¦ I found bootstrap to be pretty confusing tbh so i will search more about using the FlexBox aswell as using the links you provided, thanks for that!

Regarding the english, i have been learning a lot of english just by using it mostly in the last year (even if I learned English in school my accent and vocabulary were never that good and languages was never a thing i was good at, even if i was never a student of negative grades :smile: ), because tbh i have read and write more english in the last 9 months than i talk Portuguese (hahahha) since the forums i use are all in english and i am involved in a Developper Team of a Cryptocurrency called Burst (for wich i made a Portuguese wordpress website wich is in my portfolio page), so i actually have some speech conversations aswell and they have to be all in english since no one in there really speaks portuguese LOL but I actually already installed Grammarly in the PC I use mostly and I will give it a lot of use :smile:

I have a lot of changes I plan to do in the portfolio site, based on your and @lionel-rowe feedback aswell as some other ideas i got since i made the site :wink: and i already have more projects done to put in there since now i am already doing the Advaced Algorithm Challenges so i made all the other projects until i got here (when you read in the site that i am a fast learner i was not kidding :wink: hehehehe) will defenetly let you know when i am done with itā€¦ I plan to do this changes aswell as turn all my projects responsive (mobile friendly) once Iā€™m done with my Front-End Certificate wich is not that far already! :wink:

Regarding use folders in the bookmarks with different stuff i already do that for many years now but is always a pleasure to put more valuable links in there, so thanks for yours suggestion, they will come in handy many times :smile:

Regarding the skills you talked about regarding the attitude, I found them as pretty good skills for have in any field we work atā€¦
I once had a company and one of the most important things i tried to capture in interviews was the availability of the person to learn new stuff (if they were opens to it or not), their attitude (if it was positive, if it was a open person, if they donā€™t are afraid to ask questions, etc.)ā€¦
Regarding how often persons take notes, i donā€™t like to avaliate regarding that because it depends a lot from person to person, the way they learn betterā€¦
For instance, me, i almost donā€™t take notes because i learn better and faster by listening and if i am writting i kinda lost more attention that i could be using for listening and understanding. This donā€™t mean i donā€™t take notes but if you go see my notebooks from classes i almost didnā€™t used any pages LOL, i used literally one notebook per 3 years per class in highschool, in most subjectsā€¦ Iā€™m a good adept of ā€œIf i understand it i will never forgetā€, provably one of the reasons i was not a very good student in subjects that required you to study a lot like History or Philosophy, although i was a pretty good one at more technical and logical things like Math, Technical subjects, Physics or Chimstry! :smile:

10

@jstewart8053 All you need is an element with an id tag (e.g. <a href="#my_bookmark">Click me to jump</a> <h2 id="my_bookmark">Page Will Jump Here</h2>). Iā€™ve done this for my own portfolio, along with the CSS hack I described + some jQuery magic to provide smooth scrolling (topic).

@gpedro Massive respect to you as an ESL learner - English certainly isnā€™t the easiest second language to learn! There are certain things you can do to instantly improve your copy without too much effort, the first of which is running it though a spell checker (MS Wordā€™s does the job decently, and Iā€™ve heard good things about Grammarly too, though I havenā€™t tried it yet myself).

1 Like
11

Thanks for the respect :smile: :wink:
Although i think it would be a lot harder for someone with English native language to learn Portuguese tbh because our vocabulary and grammarly is so extense that it would take him/her ages to get the job doneā€¦ :wink:

BTW i loved your smooth scrolling and will have to dig deeper in your code :wink: