- 31
- 42 851
Elena Litvinova - The Art of Web Development 🛸
United Kingdom
เข้าร่วมเมื่อ 15 เม.ย. 2021
Hey everyone and welcome to my TH-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 TH-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! 👩🏼💻
🍀 #1. System Design — Modern Blog | Full Stack | NodeJS + NestJS | ReactJS | PSQL
In this video we will start a new series of videos with blog development. In the first video we will study and develop system design which will include: general requirements, functional requirements, system design, web design, component architecture, database design, api description, performance, accessibility.
🍀 My web-page: webelart.com
00:00 Introduction.
00:52 Intro to System Design.
02:52 General Requirements
05:22 Functional Requirements.
06:22 System Design.
10:48 Web Design.
15:09 Component Architecture.
16:32 Database design.
18:50 API description.
20:15 Performance.
21:52 Accessibility
Thank you for watching and studying. Love you all! Remember, you are always the best! ❤️🥰
🍀 My web-page: webelart.com
00:00 Introduction.
00:52 Intro to System Design.
02:52 General Requirements
05:22 Functional Requirements.
06:22 System Design.
10:48 Web Design.
15:09 Component Architecture.
16:32 Database design.
18:50 API description.
20:15 Performance.
21:52 Accessibility
Thank you for watching and studying. Love you all! Remember, you are always the best! ❤️🥰
มุมมอง: 603
วีดีโอ
Intro the New Brand of WebElArt
มุมมอง 1445 หลายเดือนก่อน
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
มุมมอง 1896 หลายเดือนก่อน
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 - th-cam.com/video/dRqk5jvZ9TA/w-d-xo.html. Thank yo...
🚀🚀🚀🚀🚀🚀 Part 6. Allies gallery. Layout Cosmos. ReactJS, TypeScript, NextJS.
มุมมอง 2457 หลายเดือนก่อน
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
มุมมอง 6217 หลายเดือนก่อน
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.7K8 หลายเดือนก่อน
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 🪐👽👩🚀
มุมมอง 2868 หลายเดือนก่อน
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 TH-cam: @webelart_e...
Algorithm for calculator on LeetCode. | JavaScript | Computer Science
มุมมอง 27610 หลายเดือนก่อน
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 TH-cam: @webelart 💁🏼♀️ My instagram: webelart 🦄 LinkedIn: www.linkedi...
How to Make a Motion Layout with an Animation Gallery in Preact and TypeScript
มุมมอง 41410 หลายเดือนก่อน
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
มุมมอง 312ปีที่แล้ว
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 TH-cam: @webelart 💁🏼♀️ My instagram: webelart 🦄 Company LinkedIn: www.linkedin.c...
Swipe Gallery on React + TypeScript: navigation, counter, hooks. Part 2.
มุมมอง 433ปีที่แล้ว
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 TH-cam: @webelart 💁🏼♀️ My instagra...
Swipe gallery on clear CSS - 😎 with react, typescript, vitejs
มุมมอง 497ปีที่แล้ว
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 TH-cam: @webelart 💁🏼♀️ My instagram: webelart 🦄 Company LinkedIn: www.linkedin.com/company/w...
Together create SSR application on React + NodeJS with RazzleJs
มุมมอง 440ปีที่แล้ว
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 TH-cam: @webelart 💁🏼♀️ My instagram: instagr...
Transparent text on any background, HTML + CSS (React, TypeScript project)
มุมมอง 4.9Kปีที่แล้ว
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 T...
Create Wolf Gallery Using React and TypeScript + deploy on Vercel
มุมมอง 841ปีที่แล้ว
Create Wolf Gallery Using React and TypeScript deploy on Vercel
Binary Search Tree on JavaScript, Traversals Breadth and Depth first search.
มุมมอง 420ปีที่แล้ว
Binary Search Tree on JavaScript, Traversals Breadth and Depth first search.
Deep studying tsconfig.json. Part 2. Modules (Compiler options)
มุมมอง 790ปีที่แล้ว
Deep studying tsconfig.json. Part 2. Modules (Compiler options)
Stacks and queues in JavaScript + practice: flatten, Polish notation, max queue time
มุมมอง 366ปีที่แล้ว
Stacks and queues in JavaScript practice: flatten, Polish notation, max queue time
Veronika Galkina - about experience, how to grow, interview processes.
มุมมอง 534ปีที่แล้ว
Veronika Galkina - about experience, how to grow, interview processes.
🚀🚀 Part 2. Create layout Space: React, TypeScript, NextJS
มุมมอง 885ปีที่แล้ว
🚀🚀 Part 2. Create layout Space: React, TypeScript, NextJS
Vasilika Klimova -about technologies, teaching, schools, conferences and meetup’s organisation
มุมมอง 1.3K2 ปีที่แล้ว
Vasilika Klimova -about technologies, teaching, schools, conferences and meetup’s organisation
🚀 Part 1. Create layout Space: React, TypeScript, NextJS
มุมมอง 2.9K2 ปีที่แล้ว
🚀 Part 1. Create layout Space: React, TypeScript, NextJS
Deep studying tsconfig.json. Part 1. Type Checking (Compiler options)
มุมมอง 9592 ปีที่แล้ว
Deep studying tsconfig.json. Part 1. Type Checking (Compiler options)
How to properly useMemo, useCallback and React.memo | React | JavaSctipt
มุมมอง 6192 ปีที่แล้ว
How to properly useMemo, useCallback and React.memo | React | JavaSctipt
Quick Sort Algorithm with and without array mutating | JavaScript
มุมมอง 3912 ปีที่แล้ว
Quick Sort Algorithm with and without array mutating | JavaScript
Build and Deploy a Full Stack Blog NextJs + Sanity.io | JavaScript, React
มุมมอง 19K2 ปีที่แล้ว
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
มุมมอง 4822 ปีที่แล้ว
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
มุมมอง 9672 ปีที่แล้ว
TypeScript from A to Z - part 1: primitives, objects, array, types, enums, interfaces
Bubble Sort Algorithm | Time Complexity | Javascript
มุมมอง 8172 ปีที่แล้ว
Bubble Sort Algorithm | Time Complexity | Javascript
I opened the Video by coincidence to see if I will finish it or not I found that I finished it without feeling.❤
@@hessennasser2168 ☀️❤️✊
Tell me thats not junior level
waiting for the rest of vid :)
very educational, save us Elena 🤣
Thank you, Gaz! I will do!😃
Looking forward next part😎
@@artemorlov7130 👍🚀
Very educational 😊
@@cecilselormamediku9560 🍀❤️
вы большая молодец... очень приятно смотреть ваши видео уроки Спасибо вам большое за ваш труд
❤️❤️❤️
I'm new here. Learning HTML and CSS
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 th-cam.com/video/1RoGygHxW14/w-d-xo.html ☺
@@webelart_en niiccee!
Really good video ,i have not seen such sort and detailed video in TH-cam,. can you create a Movie Api app ?
Hey there. Will you ever make the other 4 videos of the series?
I think no. Sorry ❤️ Will continue with other 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: th-cam.com/video/-0B7S4drduw/w-d-xo.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