Feedback my code for https://github.com/callum-laing/Portfolio por favor.
Admittedly I haven't touched this in awhile; The last thing I did was remove some unfinished business and add a quick portfolio section + contact section.
I would like to start adding some more as it looks very bare, and is public, so anyone looking at my linkedin, github or website in general are going to see this, which looks like it's been done by a 10 year old.
Generally my posting of this is to get some feedback on how I've built it currently, is there anything I could merge, tweak or remove? (I've been told about min-height: 100% already instead of using 100vh).
https://github.com/callum-laing/Portfolio
33 Replies
Can you post the link please?
edited the original post 😅
No worries! I tried typing it in in my browser but got an error haha
So few issues in my opinion
I think you should make the nav menu have a solid background color, it looks weird overlapped on top of text
Your description text is off center. The red color on your links feels a bit off. Maybe try darker shade of purple? Also your spacing between elements seems off. Look into the 8 point rule
Same thing with spacing here, it's not consistent. 8 point rule
Oh also wanted to say I like what you tried to do with the background to add texture but I think it's kinda distracting
The gradient thing
I think if you added a background color to your cards it wouldn't be as distracting
loads of points to take home, thanks for that! all valid and certainly things I need to tweak
slight color scheme update
ooo, very nice
is the contrast high enough on the cards and the "check it out" text?
Not sure, that bit I'm still umming and arring over, the first page I think is solid though
I haven't messed with the sizing yet which Vince suggested, because I'm way too tired, however the coloring has been changed and the contact form is new (felt very empty before), though I need to hook it up to an actual email address..
https://github.com/callum-laing/Portfolio
https://www.callum-laing.com/
I'm still not sold on the project cards, I'm trying to figure out what color to make the card background, and the button.
Is there a simpler way to position my sections whilst keeping them responsive? I feel like I’ve made it quite complicated and it doesn’t work. When you shrink it down it goes wall to wall, there’s no padding at all on project cards or contact form. It feels quite bad.
something like this maybe?
Doesn't look as good as it could cause I was doing it in browser tools 😂
But hopefully you get the idea
Also I know you've been focused on JS stuff recently but you really gotta work on your html and css *if you wanna get a frontend job
https://codepen.io/vince1444/pen/OJaWEGR
Is it that bad? :/ my js is bad too. Aww man.. I’m not improving much at all and I started 3 years ago…
Vince is giving you a lot of good advice CDL, but one additional thing I would suggest: Right now you are trying to cobble the design together piecemeal, and not looking at the design as a whole
if you want to improve your design skills, my advice is to stop doing the code on this page, and first recreate this design in figma and then make it look the way you want there.
if you do that, you separate the design and code phases of your work, and it is 1000x easier to create that way
That's a fair assessment, and yes Vince has been extremely helpful 🙂 I thought my CSS was alright but looking at this very basic website, it really isn't 😄 I certainly need to work on how I position child elements inside the containers, it seems to be my biggest issue.
the overall layout isn't far off what I currently have to be honest, the projects will change for different ones eventually, and i'll add a skills section somewhere, that's about all I can think off atm..
If someone gave me a template and said hey build that! I'd be fine, but making it up on my own is a lot more challenging 😅
This is exactly my point. If you separate the design phase and make it in figma, then you are literally giving yourself the template, and coding it becomes so much easier
and making designs in figma or some other equivalent software (it doesnt' need to be figma), is a lot easier than trying to come up with it on the spot in your editor
and finally, the reason you really want a unique and polished design is simple: every single aspiring developer has this exact page and uses these exact sections (intro / about / projects / skills / contact). And the only way to stand out, is to organize and display them in a way that catches the eye.
That makes sense. Thanks for that 🙂 I did mess with figma a bit but I'm at work so it wasn't in any sort of depth. I'll give it another shot when I'm home!
no worries 🙂 The worst part about learning the fundamentals of web design is just having to give up the time it takes which most developers would prefer to use on css or js
Absolutely. I am following odin project atm and I do come up to some more advanced html/css soon, which will help me with coding the webpage, but I'll definitely spend some time each day working on getting used to building designs in figma, seems crucial that I understand how to do that!
Maybe I'm being a little harsh. I think if you went for more javascript focused roles your css could be fine, but a lot of jobs I'm applying for (ui developer) I feel like your css needs to be much more polished than what you have currently. The way you write your css seems very newbie honestly; for example you're using explicit widths a lot.
When I get on the computer I'll rewrite a couple of your sections in codepen for you so you can get more constructive feedback.
Also don't get discouraged. I used to write css like you as well, as I'm sure everyone else has too. The only way I made my css more polished was to write a looooot of it. My css is still nowhere near as good as experienced professionals I'm sure too so we both have a lot to learn haha
don't worry, be as harsh as you like 😛 I read it after 4 hours of sleep and was like "I'm a failure!!" 😂
Haha only way to get better is to learn you can get better 😂 worst thing is to think you're hot shit and never improve
Oh absolutely. I'd say another 2-3 months of following this course and I will be able to make a much better page
almost want to keep a save of what I've done up to now and use it as motivation lol
Lol let me see if I can find some of my old css from a year or two ago
https://github.com/v11ncent/vince1444.github.io-old-/blob/master/styles.css
I'm using a lot of explicit widths and heights here pretty much every class has one 😂
That was only a year ago so if you keep at it you'll be writing better css in no time
Ah that isn't too bad, still an upgrade from mine as of right now LOL. I think 2-3 months and I'll be in a muuuuch better place if I keep this consistency going, for sure.
Only have time to do your hero section, hopefully it can be of some help:
https://codepen.io/vince1444/pen/dyQvPxe
Your html was really messy; I find starting from scratch and creating a clean, semantic html structure helps a lot in the long run when creating the css
Also check out:
https://realfavicongenerator.net/
and
https://www.opengraph.xyz/
Helps make really nice social previews for your pages
I'll admit I really had no idea how to create the page, whilst keeping everything in the center (I still don't know why I'm doing this, but it seems to be the trend now, where you leav 20-25% on each side ofthe page)
It's not really a trend it's just what looks best. Try it without 20-25% on each side and let me know how it looks
Also to achieve that effect you don't want to have massive margins/padding usually. How I do it is I wrap the content of each section in a div that has a max-width of something like 1600px, and then make another div inside of that max-width div that has a width of 100%. That way all of your content, no matter if it fills up the div or not, will evenly align side to side and between sections
One of the user interface fundamentals is alignment and that will make your page look that much more professional
So something like:
Edit: Might have missed a style or two but that's the general gist
Oh dang. Hey thanks for a bunch for this help btw @vince , massively appreciated 🙂