Live coding a WORDLE clone (5 hrs) | HTML Sass JS

Подписаться 494 тыс.

Просмотров 45 тыс.

50% 1

💥 Hit that subscribe button (for SCIENCE!) and we'll see how many people actually sub from this video 😂
Source code on GitHub: github.com/thecodercoder/word...
Live demo here: thecodercoder.github.io/wordl...
Boilerplate files (if you don't want to use the generator): github.com/thecodercoder/fron...
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this video I'll show you how I research and build a Wordle clone from scratch with HTML, Sass, and JavaScript.
0:00 - Intro
0:49 - Tea break
0:53 - Set up boilerplate project files
2:07 - Research and taking notes
32:57 - HTML and Sass
52:37 - JS: detect keypress
1:20:28 - Save typed guess
1:38:14 - Update tiles with letters and backspace
2:07:07 - Choose random solution word
2:23:05 - Submit guess and evaluate
2:43:27 - Flip tile animation
3:38:27 - Increment guesses
4:25:26 - Win tile animation
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard, Vissles V84 -- vissles.com/?ref=mu96kxst5w -- 🔥 get 10% off with code THECODERCODER --
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 121

@GnomePuntTrainerYT 2 года назад

I'm unsure if it got corrected in the video, but the random word function has a bug. You append "+ 1" to the end of the Math.random function that is wrapped in a Math.floor function. This means you'll never pick the first word of the array as the index will always be something below 1, which is floored to 0, and then added up to 1.

@TheCoderCoder 2 года назад

Whoops! Thank you for catching that!

@failscript 2 года назад

i really like that you took the time and had the confidence to show the whole project being made, and may a say web dev students like me do need that. We don't need to watch someone bolt the code for the whole game in 20 min. This process of researching, taking notes and planning like any human should do, is honest! Thank You!!

@unnaturalselection4199 2 года назад

I really like your approach, it's actually quite calming and relaxing. Thank you for this video, super useful for beginners like me!

@boomerangfish3558 2 года назад

thank you so much for this video, I really appreciate that you show the struggles and how you solve them. It's not like those tutorials where people just seem to know everything

@TheCoderCoder 2 года назад

Really glad to hear that-- that's exactly why I show everything in these live coding tutorials!

@del0ne450 2 года назад

Very impressive skills, Jessica! I love your videos as always, have a nice day. Keep on growing 💪!

@piscesbean394 2 года назад

I know nothing about this area but I really enjoyed watching this! Cant wait to watch some more!!

@hassaneoutouaya 2 года назад

Thank you, it was really a good trip of coding with you. I am waiting for another video to enhance this app(local storage, compare the guessed word with the words on the word list, store the score...). Or why not another video of live coding similar to this one. This give us a close idea about how the professionals used to code and pick up some tips of coding. Good luck!

@raisazra2720 2 года назад

LOVE IT LOVE IT! I havent finished it yet but everytime you post something it energize me!!!! you're so relaxed 😌 ☺️

@TheCoderCoder 2 года назад

Thanks so much!

@yashichizx 2 года назад

Thank you for posting the video, because I can concentrate when I watch the live coding videos.

@MrGZM90 2 года назад

I love that, you should do more of that! I think this will be helpful

@TheCoderCoder 2 года назад

Thanks so much!

@inferno7289 2 года назад

I'm already subscribed but when you mentioned it I pushed the bell and set it to all notifications lol

@ovidiusustic8905 2 года назад

im here just because i like the way you talk. I believe you could talk about anything, its so chill. Im curious how you would be in a argument haha :))

@relenkem2943 2 года назад

I'm obsessed with your live codings😭😭😭😭😭😭😭😭😭😭😭😭😭

@TheCoderCoder 2 года назад

haha thank you? 😂

@karthikm.1804 2 года назад

Amazing content Bring a guru level challenge from frontend mentor Appreciate your hard work ✌️👍

@mohammedkamal7618 2 года назад

Felt like ASMR Coding, amazing !

@burak9691 2 года назад

I do not know you name coder coder but you are a great youtuber and coach. I love your videos and it's content, you give me so much inspiration for my path to become a web dev.

@rutepereira7628 2 года назад

It's Jessica

@Lolz_amv 2 года назад

Thanks for making this video, it was really helpful 👍 please make another one to...

@ysammo214 2 года назад

Please do more of these. Queued to watch tomorrow

@TheCoderCoder 2 года назад

Awesome, hope you like it! And yes, I'll definitely continue doing live coding videos :D

@dannx3144 2 года назад

i love n enjoy watching these videos sm, u r awesome!

@TheCoderCoder 2 года назад

Thank you!

@rahsalghul 2 года назад

This is fantastic. Thank you. With the switch statement you were using to append the class at around 2:45:00, each statement needs a break at the end to escape. That's why correct, present and absent were all being appended.

@TheCoderCoder 2 года назад

