- 30
- 37 390
Elena Litvinova - The Art of Web Development 🛸
United Kingdom
Приєднався 15 кві 2021
Hey everyone and welcome to my UA-cam-channel! My name is Elena Litvinova. I am a qualified Web Engineer with over than 12 years of experience in the field.👩🏼💻 Google Developer Expert since 19th June 2023.🔬 The founder of WebElArt. I make training UA-cam videos on web development in Russian (@webelart) and English (@webelart_en). Participated and implemented projects working for leading Russian IT companies such as Yandex and Artec3D. Also worked extensively with the frontend at Astroshock animation company and before that at the Tver State University. I am passionate about psychology.
On this channel I share my knowledges about web development.❤️
Hope my channel will be helpful for you! Let's open web world together! 👩🏼💻
On this channel I share my knowledges about web development.❤️
Hope my channel will be helpful for you! Let's open web world together! 👩🏼💻
WebElArt news, New Job at Tipalti, Software Engineer 💛
In this video we will speak about my new job at Tipalti and next videos on my channel.
💛 If you want to join Tipalti text to Dan (do not forget to mention WebElArt): www.linkedin.com/in/danielgraimes/
☕️ My web-page: webelart.com - do not foget to subscribe on my channels.
Thank you for watching and studying. Love you all! Remember, you are always the best! ❤️🥰
💛 If you want to join Tipalti text to Dan (do not forget to mention WebElArt): www.linkedin.com/in/danielgraimes/
☕️ My web-page: webelart.com - do not foget to subscribe on my channels.
Thank you for watching and studying. Love you all! Remember, you are always the best! ❤️🥰
Переглядів: 64
Відео
Intro the New Brand of WebElArt
Переглядів 11021 день тому
With this video I am going to introduce you my new brand of WebElArt - The Art of Web Development by Elena Litvinova. 🍀 WebPage: webelart.com Thank you for watching and studying. Love you all! Remember, you are always the best! ❤️🥰
Trie Algorithm on JavaScript | Insert | Search
Переглядів 151Місяць тому
In this video, we will explore prefix trees, or tries. We will implement it in JavaScript, covering the 'insert' and 'search' methods. We will also discuss where Tries can be applied in the modern world. 🍀 My webpage: webelart.com. Links which was used in the lesson: 🔗Binary Search Tree on JavaScript, Traversals Breadth and Depth first search - ua-cam.com/video/dRqk5jvZ9TA/v-deo.html. Thank you...
🚀🚀🚀🚀🚀🚀 Part 6. Allies gallery. Layout Cosmos. ReactJS, TypeScript, NextJS.
Переглядів 1932 місяці тому
In this video we will finish last two sections with gallery and footer. Furthermore we will become a part of allies team 😎 🌎 My page: webelart.com 🍀 Support the channel: www.donationalerts.com/r/webelart 💁🏼♀️ My instagram: webelart 🔗🔗 Links which was used in the lesson: 🔗 GitHub Repo (link to the branch animated-list) - github.com/webelart/cosmos_layout_en/tree/allies-gallery 🔗 L...
🚀🚀🚀🚀🚀 Part 5. Difficult Forms (Grid). Layout Cosmos. ReactJS, TypeScript, NextJS
Переглядів 5562 місяці тому
In this video we will develop new two section from layout Cosmos: difficult grid and logos. 🍀 Support the channel: www.donationalerts.com/r/webelart 💁🏼♀️ My instagram: webelart 🔗🔗 Links which was used in the lesson: 🔗 GitHub Repo (link to the branch animated-list) - github.com/webelart/cosmos_layout_en/tree/difficult-forms 🔗 Layout cosmos at Figma - www.figma.com/file/hUR4aI9PcbP...
🚀🚀🚀🚀 Part 4. Animated menu. Layout Cosmos. ReactJS, TypeScript, NextJS
Переглядів 1,4 тис.3 місяці тому
In this video we will continue layout cosmos and will be develop two sections with logos and difficult grid. Just on clean CSS 🚀🚀🚀🚀🚀 In this video we will develop new two section from layout Cosmos: difficult grid and logos. 🍀 Support the channel: www.donationalerts.com/r/webelart 💁🏼♀️ My instagram: webelart Thank you for watching and studying. Love you all! Remember, you are alw...
🚀🚀🚀 Part 3. Create layout Space: React, TypeScript, NextJS. Modal Window 🪐👽👩🚀
Переглядів 2253 місяці тому
In this video we will continue the series of creating layout cosmos and implement a modal window! It will be the awesomest modal which you have ever seen. 👾 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 😅 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-cam: @webelart_e...
Algorithm for calculator on LeetCode. | JavaScript | Computer Science
Переглядів 2365 місяців тому
In this video we will go through the optimal algorithm O(N) on leetcode: calculator. ➖➕➗✖️🟰 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 😅 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-cam: @webelart 💁🏼♀️ My instagram: webelart 🦄 LinkedIn: www.linkedi...
How to Make a Motion Layout with an Animation Gallery in Preact and TypeScript
Переглядів 3745 місяців тому
In this video we will study: atomic design, pexels.com for photos, optimisation of images. We will find cool layout for developing, modify a little bit and discuss developing with animations. 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 😅 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webela...
Swipe Gallery: Keyboard Navigation. Part 3. React + TypeScript
Переглядів 2447 місяців тому
In this lesson we will add keyboard navigation to our gallery and fix some bugs. 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-cam: @webelart 💁🏼♀️ My instagram: webelart 🦄 Company LinkedIn: www.linkedin.c...
Swipe Gallery on React + TypeScript: navigation, counter, hooks. Part 2.
Переглядів 3338 місяців тому
In this lesson we will continue our swipe gallery which we started on previous lesson. We just add navigation, counter and write own hook. 🔆 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-cam: @webelart 💁🏼♀️ My instagra...
Swipe gallery on clear CSS - 😎 with react, typescript, vitejs
Переглядів 3588 місяців тому
In this video we will study how create swipe gallery on clear CSS! 😎 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-cam: @webelart 💁🏼♀️ My instagram: webelart 🦄 Company LinkedIn: www.linkedin.com/company/w...
Together create SSR application on React + NodeJS with RazzleJs
Переглядів 40511 місяців тому
In this video we will know, what is Razzle and why this is awesome. We will create a small beginner application with two pages. ☀️ 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 😅 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-cam: @webelart 💁🏼♀️ My instagram: instagr...
Transparent text on any background, HTML + CSS (React, TypeScript project)
Переглядів 3 тис.Рік тому
In this video, we will study how to create transparent text on any background opposite text. ❤️ ❤️ ❤️ Awesome web designer of the layout Abduly: abduly_haidary 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian U...
Create Wolf Gallery Using React and TypeScript + deploy on Vercel
Переглядів 812Рік тому
In this lesson we will create a wolf gallery together using React and TypeScript. We will write transition animation on main photo, navigation and animated preview gallery. 🍀 Support the channel: www.donationalerts.com/r/webelart ☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Buy my brushes for Procreate: webelart.com/illustration. ✍️ My telegram channel: t.me/webelart_en 🪆 Russian UA-...
Binary Search Tree on JavaScript, Traversals Breadth and Depth first search.
Переглядів 394Рік тому
Binary Search Tree on JavaScript, Traversals Breadth and Depth first search.
Deep studying tsconfig.json. Part 2. Modules (Compiler options)
Переглядів 608Рік тому
Deep studying tsconfig.json. Part 2. Modules (Compiler options)
Stacks and queues in JavaScript + practice: flatten, Polish notation, max queue time
Переглядів 349Рік тому
Stacks and queues in JavaScript practice: flatten, Polish notation, max queue time
Veronika Galkina - about experience, how to grow, interview processes.
Переглядів 514Рік тому
Veronika Galkina - about experience, how to grow, interview processes.
🚀🚀 Part 2. Create layout Space: React, TypeScript, NextJS
Переглядів 847Рік тому
🚀🚀 Part 2. Create layout Space: React, TypeScript, NextJS
Vasilika Klimova -about technologies, teaching, schools, conferences and meetup’s organisation
Переглядів 1,1 тис.Рік тому
Vasilika Klimova -about technologies, teaching, schools, conferences and meetup’s organisation
🚀 Part 1. Create layout Space: React, TypeScript, NextJS
Переглядів 2,7 тис.Рік тому
🚀 Part 1. Create layout Space: React, TypeScript, NextJS
Deep studying tsconfig.json. Part 1. Type Checking (Compiler options)
Переглядів 848Рік тому
Deep studying tsconfig.json. Part 1. Type Checking (Compiler options)
How to properly useMemo, useCallback and React.memo | React | JavaSctipt
Переглядів 592Рік тому
How to properly useMemo, useCallback and React.memo | React | JavaSctipt
Quick Sort Algorithm with and without array mutating | JavaScript
Переглядів 367Рік тому
Quick Sort Algorithm with and without array mutating | JavaScript
Build and Deploy a Full Stack Blog NextJs + Sanity.io | JavaScript, React
Переглядів 18 тис.Рік тому
Build and Deploy a Full Stack Blog NextJs Sanity.io | JavaScript, React
TypeScript from A to Z - part 2: classes, extends, implements, generics, utility types
Переглядів 467Рік тому
TypeScript from A to Z - part 2: classes, extends, implements, generics, utility types
TypeScript from A to Z - part 1: primitives, objects, array, types, enums, interfaces
Переглядів 930Рік тому
TypeScript from A to Z - part 1: primitives, objects, array, types, enums, interfaces
Bubble Sort Algorithm | Time Complexity | Javascript
Переглядів 799Рік тому
Bubble Sort Algorithm | Time Complexity | Javascript
Good luck at new job 👏
Massive thank you!❤💛
wish you lots of success in your new adventure
Thank you very much!💛
Great video and clear explanation - thank you!
Promo SM ☺️
Light mode? Vade retro satanas ✝
Light mode means light inside and around. Santana's is black mode 😈
I don't know how anyone can code using the light theme 😢
This is just habit and switching, try for a week and you will be ok with it :)
я ничего не понимаю но скажу что целую кисти этой женщине
If we use Django Rest, I don't think Razzle can help, it's only good with Node js , right?
I used it only with NodeJS. Not sure about Django and python, yes. But sometimes engineers create independently backend and frontend. Backend with API can be Django or anything else. Frontend - Razzle -> NodeJS for pages and routing on client, and connection with different APIs.
☘☘🌿🌿
link to repo is broken? it show as /cosmos_la..
Yes, just fixed. Thank you.
@@webelart_en The repo just have the part 1. You can put more pls <3?
@@miguelcosta4450 Switch between branches :)
@@miguelcosta4450 github.com/webelart/cosmos_layout_en/tree/animated-list -> branch animated-list.
amazing serie Elena , thanks a lot
Nice, are you going to continue this series?
Yes!
A new video already done ua-cam.com/video/1RoGygHxW14/v-deo.html ☺
@@webelart_en niiccee!
Really good video ,i have not seen such sort and detailed video in UA-cam,. can you create a Movie Api app ?
Hey there. Will you ever make the other 4 videos of the series?
Same Learned Lots
your content is just amazing ... keep going on
Thank you very much! Pleasure to hear this! 💖
Cool! thx for the content) Happy new year btw!
Happy to hear this ☺ Happy new year too!
this is actually a banger and I need this, easy subscribe and like!!
why did you stop this series? is there a repo for the whole code of this website at least?
Didn't have enough time to continue. You can find the repo under description of this video ❤
@@webelart_en thanks for that, but I was looking for a repo which has code for the other parts that you did not get to finish
@@mohithguptakorangi1766 There is not yet. Need to continue.
@@mohithguptakorangi1766 Hi, today published third part: ua-cam.com/video/-0B7S4drduw/v-deo.html
Fantastic walkthrough!
the first 3 minutes of this tutorial are just fire!!!🔥🔥🔥🔥🔥
Thank you so much!
Елена, вам идёт эта прическа.
Спасибо!
Exceptional content!
Thank you very much! ❤
Видимо вам очень нравится блогинг на ютубе, что пилите контент сразу на 2 языках. Respect. На моем текущем продакшн приложении, используется самописный render bundler для SSR. Так же render to string html и т.д.. C ней временами возникают проблемы и с оптимизацией, в частности скорость загрузки страницы так и при сборке бывают проблемы. Немного анализировал переход на next 13(он капец как изменился с 12 версии), но попахивает переписью приложения. А вот Razzle возможно мне подойдет. Почитаю доку. Спасибо за материал
Покопался в гите, оказывается Razzle заброшен и больше не поддерживается. Жаль)))
@@ArtmenBoss хммм, не проверяла. У него даже вебпак версия 4-я, короче довольно старая.
@@ArtmenBoss nextjs это немного не то всё-таки, но тот походу хорошо обновляется. Не то, потому что магии больше. NextJs 1 час назад обновление. razzle 9 месяцев назад, да вы правы :)
once it´s deployed you can create new posts?
how can I delete posts? from sanity panel
thank you Elena for your sharing knowledge video!
learned a lot
Thank you for the excellent video! You explain everything really well!
I liked how you have a neat small project that wrap my head around these concepts, and it is deployable!
Love from Bangladesh 🇧🇩🇧🇩🇧🇩
R U from Indonesia? 😊
No, from Russia :)
oh sorry, because I see some examples of titles using Indonesian. thank you your video is very cool 👍
Great 👍
❤
Hey Elena, nice to have you back!
☀
For anyone who is stuck at the deployment because "title is undefined on [slug]", it might be if you're using getStaticPaths and fallback: true, but haven't set values to show when you run build. I changed true to 'blocking' and the build finally worked.
👍 Thank you for the comment and helping.
Hi Elena! Loved your tutorial (also love to watch women teach code ❤). I was just wondering, what about sanity for deployment? Is it already hosted as soon as you create a project with them?
Yeah, need to study. Hear you.
Good Job , thank you
Thanks so much, this is a lot better than the blog sanity produced to make a next/sanity blog!
good stuff! just found your channel and it's been a great help as I learn web dev
I love you
I love you too! ❤️
Mantap keren
Great tutorial Elena! You’re English is very good 👍 your channel will be big someday! Have a great day, keep up the great content! ☺️
Thank you! ❤
Ty for the walkthrough. Just had this on a practice interview. Did the brute force method with looping. Subbed to your channel 😊
What an excellent way of teaching, make refrerrance to documentation that was superb, Kudos
🤍🤍🤍
I love your videos ❤