I want to help an expert helpful web developer

I am new here. I want to help an expert helpful web developer for review my work and guide me or suggestion how can I improve.
My sample work:
http://caela.cf
https://vatia60.github.io/maidul-portflio/

I think your designs could use some animationsā€¦ :wink:

1 Like

Iā€™m def no expert, but I can give a few suggestions that I found useful while I was learning CSS:

  1. Fonts. Keep your fonts minimal so that your webpage looks neat and consistent. Use sans-serif fonts (some popular sans-serif fonts are Helvetica, Avant Garde, Arial, and Geneva) for important content or vital information on your webpage.

  2. Color. Your page loader, in particular, has quite sharp colors that may be painful to look at (I mean that literally, the black/white moving lines and the bright green text over it is painful to look at). The FCC had quite a nice section on how to use colors on your website: https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/learn-about-complementary-colors

  3. I know this is a portfolio which should be a good chance to show off your skills, but personally I think you should refrain from applying such a variety of different hover effects on your elements. They are a little distracting.
    You could instead have a separate webpage inside a ā€œWhat I doā€ section and display all of the different effects and behaviours you can create by using CSS alone, or something.

Not much, these are just some guidelines I picked up from others in the past, but I hope they help :slight_smile:

Edit

Another tip is to look at some professional websites that you like, and try to clone them with HTML & CSS, and JS if you like. This will push your skills in the right direction, plus youā€™ll get plenty of experience.

When you try to clone another website, you magically learn more than you expected because you are faced with challenges and scenarios that no tutorial can really teach in the basics. And for this, StackOverflow has a wealth of knowledge and how-tos you could use as reference.

By following those guidelines you can become proficient in CSS in no time.

Iā€™m not a graphic designer, so I have to depend on other peopleā€™s designs (my own designs look awful!), but I have no trouble turning those designs into a webpage with pure CSS.

Edit 2:
Hereā€™s one of the first websites I created using the above principals. It could use a lot of improvement, but at least itā€™s got the basics :slight_smile:

Yeah youā€™ve got a lot going on thereā€¦and I donā€™t mean in a productive way. When it comes to utilizing css animations Iā€™ve always been of the opinion that ā€œLess is moreā€. Animations are cool and all, they have the added effect of literally showing you can do them. But when you have half a dozen or more going off on one page it shows a lack of restraint. Just because you technically can do it, doesnā€™t mean you necessarily should. Does that make sense?

While yes you totally want to showcase your skills on your portfolio site, let your work/projects do the talking for you.

Since youā€™re looking for advice:

  • Nix like 80% of your animations (especially that opening flashy, stripey, bar thing).

  • Iā€™d say stay away from the totally black background. Dark colors can be great when used right, I find they do an awesome job of making lighter contrast things pop (especially when it comes to project images), but again keep that less is more idea in mind.

  • Iā€™d also ditch the image background on your menus, itā€™s just giving things a real 90ā€™s, Angelfire/Geocities sort of feel. Which means dated. Take a look at what recent portfolio sites/designs are doing. You donā€™t have to 100% copy them but itā€™ll give you a feel of whatā€™s popular among your competition.

Speaking of improvements, your site just asked me to do that when I looked at it! :stuck_out_tongue:

Hey, I did mention thatā€™s one of my first websites lol ^.^

Actually the reason itā€™s kinda contrasting is cause I wasnā€™t sure which background image I wanted at the timeā€¦The first option was a stunning bluish wallpaper that depicted our city, but that was def too much bling. The next choices were this one you see, and some other shades which went better with the white text.

But thanks for the headsup, it sure looks better this way, Iā€™ll keep it! :slight_smile:

I know, I know. I just like messing with some designs when I see them, give them more style :stuck_out_tongue:

I have some things that I worked on ages ago and havenā€™t touched them since. Itā€™s actually a pretty cool way to validate how far youā€™ve come if you just spend some time with them using all that youā€™ve learned and then compare with the ā€œfirst versionā€ :slight_smile:

Definitely. Another thing I like doing is, while building a project, after every ā€˜majorā€™ change in design or structure, I create a full copy of the folder, call it the name of the project with its date, and leave it totally untouched. Just for keepsake.
The best part is when you come back to a project you done Ā± 1 year ago and laugh at yourselfā€¦And then feel a little proud that you can actually laugh at yourself :slight_smile:
Most of my projects have about 10 folders nowadaysā€¦And believe me, there are huge changes between folder 1 and folder 10 lol

Thanks everybody for helpful advise.

Thatā€™s even better, gives you more stuff to compare and look back on! Iā€™ll start doing this as well.

I pretty much feel the same, proud that Iā€™m able to complete something in a few hours, when it first took me a day or two. Everything comes so much more intuitively now :slight_smile: Still a lot more to learn though haha.

1 Like