Aah thank you for clarifying that! Much appreciated!

@user-be9yl1ji5o 2 года назад

You're so awesome i wish i will be like you in coming years 😌

@AZZAKIART 2 года назад

njenengan pancen pinter mbak, saya bangga padamu. Apik tenan 👍

@vasilijerepovic9958 2 года назад

awesome tutorial!

@TheCoderCoder 2 года назад

Thanks for watching!!

@tko1929 2 года назад

Hi, Great video! Just a thought.. How does your code deal with saving guesses to browser cookies? So if the browser is closed while playing the game, then on restart of browser does it remember the guesses? And if not, is there a way to code that?

@charlym9635 2 года назад

Awesome tutorial! If you have any clue to make a virtual keyboard properly, it would be awesome! Thank you

@oussamahamdi6993 2 года назад

Your on fire 🔥 We will wait for more live coding videos 🎉 I like the way how u figuring things up. It's a nice skills u got, I'm currently Learning JS, in DOM Lessons. And thank God i'm being able to understand how things actually works to get more experience, in programming logic.

@Arjun-yj1es 2 года назад

Comeon How long should I wait for your course Jess, Make me your apprentice!!! Both as a Web developer as well as video editor @ Coder Coder

@TheCoderCoder 2 года назад

If you subscribe to the email list you will get updates as I make the course! Linked in the description. Currently aiming for spring 2022. My husband does all the video editing/animation :)

@Arjun-yj1es 2 года назад

@@TheCoderCoder Then I guess I have to make you both my mentors 😃😃😃(What an Awesome Combo You Both are!!!) Thank You @Coder Coder .

@laslodes2550 2 года назад

Both of us should make both of them our mentors 🤣 dude non only her coding skills are awesome, but the video editing in lit terrific too🤤 Amazing pair

@gamingthesoy702 2 года назад

Few Days Back I saw your video on how to cheat in wordle using local storage. Today i see how to build wordle. I finally subscribed today

@TheCoderCoder 2 года назад

Thank you so much!

@dammieoflagos280 2 года назад

I subscribed because you said so 😅 data confirmed ✔️

@justraining1037 2 года назад

Thank you so much 🙏🙏

@mrindia4178 2 года назад

How I can gain the most of this project ? Taking notes or rebuilding it? Awesome video as always

@BGNewsReporter 2 года назад

rebuilding or actually doing it will always help you more!

@GeneralDubby Год назад

40:52 ..is the Height of the Tiles maybe coming from "grid-template-columns" ?? ..cause U mentioned the Height is 56 Pixels and it says 5x "56px" ... for the 5 Letters maybe

@olgaycelik2631 2 года назад

Should I learn html , css, javascript ,PHP for seo?

@erinkylecordero 2 года назад

Genuine question, I know i would learn a lot copying other site's like how it works but I wonder if doing this is good as a project, like putting it on github, or just more on as a way of learning? Also, loved how I learned how devs usually approach doing actual projects

@TheCoderCoder 2 года назад

I personally would use it more for a learning experience, but I think if you put your own spin on it, either with the design (like a different kind of animation for the tile flips) or with the game logic, I could see it potentially being a cool portfolio addition!

@dek094 2 года назад

Hi Coder Coder, any updates on your Web Design course?

@anelesiguqa 2 года назад

Already subscribed

@ahmedabdihd 2 года назад

Amazing!!

@TheCoderCoder 2 года назад

Thanks!

@geennaam9744 2 года назад

a write a lot of Javascript this is helpful for things to get done

@shohanurrahman2496 2 года назад

Keep it up Jessica

@TheCoderCoder 2 года назад

thanks!

@PalestinianCode 2 года назад

Thank-you 🙂🙂🙂👍👍👍👌👌

@divine203 2 года назад

Gosh You make web dev look so easy and fun...its taking every discipline in me not to simp right now 😬

@TheCoderCoder 2 года назад

Glad you like it! Simp for web dev, not for me 😅

@ashutoshkumar9007 2 года назад

I am not able to install yoman it says "npm WARN deprecated har-validator@5.1.5: this library is no longer supported" can you please help.

@dixztube Год назад

This music is good in the background

@SwapnilshelkeInfinety 2 года назад

This may have take whole day to make !

@elg281 2 года назад

I really wish I wasnt subscribed just so that I could subscribe to your channel.

@jayeshkaushik2975 2 года назад

Hii mam, can you a video how we can add ads on our website?

@MobileGamersZoneX Год назад

how do i get the boilerplates you used

@haloboi1174 2 года назад

hey guys, any time I type gulp into the terminal and get brought to the localhost visual for the website, none of the changes I make in vscode appear. Has anyone had a similar problem? I'm kinda a noob haha

@qvls7645 2 года назад

Lets start 🔥

@TheCoderCoder 2 года назад

let's goooo

@mcm4859 2 года назад

