My process building websites from a design | HTML & CSS | ASMR coding

[@TheCoderCoder]

If you want to watch me code and explain every step as I go, check out the full (3 hr) tutorial building this website on my other channel, Coder Coder Builds: kzbin.info/www/bejne/pJ2ch5-KdpJ0nKc Songs from the background music: 0:00 - Emily Sprague - "Keeping Sacred" 3:19 - Gerardo Garcia Jr - "Angel Skies Relaxing And Ambient Airy Synths For Spiritual Meditation" 7:05 - DivKid - "Icelandic Arpeggios" 9:47 - Oxygen Garden by Chris Zabriskie 13:47 - Marshall Usinger - "First Steps" 18:57 - DivKid - "Dreamer" 21:53 - TrackTribe - "The Thought of You"

[@admin8784]

What are your keyboard and monitor setups?

[@TheCoderCoder]

​@@admin8784I have an Alienware ultrawide monitor and Glove80 keyboard

[@RonnelJaySoriano]

Where are you working? I am still seeking a job. Can you help me? 😁

[@Accentors]

is swe only about building website only?

[@amirwahidi4968]

I absolutely loved it and enjoyed watching an expert doing all the things really smoothly. You should do more of these amazing videos. 👏👏

[@TheCoderCoder]

Thanks, glad you liked it! I'll be making more :D

[@remember.772]

How can i simply get the font size the padding and the imaage of the figma design that someone sent to me ​@TheCoderCoder

[@x-limit2023]

Thank you so much for this. A lot of my questions have been answered. So relaxing, especially for me who does not want too much talk.

[@felixmakinda7689]

Might be the best video I have watched on KZbin in 2024. I love the approach you used.

[@raymondsamson2408]

As someone whos having a hard time in web design, i absoutely love this.

[@dr.earnest.ujaama]

Lending my support. I think your skills are commendable and awesome. You got my vote and my subscription. Also mashed the Like button. Keep it up!

[@alfiartya23]

Thank you for this! Please do more like this, I want to know how the expert like you manage these stuff when building a website UI from start 😄

[@TheCoderCoder]

Thanks for watching! My other channel Coder Coder Builds is all about building these step by step

[@TheFuture36520]

Unorthodox keyboard and absolutely inspiring 🙌

[@pi1392]

This makes me feel so calm. the meditation video i never knew i needed.

[@EddieGamess]

All I can say is WOW! 🤯I'm going to start implementing the translate property, padding-inline/block and margin-inline/block properties in my Front-End Mentor projects from now on.

[@TheCoderCoder]

awesome, I'm glad this could help you, and thanks for watching!

[@HienDinh-m8w]

Love your teaching style

[@jackydeveloper]

Great! I love this video and love your style coding

[@Danachew]

Not only informative, but incredibly chill! 🥰

[@TheCoderCoder]

Glad you like it!

[@MovieMovie-m4m]

Best video ever. It’s so zen✨

[@F.Castle]

learning and asmr at the same time, love it.

[@TheCoderCoder]

haha thank you, glad you liked it!

[@shyamnarayananj4480]

seriously your video helped me a lot , im having imposter synndrome just like you because recently i have landed on my first job not really a job we can say it as a project i have the fear of letting my boss down and i feel low when im making mistakes.

[@TheCoderCoder]

Best of luck, and thanks for watching!

[@offorjohn]

Awesome Video I remember following Up Your videos. And still Learning Insane.

[@angieflor864]

yesssssssss this is better than them obnoxious boring storyteller youtubers

[@ayomidewilfred1864]

Where have you been all these while? Welcome back

[@journeybisaya]

Thank you for sharing, I just learned new things. :)

[@888aminano]

A loved coder you are.

[@CodeReal92]

It is a good FYI for me. Thanks I am learning full-stack engineer

[@DevAbhi-ub5mx]

I thought i will fall asleep , but i after 10 mins i started programming myself 🤦‍♂

[@williambreeze2659]

Relaxing asmr!

[@marcusgenz4020]

This video relaxed me, made me high, and brought out my inner nirvana. Thanks, sensei.

[@aynurmagsumov7861]

It was awesome👍👍

[@TheCoderCoder]

Thanks for watching?

[@salad_man4519]

I learned a lot ty

[@ZZBandera]

Thanks for the video! One question though - so how did you got all the text and assets from Figma? You've had an index file with all the text from template.

[@TheCoderCoder]

You can get the starter files from Frontend Mentor, which include the index HTML file!

[@mirkamrulahsanasif3948]

these kind of videos are very nice to watch....

[@TheCoderCoder]

thanks so much!

[@vega9265]

