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ā¦
Iām def no expert, but I can give a few suggestions that I found useful while I was learning CSS:
-
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.
-
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
-
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
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
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.
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!
I know, I know. I just like messing with some designs when I see them, give them more style
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ā
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
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 Still a lot more to learn though haha.