it worked :)

@evonf7810 2 года назад

what is your theme?

@loveyouforever6710 2 года назад

Nice buddy

@TheCoderCoder 2 года назад

thanks!

@hetvipanchal7458 2 года назад

First comment ✌️nice explanation mam

@TheCoderCoder 2 года назад

Thanks for watching!

@chai112mno 2 года назад

Wow almost 5 hours … nice

@TheCoderCoder 2 года назад

Thanks, hope it is helpful!

@divine203 2 года назад

Please wats the name, of the song you used around 1:17:39 its so calming

@TheCoderCoder 2 года назад

Sorry I'm not sure-- it's stock music from Premium Beats

@maxselby583 2 года назад

Yes

@whitegravybeats5103 2 года назад

I did it for SCIENCE!

@waleedtahir9933 2 года назад

Please tell your vs code theme

@darshnair8524 2 года назад

Hey there Coder Coder! Great video as always. I'm new to HTML and I have a doubt. I recently followed you VS workflow video and I wrote the JS and CSS like you instructed in the video but however, when I run the code, it only shows me the HTML. I tried inspecting the page to find out the error. When I went to console, it was showing me this message - "The key "initial" is not recognized and ignored. 127.0.0.1/:1 Refused to apply style from '127.0.0.1:5500/dist/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. (index):46 Live reload enabled. :5500/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found) 127.0.0.1/:1 Refused to apply style from '127.0.0.1:5500/dist/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. DevTools failed to load source map: Could not load content for chrome-extension://kjacjjdnoddnpbbcjilcajfhhbdhkpgk/content.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME" could you please help me solve this issue.

@aynoorbendag8630 2 года назад

I would love to understand coding for future reference, but my ADHD won't let me 😂 but I subscribed anyway maybe this time it'll be different

@santtu6930 Год назад

ADHD can also be superpower in coding when it comes to hyperfocus :D

@haley5501 2 года назад

How do I get the boilerplate project files?

@TheCoderCoder 2 года назад

You can generate them via the video I put in the card, but I just added a link in the description to the actual boilerplate files on Github. Hope this helps!

@haley5501 2 года назад

@@TheCoderCoder Thank you for a quick reply! Yes, I heard you talk about the card in the video, but it looks like the card is missing. Nevertheless, I'm thankful you added the link to the description :)

@tanaki9507 2 года назад

Yes👉👈

@hiddartho764 2 года назад

i resubcribed only to get feature on social media, xd

@ramonmulder9064 2 года назад

Am i the only one that the .css is missing in the download? Whole dist map is not there..

@TheCoderCoder 2 года назад

I normally ignore the dist files in git, but I just added them to this repo! Hope this helps

@ramonmulder9064 2 года назад

@@TheCoderCoder Amazing, thank you so much!!!!

@hyperone405 2 года назад

Question:Why do you say coding when you work in html or sass,I mean I don’t wanna hate but I think that’s called different, just sayin I mean web it’s not codding 😓

@ri4803 2 месяца назад

javascript is coding, wdym

@anandbaraik5010 2 года назад

Live demo is not working on mobile.

@TheCoderCoder 2 года назад

aah, you're right-- I didn't add the virtual keyboard, and didn't think about opening it on mobile 😅

@anandbaraik5010 2 года назад

@@TheCoderCoder oh got it. 😀

@chawaphiri1196 2 года назад

I'm already subscribed. So I won't be participating. You are really good

@soufiananazoum7042 2 года назад

oh shit now we all hate regex 😂

@TheCoderCoder 2 года назад

yepppp 😅

@TENDOCODE9727 2 года назад

how he can have the comment before the end of the video !!!!!!

@TheCoderCoder 2 года назад

hahaha 🤣

@ANIMENET-ee2om 2 года назад

Am I early, but ......(sh*** nothing to praise)

@TheCoderCoder 2 года назад

haha thank you!

@anirudhcodes 2 года назад

respect++

@chickenkm 2 года назад

i have never heard of wordle.

@dek094 2 года назад

The solution is now encrypted, but I guess it can decrpyted

@AshutoshJuvale 2 года назад

First Comment!! :D

@TheCoderCoder 2 года назад

Thanks for watching!

@coding_electronicscoding_e6667 2 года назад

I think asking people to subscribe might work short term but it doesn't suit your style 💪👍

@TheCoderCoder 2 года назад

I agree!

@BMikel 2 года назад

WebDev Simplified made this in 1.3 hours

@snowyy304 2 года назад

Yeah, but don't forget it live coding... 😏

@TheCoderCoder 2 года назад

He did a great job! But my purpose in this video is to show people, step by step, how a real web developer thinks and researches and trouble-shoots. These are super important skills that once you learn, you can take and apply everywhere. Hope this helps explain :)

@BMikel 2 года назад

@@TheCoderCoder yes agree 100%