- 21
- 19 050
IFace
United States
Приєднався 16 лис 2022
Would you like to learn how to create modern websites, work as a web developer, or master new programming skills? Then this channel is for you! I’m Alex, and here I share essential and up-to-date frontend concepts that you can learn in just a few minutes.
ON THIS CHANNEL YOU'LL FIND 🚀📚
Quick and precise tutorials on HTML, CSS, JavaScript, and TypeScript
Practical projects using React.js, TailwindCSS, Firebase, and MUI
Beginner courses and helpful tips for professional growth
Frontend Interview Questions and Answers
ABOUT ME 👋
I’m Alex, a frontend developer with hands-on experience in modern technologies, and my mission is to help you understand the world of web development and reach your goals in this field. From short tutorials to career-boosting tips, I’m here to help you master frontend with confidence.
TECH STACK
React.js, Next.js, TailwindCSS, Firebase, HTML, CSS, JavaScript, TypeScript, MUI
Join if you’re ready to level up your skills and discover new frontend tricks!
ON THIS CHANNEL YOU'LL FIND 🚀📚
Quick and precise tutorials on HTML, CSS, JavaScript, and TypeScript
Practical projects using React.js, TailwindCSS, Firebase, and MUI
Beginner courses and helpful tips for professional growth
Frontend Interview Questions and Answers
ABOUT ME 👋
I’m Alex, a frontend developer with hands-on experience in modern technologies, and my mission is to help you understand the world of web development and reach your goals in this field. From short tutorials to career-boosting tips, I’m here to help you master frontend with confidence.
TECH STACK
React.js, Next.js, TailwindCSS, Firebase, HTML, CSS, JavaScript, TypeScript, MUI
Join if you’re ready to level up your skills and discover new frontend tricks!
CSS clamp() Function Explained in 5 mins. Complete Tutorial for Beginners
Learn how to use the CSS clamp function to create responsive and flexible designs without the need for multiple media queries! In this beginner-friendly tutorial, we'll explore how clamp() works to set dynamic sizes for properties like font-size, width, and height while keeping values within defined limits. Perfect for mobile-friendly layouts and modern web design. By the end of the video, you'll be able to confidently implement clamp() in your projects and simplify your CSS workflow. Watch now and transform your approach to responsive design!
Check out the MinMax Calculator min-max-calculator.9elements.com/ to easily generate your clamp() formulas. 🎯
Check out the MinMax Calculator min-max-calculator.9elements.com/ to easily generate your clamp() formulas. 🎯
Переглядів: 578
Відео
#4 Frontend Interview Questions and Answers | JavaScript, CSS, HTML
Переглядів 34923 дні тому
🎯 Frontend Interview Questions | HTML, CSS, JavaScript, JSDOM Are you preparing for a frontend developer interview? In this episode, we dive into essential interview questions covering HTML, CSS, JavaScript, and JSDOM-key topics every developer needs to master. Whether you're a beginner or an experienced developer, this video provides practical answers and explanations to help you confidently t...
Each Media Query in CSS You MUST Know
Переглядів 6 тис.Місяць тому
In this video, you'll explore everything you need to know about media query in CSS to create fully responsive websites. I'll guide you through the different types of media queries, including how to use media query print in CSS for printed content and optimize styles for various devices. This comprehensive media queries tutorial will cover essential tips and tricks to help you master responsive ...
#3 Frontend Interview Questions and Answers | JavaScript, CSS, HTML
Переглядів 262Місяць тому
Welcome to the third video in our Frontend Interview Questions" series! In this video, we’re diving even deeper into key Frontend interview questions to help Junior and Middle Front-end developers build their knowledge and confidence. Each question is broken down with practical insights to help you feel prepared and ready for your next technical interview. As always, don’t forget to visit my we...
4 Ways To Create Button in HTML
Переглядів 414Місяць тому
#2 Frontend Interview Questions and Answers YOU MUST KNOW
Переглядів 478Місяць тому
Hi there! 👋 Welcome back to the "Front-end: Interview Questions" series! In this second video, we’ll continue our journey through essential Front-end interview questions. This series is designed to help Junior and Middle Front-end developers prepare for technical interviews. Each video is packed with useful insights and practical answers that will boost your confidence and readiness. I want to ...
#1 Frontend Interview Questions | JavaScript, HTML, CSS (Junior Developers)
Переглядів 459Місяць тому
In this series, I’ll help you prepare for Junior and Middle Front-end developer interviews. This collection of technical questions, which you might encounter during interviews, will serve as a convenient, well-organized reference guide that you can always have on hand. 🔍 Learn everything about the essential doctype declaration and how it shapes modern web development! This comprehensive guide c...
How to use indexOf() splice() | JavaScript Array Methods Tutorial
Переглядів 100Місяць тому
In this video, I’ll dive into two essential JavaScript array methods: indexOf() and splice(). Whether you’re a beginner or just brushing up on array manipulation, these methods can make your coding workflow much smoother. I’ll walk you through the syntax, demonstrate common use cases, and share a real-world example from one of my recent development projects. Learn how indexOf() helps you locate...
How Tо Use of SVG in React js
Переглядів 442Місяць тому
In this video, I’ll show you how to effectively use SVG icons in your React applications. Importing SVGs can be tricky, but I’ll walk you through three easy methods that every developer should know to make your projects more efficient and visually appealing! Concepts you will learn in this web dev project: ✔ Three ways to import SVG icons in React ✔ How to add SVGs in a React component ✔ Using ...
4 CSS PRO Rules you NEED to know
Переглядів 4,5 тис.Місяць тому
In this video I want to share 4 CSS pro tips and tricks that every developer should know. Improve your coding skills with these expert CSS techniques! I used to encounter these kinds of problems and spent a lot of time finding solutions. I hope these tips and tricks save you time in your development process. Concepts you will learn in this web dev project: ✔ HTML, CSS ✔ CSS Pro tips for beginne...
Get Perfect Image Aspect Ratios Every Time with This CSS Trick
Переглядів 6332 місяці тому
Problem: I’m using a 16:9 image, which is a common aspect ratio for media. However, without proper CSS, this image can get distorted as the screen’s aspect ratio changes-especially on wider screens. Solution: With the @container resize-box query, we can detect when the container's aspect ratio exceeds 16:9. If that happens, the width adjusts to auto, and the height is set to 100%, ensuring the ...
Create a Dark Mode Switch with Tailwind CSS and React | Step-by-Step Guide
Переглядів 2122 місяці тому
Learn how to create a Dark Mode Theme Switcher Hook with Tailwind CSS in your React project with this step-by-step guide. With this tutorial, you'll be able to easily implement a dark mode feature on your website using Tailwind CSS.
2 Minutes Custom Scrollbar for React Project Using Tailwind CSS
Переглядів 5263 місяці тому
Want to create a custom scrollbar for your React project using Tailwind CSS? In just 2 minutes, you can easily customize your scrollbar to fit the style of your project!
Tailwind Dropdown Menu React Component use Typescript
Переглядів 3039 місяців тому
Learn how to create a custom Dropdown Select Menu React Component using Tailwind css and Typescript with this easy-to-follow tutorial. Perfect for web developers looking to enhance their website's user experience. Follow along as we break down the steps to create your own custom dropdown in React JS. 🎵Music Music provided by NoCopyrightSounds. Track: Jordan Schor & Harley Bird - HomeWatch: ua-c...
Dynamic div height based on content in css
Переглядів 273Рік тому
Learn how to effortlessly adjust dynamic div height based on content in CSS with step-by-step tutorial. Stay ahead in web development - watch, learn, and implement today! 💻🔧 #CSS #WebDevelopment #ResponsiveDesign #DynamicHeight #CodingTips" 🎵Music Music provided by Lofi Girl Track: Morning Coffee ☕️ [lofi hip hop/study beats] Watch ua-cam.com/video/1fueZCTYkpA/v-deo.html&ab_channel=LofiGirl 🙏Th...
Very useful
Thank you.
Thank you man I appreciate this , good idea to know as a beginner
Thanks! I'm happy you found it useful.
This was very informative, Thank you!
What do you think about the video? 🎥 I'm continuously experimenting with presentation styles, editing techniques, and content delivery. Your feedback means a lot-let me know what you liked and what could be improved to make it even more engaging. Thank you for your support! 🙌
its really good sir. 🔥
Example needed for this
This is great, I have been doing frontend for a decade and still got to learn a few small things. Very well explained as well 👍🏼
Which font family in thumbnail ?
I used Arial for the thumbnail text
do you think it's better to use orientation:portrait or min-width query for mobile users? i've pretty much only seen min-width being used, but it always seemed ultra specific and unreliable (as mobile browsers often lie about the width of the screen) to me. what do you think?
It's definitely a topic worth discussing! Both methods have their pros and cons, but it often comes down to the specific needs of your project and user experience.
Great video 💪 but I have a question, are you french ?
Thank you for the kind words! To answer your question, I’m not French, but I love the culture and language!
You're a skilled teacher, but try to give at least one example for each status. thank you
This is incredible. I would absolutely love to watch this again. Thank you very much!
Wow, thank you! Comments like this one truly motivate me.
Спасибо)
What do you think about video? I’m still experimenting with the presentation style, editing, and other details. I’d really appreciate it if you could share your thoughts on what could be improved to make it more engaging to watch. Thank you!
Great, keep going. I subbed!
❤😊
Great ...😍😍😍
Glad you liked it! Hope it helps with your interview prep.
Keep up brother, also you got discord?
Thanks for the kind words! Not yet, but that’s a good idea!
❤😊😊😊
❤😊
❤
👍😊😊Great sir
Thanks, glad you found it helpful!
how di we make it rounded
📌 Don’t forget to like, subscribe, and hit the bell for more front-end tips and interview prep! If you have any other questions or want specific topics covered, drop a comment below. Happy learning and good luck with your interviews!
Please, the javascript process Full course.
That's a great idea! I'll definitely consider a full course on this topic.
Thank you for watching! 🙌 I’m working hard to improve the quality of each new video, and your feedback is super valuable to me. What did you enjoy about this video? Are there any areas that could use some improvement? 🤔 Feel free to share your thoughts in the comments! I’d love to hear how you use indexOf() and splice() in your projects, or if you have any questions about these methods - ask away, and I’ll be happy to help! 👇 Leave a comment and let’s chat about your ideas!
What’s your favorite method for importing SVG icons in React? Or do you have your own tips to share? I’d love to hear your thoughts in the comments below! Your insights not only enrich our community but also help me create even better content for everyone. Let’s discuss how we can enhance our coding skills together!
How do you check if the browser supports the supports check?
The @supports rule itself does not require a feature check, as it is available in all modern browsers (since 2013 if I’m not mistaken). However, if you need to check for it in older or less common environments you can use javascript. If the browser does not support @supports, it will ignore the @supports
Super fun to watch. Though I must say that I liked your newer videos where you're commenting a lot better 👍
Now you have addressed the customizability of each method, but didn't talk about performance: I assume the last method is the one with highest performance? Cauz you mentioned there are less HTTP requests involved? Did I understand this correctly?
You're absolutely correct! The SVG Sprite method does indeed have performance benefits, particularly because it reduces the number of HTTP requests needed to load multiple icons. When you use sprites, all icons are consolidated into a single SVG file, so rather than fetching each icon individually, the browser loads them all at once. This can noticeably improve performance, especially on pages with many icons, as there’s just one request to fetch the icons. In contrast, the Direct Import as Component and <img> Tag methods load each SVG individually, which can create multiple requests if you have a large number of icons. So, for performance, the SVG Sprite method is the most efficient choice.
Man this is really great. I had to battle a lot with SVG icons about 2 months ago, when I was doing a react project for one of our clients. I ended up using the first method you mentioned, and spent a lot of time learning about SVG loaders and Vite plugins, which was really educative. However, I wish I could find a guide that explained it as well as you did. Thanks a lot for sharing this knowledge. We really appreciate it here in the office 👍.
This is immensly helpful. Thanks a lot. Can you make another video about the best practices of CSS? I think I got to know some of them over the course of my career, but I never really sat down to gather more CSS knowledge, or tried to find out how CSS libraries design their classes
Thanks
Happy to hear that! Anything specific you’d like to see next?
💬 What's your favorite CSS tip from the video? Or maybe you have your own pro tip to share? Drop your thoughts in the comments below! I'd love to hear how you’re using these techniques or any other tricks that help you code faster and better. Your feedback means a lot, and it helps make future videos even more valuable for everyone! 👇
Feel free to ask any questions about this video in the comments! And if you found it helpful, don't forget to hit the like button. Once we reach enough likes, I'll upload a detailed text version with all the code!
thank you so much
Thanks. It saved me time
which IDE is that? Are u using ultimate version of intellij?
yes, you are right. I am using PhpStorm JetBrains based on the IntelliJ IDEA platform
Resources: 1) ishoudinireadyyet.com/ 2) Examples github.com/GoogleChromeLabs/h... 3) CSS Houdini: A Practical Guide www.smashingmagazine.com/2020... 4) Experiments with Houdini css-houdini.rocks/