Great video!! What's that little pixelized display you have on your desk? It looks really cool!

[@TheCoderCoder]

It's called Tidbyt!

[@zainuldin9095]

oh boi! today i see i'm not alone who struggles with complex layouts

[@TheCoderCoder]

haha definitely not alone in that!

[@theintjengineer]

First❤ Love you, Jess :*

[@devascript]

i really love your videos & Youuuu♥

[@elwatcho5629]

You should do kick livestreams. You could get a million dollar contract.

[@GymBeastModeOn]

Thanks for giving me precious time

[@TheCoderCoder]

thanks for watching!

[@CurriCesar]

Please tell me how I can buy that keyboard, thank you

[@simonIsDev]

You've using incredible table for work

[@conan.camargo]

The keyboard in question is the Glove80. This information is for those who are interested.

[@UserHero]

keep it up🎉

[@TheCoderCoder]

thank you! definitely plan to!

[@AmirKhan-vg4br]

This is very simple web page And i am created this type website full responsive within 30 mints

[@TheCoderCoder]

great job 👍🏽

[@Muhaiminul_coding_club]

amazing 😎 😎

[@TheCoderCoder]

thanks so much!

[@kaptainkrim7553]

Hey, totally going to watch the video but thats a nice keyboard. What kind of keyboard is that? I would love to have one

[@TheCoderCoder]

thanks for watching! it's a Glove80 by MoErgo

[@amanmukhiya783]

you show also show the progress from time to time by showing the website

[@ItaloVolt]

This was like playing stardew valley for me. Very relaxing..

[@TheCoderCoder]

Glad you enjoyed it!

[@HabeebAbdulSalam-rp2ct]

Hi pls which theme are you using and which code editor are you using?

[@TheCoderCoder]

VS Code with my own custom theme, Coder Coder Dark, linked below!

[@edgargiobanny]

Great, what a good way to make your videos, even though you don't speak but you put text, that's something, I feel that when you talk it's more complicated to try to explain, and even more so when it's in English,

[@TheCoderCoder]

I'm glad you enjoyed this!

[@birsingh5388]

Why did you opened another channel?

[@CitizenEa]

Are you using Copilot, why not use bootstrap?

[@TheFuture36520]

Challenges I struggle with us creating a carousel for images and finding the image size is indeed an issue.

[@MovieMovie-m4m]

And I also learn a lot

[@SetupDeDev]

What;'s your keyboard?

[@aniketmore1410]

just wow!!! the way you code it is really amazing to the beginner like me. You said dividing css files and importing them isn't the best idea (if i'm not getting it wrong...), how do you structure the css used for multiple elements at a single place ? and Thanks for this video. Loved it😃😃

[@TheCoderCoder]

If I'm using CSS I would probably put all the styles into one file. I just make sure that all the classes are unique so there is not unexpected conflicts in what styles get applied to elements. Otherwise, I would use Sass/SCSS, a CSS pre-processor, which does allow you to split the files separately. (I have a Sass for Beginners video on my channel if you're curious to learn about it) Hope this helps!

[@ClaudioGabrielCastillo-uq4hj]

hola te quiero hacer una consulta........conoces algun monitor que me permita conectar dos pcs, una con linux y otra con windows ? para trabajar con los sistemas operativos a la vez, uno curvo quiero pero no conosco las caracteristicas que tienen que tener

[@pareshaiarts]

How do you actually type on that keyboard? it is keyboard right?

[@TheCoderCoder]

Yes, it's the Glove80 keyboard!

[@palmwaytech]

Do this coding , while doing it , take break - eat something , return , repeat procedure.

[@vml_tec]

What Monitor are you using ?

[@TheCoderCoder]

It's an Alienware ultrawide monitor!

[@jermpoz2971]

oh you type what you want in website like : '> a woman with coffe > '" something like that? idk anything about coding but is it like that ? PLEASE REPLY TY

[@GOBINDOS]

4:39 that's a tea break 😂😂😂😂😂😂😂😂

[@fwdflashwebdesign]

Wired keyboard dose it hep?

[@TheCoderCoder]

I like it a lot!

[@masrif2332]

what monitor ru using??

[@TheCoderCoder]

It's an Alienware ultrawide

[@AlThePal78]

is that keyboard worth it? I have carpel tunnels or arthritis in my wrists the doctors don't know so is that worth it for that?

[@TheCoderCoder]

It's helped me I think, but it is very expensive so I'd maybe start with cheaper options for split keyboards first. The Logitech Ergo is what I started with and I really like it. I don't know your situation so I'm not sure what you need, but wishing you best of luck with finding a solution that works for you!

[@nctp-dz6fz]

