Hi, take a look at my portfolio! Constructive criticism needed

Hello, I would like it if you all would take a look at my portfolio project. This is my first try. (I will be editing/revising down the line as I learn more) I welcome all feedack, positive or negative, as long as youre nice LOL.

Here Goes: http://codepen.io/mskatrinabrown/full/WGKzqq/

Thanks in advance!

-Katrina, PC Technician - Computer Science student

Very professional but all the writing is on top of each other on my tablet

well i am nice … so commenting to give feedback … unfortunately negative feedback … but being your first try … take it as constructive criticism and me trying to help.

will start with the color … while the web page color is fine and goes great with the main image the text color is not and makes reading it and in some cases seeing it extremely difficult … the text color needs a lot more contrast to stand out against the background color.

And while the page mostly looks good at full screen size on my laptop (payment options and card icons are just starting to move into portfolio section when i look at it … may not be the case on a larger screen) Its not a responsive web site and when you start to make the page smaller every thing falls apart.

Now maybe the idea was to build the page and when you learn more refactor it so its responsive if so you have a good start and should look good when made responsive.
if this was not the idea though … you have a problem and need to work on the responsive aspect. As i dont use bootstrap cant advise here … as i use media queries and some flexbox … but what i do is start at mobile size create a section and build it out to large size . while doing this i use the developer tools in chrome to look at how the page looks on different devices to make sure its scaling properly.
ok thats it please dont take this as being negative but as constructive criticism … you have a good page overall to work with just the responsiveness not working is a big issue.

Hi there Katrina, Looking good I like the pink. 2 issues on my end

  1. Overlapping elements can make text harder to read, to resolve this you need to look into bootstrap grid classes. for me by adding ‘col-sm-12’ fixes this but also be sure to add parent element with a class of ‘row’

  2. Separating and refactoring code can make things easier to reason about. I would make separate css classes to select multiple elements than use inline.

  3. for links if you want to open them in a new tab, in html you can add the attribute, this way your links will codepen friendly

<a href="https://facebook.com", target="_blank">

Finally regards to your skills in PC repair, and good luck with in studies

Regards Jono

Thank you for the feedback! … and I wholeheartedly agree with the responsive issue because I was having some trouble with the smaller screen views myself. After seaching for solutions, I still couldnt fix it for some reason; it was weird. Bootstrap is easy but difficult at the same time LOL. At least the font would be an easy fix. I never really considered starting at mobile size then building it out so Im gonna try that.

I have no idea what media queries and flexbox is, but I definitely wanna look into it.

Again, thank you so much for the feedback :slight_smile:

Thank you for your feedback! …

  1. I agree because I was having trouble with the smaller screen views myself. Do I add ‘col-sm-12’ even if I dont plan to use columns for that section? Or maybe I’d still have to add a row and see what happens on mobile. :slight_smile:

  2. For some reason, (I dont know if it was a Codepen issue or something was overriding it) but when it came to styling additional sections and text (other than the body and intro section), CSS would not work! I was forced to style them inline. It was racking my brain. I was looking over my code so many times to see what the problem was and couldnt find it…and thanks for the link tip! I was wondering about that LOL

Again, Thank you for your feedback!

1 Like

Thank you for your feedback!

Yes, I agree. I was having some trouble with the mobille screen views myself. Im currently working on fixing it, anf I am looking more into the Bootstrap grid system.

Again, thank you for the feedback!

I have been reading, and hearing a lot about the use of the hamburger menu and how people use websites. To sum it up, fewer clicks are better than more clicks so the hamburger is best used for the mobile version of the site, if at all. We, as designers and/or developers may love the way the hamburger elegantly cleans up our pages, but they kind of hinder real world use.

Wow, thank you for letting me know. I didnt know that. Its funny because as I was viewing my portfolio over and over, I started to find it rather annoying LOL. I will take your advice. :slight_smile:

Thank you for your feedback!

Hi! I like your page!

  • Probably CSS seemed not to work because it had been overridden by your inline styles: you should always avoid them because they do not comply with the SoC principle, and your code risks to become really little scalable (i.e. if you will decide to change your navbar’s font color you must change the color of each single word).
  • You can fix the overflow of the contents of different sections just by removing the fixed percentual height from each section.
  • The big code icon on small devices overflows out of the screen: you should set for it a relative font-size (maybe in vw instead of px). If you want to have the -enter- button at the bottom of the viewport you just have to set an absolute positioning to intro-body class.
  • For your portfolio items you should avoid the use of that nested divs: you could replace them with <figure><img><figcaption>, setting the col-*-* classes within the <figure> tags.
  • I would have added a background to the navbar beacuse, specially on small devices it ise hard to read its voices.
    I tried to be as constructive as I could. Hope this could be helpful.

Sorry for the delay, havent been on in a while. Thank you so much for your feedback!!! I really appreciate your advice and try everything you said. You provided so much insight. Again, thank you :slight_smile: