₦airaland Forum

I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

Let the challenge begin.

You can replicate this

Tim1212:
You can replicate this

Just saw this now. Give me 30 minutes.

Devdevdev:
I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

Alright, try this out, just the UI

Lol, devdev don vex

Devdevdev:
I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

Confused here. Please isn't Vanilla CSS a framework on its own??

JsScript:
Alright, try this out, just the UI

Men this UI no be here oo. For me, It can be done, but no be 30 minutes something. I'd need time to think and articulate.

If OP pulls the exact replica of this in 30 minutes, then he's very good.

Here, try this. I'd need an animation on the burger, i want it slightly tilting or moving left and right.

majesticguy:
Confused here. Please isn't Vanilla CSS a framework on its own??

No. Vanilla css is pure css without any framework or library

Tim1212:
You can replicate this

Finished it.

I used pictures of Genevieve Nnaji, Lota Chukwu and Queeneth Hilbert as the photos.

The node thing in your background is an svg and i dont have it. But i pretty much got everything else spot on.

majesticguy:
Here, try this. I'd need an animation on the burger, i want it slightly tilting or moving left and right.

I need the image of the burger. Do you have it?

Devdevdev:
I need the image of the burger. Do you have it?

No, just look for something similar.

Devdevdev:
No. Vanilla css is pure css without any framework or library

Alright, thanks for the clarification.

Devdevdev:
Finished it.

I used pictures of Genevieve Nnaji, Lota Chukwu and Queeneth Hilbert as the photos.

The node thing in your background is an svg and i dont have it. But i pretty much got everything else spot on.

Nice one. But I think the image is lacking box shadows.

And observe carefully, box shadow for the first and second image are the same, while the last image's box shadow is quite different from the rest.

majesticguy:
Nice one. But I think the image is lacking box shadows.

And observe carefully, box shadow for the first and second image are the same, while the last image's box shadow is quite different from the rest.

I didn't even notice the box shadow on the images.

I'm almost done with the second challenge, but as you can see my battery is low. I'll finish when I charge my laptop.

majesticguy:
Nice one. But I think the image is lacking box shadows.

And observe carefully, box shadow for the first and second image are the same, while the last image's box shadow is quite different from the rest.

Not even that, the gradient are not the same.

JsScript:
Alright, try this out, just the UI

Just finished this.

For those expecting me to get the colors 100%, you guys are funny. I may have the time to test my css skills with your challenges, but i sure as hell don't have the time to test all the millions of color combinations to find the exact color you want. Usually in production, the design team provides those.

By the way, I have only been learning CSS for 2 months.

Tim1212:
Not even that, the gradient are not the same.

Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was made in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

Devdevdev:
Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was make in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

You really tried... Here's mine though I spent close to 2.5hrs

Devdevdev would like to jump onboard with a startup?

Devdevdev:
Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was made in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

Bro am no longer with diib, but the fact you use a female gender on Nairaland is quite annoying.

I can show you my recent project. You can't just take correction.

Devdevdev:
I'm almost done with the second challenge, but as you can see my battery is low. I'll finish when I charge my laptop.

WOW! Kudos....Ji si Ike.

kennethfranc:
You really tried... Here's mine though I spent close to 2.5hrs

It's ok bro, nice job. I think I'd spend the same time you did in trying to replicate the UI.


Although your font size and family seems kinda a little out of place, when compared to the original UI. Devdevdev got that aspect to perfection. You can ask him for his font family and font size.

Also, your shadows are very off, no offense.

Devdevdev:
I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

Kudos!

majesticguy:
It's ok bro, nice job. I think I'd spend the same time you did in trying to replicate the UI.


Although your font size and family seems kinda a little out of place, when compared to the original UI. Devdevdev got that aspect to perfection. You can ask him for his font family and font size.

Also, your shadows are very off, no offense.

I knew you'd spot that 🤗🤗

Devdevdev:
For those expecting me to get the colors 100%, you guys are funny. I may have the time to test my css skills with your challenges, but i sure as hell don't have the time to test all the millions of color combinations to find the exact color you want. Usually in production, the design team provides those.

Mext time,just double click on your chrome browser and click on inspect .on the console by your right and side you will see styles.
Click on the color or background color to get a color picker,drag it on to the image color on your chrome browser. It will give you the color code

Devdevdev:
Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was made in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

Hmm nawao.
Is this reply not too harsh for that guy's comment.

If another person replied you this way you'd pick offense immediately.

He just said the colours didn't match.

majesticguy:
Here, try this. I'd need an animation on the burger, i want it slightly tilting or moving left and right.

I just finished this. I had issues finding a burger image that matched the one in your photo, and in the end I just settled for this one. As a result, I had to redesign the page to match the background color of my burger so it wouldnt look out of place. Honestly, I just added my own taste to the project.