Wait what so you don’t use chat-GPT while coding????

[@TheCoderCoder]

nope! 😊

[@paulsnehasish5830]

that keyboard gave me dyslexia :v

[@birsingh5388]

Please do the voice over, it’s hard to read each text

[@TheCoderCoder]

You can see the full video with voice over on my second channel, Coder Coder Builds, linked in the pinned comment and in the description!

[@NyagasageAsha-g2s]

You don't know how to read😂😂😂😂😂😂😂😂😂❤❤😂😂😂😅😅😅😅😮😢😢😢😢😮

[@hasanpro7719]

👍👍

[@animalsfriend4949]

Bro are you earning enough for your hard work?

[@glennraya]

You don't use CSS frameworks like Tailwind? Just vanilla CSS?

[@TheCoderCoder]

I've actually been considering making content using Tailwind in the future

[@glennraya]

@@TheCoderCoder cool! 😎

[@furqantarique3484]

I want to do this one by one

[@brook45-gg3qk]

impressive girl encode

[@potliquor]

Did you do any customization to your glove80 setup?

[@TheCoderCoder]

A little, I replaced the F row keys with custom shortcuts: Ctrl-C, Ctrl-V, etc. But I've barely scratched the surface on what you can do with adding multiple layers and so on, maybe in the future!

[@abbuboy8901]

What is the point of building web by coding while I can just design in figma and publish it on framer or other cms??😢

[@TheCoderCoder]

You can do that, but the coding knowledge makes everything easier even when using other tools

[@Extension-Hub]

❤❤❤❤❤

[@nijatismayilov1362]

Would be cooler if you did voiceover instead of subtitles.

[@TheCoderCoder]

You can watch the full version with voice over on my second channel, linked in the description!

[@SystemDesignNepal]

Now I'm confused 😐. I've watched the full video also. Which one of you created the actual website? 🙄

[@TheCoderCoder]

Not sure what you mean by saying "which one of you" ? The design is made by Frontend Mentor, and I built it with HTML and CSS on my second channel, Coder Coder Builds. Both channels are run by me, and the Coder Coder Builds video has a link to my GitHub repo with the code. Hope this helps.

[@SteveBClark]

Is hard to see the code while understanding and watching the subtitles 😢

[@theintjengineer]

Check "Coder Coder Builds" - she has the video there [last entry], where she actually builds this project, talking through it, etc. :). Cheers.

[@TheCoderCoder]

@@theintjengineer thank you!

[@lian1238]

I love your video. One question. What do you think of using AI to help turn figma or image to html and css? Not unlike what you did in this video. Do you think the quality will be there and would it be worth it to learn to use AI tools (as a web developer)?

[@lian1238]

Also, thoughts/review on the glove80?

[@TheCoderCoder]

I haven't tried it myself, so I don't know how well tools like thta would work. I know Figma has a "design to code" paid option but a lot will depend on if the designer created the design correctly.

[@TheCoderCoder]

I like the Glove80 a lot! it is expensive, but it feels better on my wrists when typing. No regrets getting it

[@TheBoogieMan-w3q]

❤

[@alemdar278]

what it this keyboard :)

[@TheCoderCoder]

it's a Glove80!

[@doremon3692]

details are already given by the customer's then its easy idk about that think

[@code_tone]

didn't even know about picture tag wow smh

[@shreysaxena738]

so smriti mandhana is now doing web development

[@TheCoderCoder]

😂

[@pigeon-fd5zq]

Use word press don't waste time in coding

[@yourlocalhuman3526]

bro are you high?

[@TheCoderCoder]

I can guarantee that every WordPress site you work on will need some kind of coding at some point

[@fwdflashwebdesign]

Soon AI will do this in 5 seconds... we are obsolote !

[@TheCoderCoder]

Well, until the robot overlords take over I'll be coding by hand 😊

[@fwdflashwebdesign]

@@TheCoderCoder yeah that is all we can do...

[@RepublikSosialisSovietUkraina]

indonesian?

[@Trendyplaysyt]

Smriti mandhana aap?

[@TheCoderCoder]

😂

[@vinay_dias]

Cursed af keyboard

[@TheCoderCoder]

I like it 😊

[@kingjames-vv7hg]

To be honest, it looks cool, but come on! This is just for content, right? You made it look easy. building website from barebone template like that. Your video might make aspiring web developers feel dumb and eventually discourage them. Web development doesn’t have to be that complicated. Just start with a full template and customize it from there.

[@tusharkutre188]

What kind of keyboard is that?🫣

[@TheCoderCoder]

It's a Glove80 by MoErgo

[@tusharkutre188]

​@@TheCoderCoderOhh looks cool😮