New learner so need feedback

[Souranil21 chakraborty]

New learner need opinion. I know this may be a bit out of topic but this is the page that i created while learning web development so need your opinion about the design and overall look creating animations and transitions so right now a bit simple in terms of interactive nature. it's like a webpage for my ownself. not going to host it cause still a lot i have to learn but give your opinions

 

[Biohazard777]

1 hour ago, Souranil21 chakraborty said:

New learner need opinion. I know this may be a bit out of topic but this is the page that i created while learning web development so need your opinion about the design and overall look creating animations and transitions so right now a bit simple in terms of interactive nature. it's like a webpage for my ownself. not going to host it cause still a lot i have to learn but give your opinions

 

- You are on your way to becoming a dev... so please, for the love of God, screenshot . Unless you absolutely must take a pic of your monitor (like capturing a dead pixel or an OSD menu), you should be savvy enough to present your work properly.

 

- Fonts... I personally am not a fan of "handwriting" type of fonts (bad readability), some people are (like you) so that is subjective, but whatever your (or your client's / employer's) preferences are, try not to mix them too much: like that "Welcome!" and then "Projects" in the top nav bar.

 

- "Full stack" , have you've actually done some proper backend work that we don't know of ? If you haven't, then do consider removing that part.

 

- Layout looks ok. But without code I have no idea if it is responsive or not, as in will it break when displayed on a screen with different orientation / size.

 

- That white background behind HTML, CSS, JS logos... I get it, fully transparent logos probably wouldn't work with that grey gradient you've got going on... unless that is just a really shitty screen and I see a gradient instead of a flat grey because you took a pic with your phone instead of taking a screenshot hah. Anyhow that white rectangle is really sticking out in a bad way, I'd probably do something about that.

 

Now please don't get me wrong, for a beginner, it ain't bad at all. All my comments above are meant as constructive criticism so that your page (and you) get even better .

[Souranil21 chakraborty]

2 hours ago, Biohazard777 said:

Layout looks ok. But without code I have no idea if it is responsive or not, as in will it break when displayed on a screen with different orientation / size.

I know that i am working on to improve. I am preparing it as an competition. We are having a competition among our college friends that's why.

[Souranil21 chakraborty]

2 hours ago, Biohazard777 said:

Full stack" , have you've actually done some proper backend work that we don't know of ? If you haven't, then do consider removing that part.

Nope that's just for an example not really i am very much a begining learner just learned a good amount of html and css but still stating to learng js. I am not going to host it to in the near future but someday i will i guess.

[Souranil21 chakraborty]

2 hours ago, Biohazard777 said:

That white background behind HTML, CSS, JS logos... I get it, fully transparent logos probably wouldn't work with that grey gradient you've got going on... unless that is just a really shitty screen and I see a gradient instead of a flat grey because you took a pic with your phone instead of taking a screenshot hah. Anyhow that white rectangle is really sticking out in a bad way, I'd probably do something about that.

Hey can you help me in that ? I don't know how to make that part good. Can i just take a transparent pic and melt it with the background? Is that an option in html or css. Also that is a gradient not a shitty screen.

[Biohazard777]

12 hours ago, Souranil21 chakraborty said:

Hey can you help me in that ? I don't know how to make that part good. Can i just take a transparent pic and melt it with the background? Is that an option in html or css. Also that is a gradient not a shitty screen.

You can use a transparent image, no additional css rules needed. You would just need an image that has transparency (not jpeg, like a png with alpha channel). Though your current image has black labels above logos, you'd want those to be white. An image like this one:

That is what I would do, change the image.

End result:

Only if I had no control over image being used would I resort to a CSS rule, like say a profile picture on the forums where the user uploads his own content. In such a case you could use "mask-image" for example (https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image , https://www.w3schools.com/cssref/css3_pr_mask-image.asp).
Make a css class like so (fiddle with the values until you are satisfied with how it looks):

.my-mask{
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 46%, transparent 50%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 46%, transparent 50%);
}

then apply it to your image <img class='my-mask' src=...

End result:

 

IMHO both look better than the original white square .