I want to help an expert helpful web developer

I want to help an expert helpful web developer
0

#1

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/


#2

I think your designs could use some animations… :wink:


#3

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:


#4

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.


#5

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


#6

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:


#7

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:


#8

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


#9

Thanks everybody for helpful advise.


#10

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.