Did this small one page site for a friend that does music. It's just like an introductory site. Nothing big.

I used about 250 lines of HTML, 900 lines of CSS and 300 lines of JavaScript.

Rate my colour pick, responsiveness and anything else.


https://bandittude.netlify.app/

iLearner:
Did this small one page site for a friend that does music. It's just like an introductory site. Nothing big.

I used a about 250 lines of HTML, 900 lines of CSS and 300 lines of JavaScript.

Rate my colour pick, responsiveness and anything else.


https://bandittude.netlify.app/

Don't know how skilled you are but you did a really great job though.
But you could improve your work with some frontend framework and gain more inspiration from other website with more sleek UI than yours. They are littered all over the net

stanliwise:
Don't know how skilled you are but you did a really great job though.
But you could improve your work with some frontend framework and gain more inspiration from other website with more sleek UI than yours. They are littered all over the net

Thanks thanks

I'm not really skilled like that.
I'm only just trying to master HTML, CSS and vanilla JavaScript for now.

In the next few weeks, I'll be looking forward to diving into ReactJS.

LA click la bend

bunnaes:
LA click la bend

Who u epp ?

Nice work....how did you go about the animation

arejibadz:
Nice work....how did you go about the animation

Thanks.

I used the CSS transition and transform, and powered it with JavaScript IntersectionObserver which allows the animation gets triggered only when a user scrolls to that section of the screen.

iLearner:


Thanks.

I used the CSS transition and transform, and powered it with JavaScript IntersectionObserver which allows the animation gets triggered only when a user scrolls to that section of the screen.

can u please post d code

Trashy, you can do better
evrything is just off . . color choice, color depth, UI . .
form doesnt validate inputs, too much white space, too large images, not compressed
no padding, margins, etc

p.s. take this as constructive criticism to make you better and not a jab

arejibadz:
can u please post d code

I'll post it when I charge my PC

cixak95211:
Trashy, you can do better
evrything is just off . . color choice, color depth, UI . .
form doesnt validate inputs, too much white space, too large images, not compressed
no padding, margins, etc

p.s. take this as constructive criticism to make you better and not a jab

I didn't intend to make the form validate for now. Like I said, it's just an introductory page with simple HTML, CSS and JavaScript, and won't be serving any official purpose yet.

Highlight the parts that have no margin and padding so I can correct.

About the images, the friend I did it for said she wants a full screen slideshow, so I just left the pictures the way they are.

Thanks.

arejibadz:
Nice work....how did you go about the animation

Add class of "fade-in" to everything you want the animation to take effects on.

iLearner:


Thanks thanks

I'm not really skilled like that.
I'm only just trying to master HTML, CSS and vanilla JavaScript for now.

In the next few weeks, I'll be looking forward to diving into ReactJS.

How did you create that loading effect? Did you do the back end too? How did you come about the hosting?

ehinmowo:


How did you create that loading effect? Did you do the back end too?

Nope, there's no backend at all.

The idea is to have the proloader remain displayed until everything on the page gets loaded.

iLearner:


Nope, there's no backend at all.

The idea is to have the proloader remain displayed until everything on the page gets loaded.

How were you able to host it in such a way that I could get to it from here? From Nairaland.

Nice animations, i like d preloader aspect also. BUT some things need to adjusted, the images are not fully responsive e.g, the hero section images stretches (samsung tab).

QuantumR:
Nice animations, i like d preloader aspect also. BUT some things need to adjusted, the images are not fully responsive e.g, the hero section images stretches (samsung tab).

Thanks for bringing this to my notice. I'll work on making it responsive on the Samsung Tab.

Btw, what's the width of the tab?

ehinmowo:


How were you able to host it in such a way that I could get to it from here? From Nairaland.

It's easy.

Go to netlify.com and open an account.
On your dashboard, click on deploy.
Drag and drop the folder containing your work into the deployment area, and that's all. You'll be given a URL which you can edit. You can as well buy a custom domain for your site.

iLearner:


Thanks for bringing this to my notice. I'll work on making it responsive on the Samsung Tab.

Btw, what's the width of the tab?

I dnt knw d exact width, buts its a 9.6inch display

iLearner:


It's easy.

Go to netlify.com and open an account.
On your dashboard, click on deploy.
Drag and drop the folder containing your work into the deployment area, and that's all. You'll be given a URL which you can edit. You can as well buy a custom domain for your site.

Thanks

iLearner:


It's easy.

Go to netlify.com and open an account.
On your dashboard, click on deploy.
Drag and drop the folder containing your work into the deployment area, and that's all. You'll be given a URL which you can edit. You can as well buy a custom domain for your site.

Nice one, which IDE are u using

Nice work

QuantumR:


I dnt knw d exact width, buts its a 9.6inch display

Thanks. I'll work on it

Akiliogidi:

Nice one, which IDE are u using

Thanks.

Visual Studio Code

eoeefosa:
Nice work

Thanks

iLearner:


Thanks.

Visual Studio Code

Ok, downloaded both vs code and visual studio, finding it difficult to code in cshtml/asp.net web app. So for now i am sticking to plain html on vsc, but i still want to code in asp.net core web app