- 24
- 5 875
KimDoesCode
United States
Приєднався 18 тра 2022
Let's master frontend development together.
I upload videos weekly tackling everything from simple to complex layouts, tips and useful tools as well. My how-to guides focus on technologies that make frontend development easier. The aim is to simplify coding and make frontend development more accessible for everyone.
You can reach me on levisgramm@gmail.com
I upload videos weekly tackling everything from simple to complex layouts, tips and useful tools as well. My how-to guides focus on technologies that make frontend development easier. The aim is to simplify coding and make frontend development more accessible for everyone.
You can reach me on levisgramm@gmail.com
CSS ::before & ::after Pseudo Elements Simplified | With Triangle Example
Learn how to master CSS pseudo-elements with this simple tutorial!
In this video, we'll break down how pseudo-elements work using an easy-to-understand analogy, perfect for beginners. By the end, you'll know how to use these powerful tools to style your web pages with ease!
✨Time Stamps✨
00:57 - Example
02:41 - Other examples of Pseudo Elements
03:56 - Triangle Example
✨MORE ON PSEUDO ELEMENTS✨
MDN: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
✨BACKGROUND MUSIC CREDITS✨
Music track: gingersweet by massobeats
Source: freetouse.com/music
Free Background Music for Video
In this video, we'll break down how pseudo-elements work using an easy-to-understand analogy, perfect for beginners. By the end, you'll know how to use these powerful tools to style your web pages with ease!
✨Time Stamps✨
00:57 - Example
02:41 - Other examples of Pseudo Elements
03:56 - Triangle Example
✨MORE ON PSEUDO ELEMENTS✨
MDN: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
✨BACKGROUND MUSIC CREDITS✨
Music track: gingersweet by massobeats
Source: freetouse.com/music
Free Background Music for Video
Переглядів: 192
Відео
Build a data storage component with HTML & CSS | Frontend Mentor Challenge
Переглядів 36314 днів тому
Let's build the fylo data storage component with HTML and CSS. ✨In this video, we will... • Breakdown the layout to understand it better • Structure the HTML properly • Style the components and also make the layout responsive • Build and make the mobile menu functional with CSS only ✨ Resources ✨ • Starter files: www.frontendmentor.io/challenges/fylo-data-storage-component-1dZPRbV5n • Live prev...
August 8, 2024
Переглядів 71Місяць тому
Let's build a fruit homepage with HTML and CSS. We'll include a mobile menu that will be made functional with CSS only. ✨In this video, we will... • Breakdown the layout to understand it better • Structure the HTML properly • Style the components and also make the layout responsive • Build and make the mobile menu functional with CSS only ✨ Links✨ Amena Twitter: x.com/AmenaiSabuwala Amena UA-ca...
July 14, 2024
Переглядів 552 місяці тому
Today's video is about a form validation tool I came across BouncerJS is a lightweight JavaScript library used for client-side form validation. It allows developers to easily add custom validation rules and handle form validation without relying on heavy frameworks or additional dependencies. 👉 Resources • Starter files: github.com/Orekihotarou-k/contact-form-starter-files • BouncerJS: github.c...
Building a responsive portfolio website with HTML & CSS (Form validation included - NO JS needed)
Переглядів 5262 місяці тому
Today's video is about building a fully responsive design portfolio website with HTML and CSS. Also, form validation has been included without writing any javaScript code. In this video, we will... • Breakdown the layout to understand it better • Structure the HTML properly • Style the components and also make the layout responsive • Include form validation without having to write any JavaScrip...
Fylo landing page two column layout. (BONUS - Form validation) | HTML & CSS project with source code
Переглядів 3543 місяці тому
Today's video covers Frontend mentor's Fylo landing page with two column layout solution and as a bonus, I've included form validation using Bouncer JS. In this video, we will... • Breakdown the layout to understand it better • Structure the HTML properly • Style the components and also make the layout responsive • Include form validation without having to write any JavaScript. 👉 Resources • Bo...
Frontend Mentor Testimonial grid section | HTML and CSS grid challenge
Переглядів 1914 місяці тому
Today, we'll take on @frontendmentor testimonial grid section challenge with HTML and CSS. In this video, you'll get; • Clear explanations: Understand the code and the reasoning behind each choice. • HTML Setup: See why specific HTML elements are used for structure and clarity. • CSS grid: Discover the logic behind CSS grid and grid-template-areas. 👉 Resources Mentioned: Kevin's video: ua-cam.c...
Huddle landing page with alternating feature blocks | Fontent mentor HTML & CSS solution
Переглядів 1194 місяці тому
In this video, we tackle the Frontend Mentor Huddle Landing Page with alternating feature blocks challenge, a perfect project for beginners. We'll break down the code step-by-step, explaining every line of HTML and CSS. Learn by Doing: • Clear explanations: Understand the code and the reasoning behind each choice. • HTML Setup: See why specific HTML elements are used for structure and clarity. ...
Struggling with Deployment? Submit Your Frontend Mentor Challenge Now!
Переглядів 1804 місяці тому
Thinking about submitting your Frontend Mentor challenge solution? That's fantastic! Let's explore different ways to bring it to life using 3 popular platforms; GitHub Pages, Vercel, and Netlify. ⨠ Timestamps 0:00 Creating a GitHub repository 2:47 Using GitHub desktop 5:43 Deploying with GitHub pages 7:15 Deploying with Vercel 10:27 Deploying with Netlify 13:52 Submitting the challenge Leave a ...
Recipe page | Frontend Mentor Challenge with HTML and CSS
Переглядів 1,6 тис.5 місяців тому
In this video, we solve Frontend Mentor's recipe page challenge! We'll break down the code step-by-step, explaining every line of HTML and CSS. Learn by Doing: • Clear explanations: Understand the code and the reasoning behind each choice. • HTML Setup: See why specific HTML elements are used for structure and clarity. • CSS Decisions: Discover the logic behind design elements and responsive la...
Blog Preview Card | Frontend Mentor Challenge with HTML and CSS
Переглядів 3165 місяців тому
In this video, we tackle the Frontend Mentor's blog preview card challenge! We'll break down the code step-by-step, explaining every line of HTML and CSS. Learn by Doing: • Clear explanations: Understand the code and the reasoning behind each choice. • HTML Setup: See why specific HTML elements are used for structure and clarity. • CSS Decisions: Discover the logic behind design elements and re...
Huddle Landing Page (HTML and CSS) | Front End Mentor Challenge
Переглядів 2425 місяців тому
In this video, we tackle the Frontend Mentor Huddle Landing Page challenge, a perfect project for beginners. We'll break down the code step-by-step, explaining every line of HTML and CSS. Learn by Doing: • Clear explanations: Understand the code and the reasoning behind each choice. • HTML Setup: See why specific HTML elements are used for structure and clarity. • CSS Decisions: Discover the lo...
Social Links Profile (HTML & CSS) | Frontend Mentor Challenge
Переглядів 3706 місяців тому
In this step-by-step guide, we'll build a responsive social links profile using HTML and CSS. 🎨💡 Whether you're a beginner eager to enhance your skills or a seasoned developer looking for a fun project, this tutorial is designed for everyone! 🔗 What's Inside: • HTML Mastery: Learn the fundamentals of structuring your web page with clean and semantic HTML code. • CSS Styling: Let's transform the...
Build a Responsive Single Price Grid with CSS Grid! (Frontend Mentor Challenge)
Переглядів 506 місяців тому
Stuck on the Frontend Mentor Single Price Grid Challenge? This video will be your guide! We'll dive deep into building a stunning and responsive price grid using the power of CSS Grid. No matter your experience level, we'll break down the process step-by-step. • Here's what you'll learn: - Crafting Compelling Price Cards: Learn how to structure your HTML to create clear and engaging price cards...
Frontend Mentor Challenge: Responsive Social Proof Section with CSS Flexbox (Beginner Friendly)
Переглядів 3826 місяців тому
We're diving headfirst into the Frontend Mentor Challenge! Today's mission: building a responsive Social Proof Section using Flexbox . We'll throw in some HTML & CSS for good measure. 🪄 Don't worry, you don't need to be a coding pro! • In this video, we'll conquer the challenge together by: - Learning Flexbox basics: Bend those layouts to your will! - Building with HTML & CSS - Creating a kille...
Frontend Mentor Challenge: 3-Column Card Component - DEEP DIVE & Code Walkthrough
Переглядів 1386 місяців тому
Frontend Mentor Challenge: 3-Column Card Component - DEEP DIVE & Code Walkthrough
Coding the Stats Preview Component | Beginner-Friendly Walkthrough | Frontend Mentor Challenge
Переглядів 1486 місяців тому
Coding the Stats Preview Component | Beginner-Friendly Walkthrough | Frontend Mentor Challenge
HTML & CSS Made Simple: Navigating the Order Summary Challenge with a Soft Touch! 🍃💻
Переглядів 476 місяців тому
HTML & CSS Made Simple: Navigating the Order Summary Challenge with a Soft Touch! 🍃💻
From Zero to (Maybe) Hero: Navigating Frontend Mentor's Newbie Product Preview Card Challenge
Переглядів 966 місяців тому
From Zero to (Maybe) Hero: Navigating Frontend Mentor's Newbie Product Preview Card Challenge
"Why Didn't I Think of That?!" - Solution to the Result Summary Component Frontend Mentor Challenge
Переглядів 1626 місяців тому
"Why Didn't I Think of That?!" - Solution to the Result Summary Component Frontend Mentor Challenge
25 Minutes to Frontend Glory: Solving the 4 Card Feature Challenge for Beginners with HTML and CSS
Переглядів 376 місяців тому
25 Minutes to Frontend Glory: Solving the 4 Card Feature Challenge for Beginners with HTML and CSS
I Survived the Profile Card Challenge... But at What Cost? (Spoiler: It Was Worth It!)
Переглядів 547 місяців тому
I Survived the Profile Card Challenge... But at What Cost? (Spoiler: It Was Worth It!)
NFT PREVIEW CARD COMPONENT SOLUTION (Frontend Mentor challenge) - HTML5 & CSS3
Переглядів 1067 місяців тому
NFT PREVIEW CARD COMPONENT SOLUTION (Frontend Mentor challenge) - HTML5 & CSS3
QR CODE COMPONENT SOLUTION - FRONT END MENTOR
Переглядів 1937 місяців тому
QR CODE COMPONENT SOLUTION - FRONT END MENTOR
Ayy G, U deserve a like and a Sub for that explaination!!
Thank you@@vanshjain3375. Your support means a lot ✨
@@kimdoescode keep up the good work man. You will reach great heights for sure 🫡
Thanks bro for this one..
pure explanation. You deserve this👉 subscribe, like
Much appreciated! ☺️
Can you please come up with a tutorial for the thing that you did with that triangle before and after I'm facing issue in that
Thanks so much for watching the video! I really appreciate your support. 😊 About the triangle, would you prefer a video on CSS positioning in general or just a quick tutorial on how to create the triangle? Let me know what you'd find most helpful!
@@kimdoescode I've a basic idea of how to use positions the triangle creation using pseudo before and after will be really helpful
Hey@@puneetshakya3001. I made a new video including what you requested. You can watch it here: ua-cam.com/video/sfxL15kRBT4/v-deo.htmlsi=y07oPBfpcnAbGCJb
@@kimdoescode thank you so much bro for helping me out this one is clear now 🙂
You're welcome @@puneetshakya3001✨. I'm glad it helped you out☺
Well Done! You're indeed a pro....
Bro I like your workflow how you proceed I've started frontend mentor challenges they are great
I am the first to comment Haha.
Nice video. Please be starting desktop design first next time
Hey man, thanks for watching the video and for the suggestion! I actually do both-sometimes I find it easier to go mobile first because it makes the desktop version smoother to handle, and vice versa. I'll continue to do desktop-first and mobile-first approaches in different videos. It’s great to know how to work both ways!
THANK YOU VERY MUCH WELDONE
good job keep up !!!
nice work Kim
You think you could do this again using using SCSS and BEM?
@@stevenstroud1379 Interesting idea 🤔
Great! 🤌🤌
Great video Kim!
Keep going !
Kim, appreciate the effort you put into explaining everything so clearly. Looking forward to more content like this.
Thank you for the comment. I appreciate the support. More content is on the way
what is that windows theme you are using? make a tutorial if possible on how to get the same theme it so beautiful
Thanks for the comment. I use a "solarized for windows 11". It's a theme made by nivuu. You can find them on devian art. And for the transparent explorer blur. I'll give some thought to making tutorials about windows customization, as of now, the focus is front end development.
Absolutely fantastic video, Kim! Your step-by-step guide on building a fully responsive portfolio website using HTML and CSS was incredibly detailed and easy to follow. I particularly appreciated how you broke down each section, explaining the layout structure and the reasoning behind using flexbox and CSS grid for different components. Overall, this video was a goldmine of information, and I'm looking forward to more of your tutorials. Keep up the excellent work!
Thank you very much. Your support is highly valued✨
you earned a subscriber :)
Background music ✅ Clean code ✅ Straight to the point ✅
I love your tutorials
Nice man 🎉
How did you learn web dev? Any resources you would recommend?
I'm a self taught developer. There's plenty of free resources here on UA-cam, FREECODECAMP, SCRIMBA, and if you're willing to spend, you can get courses on UDEMY and SKILLSHARE.
The challenge is for newbies.. it would be helpful to not have preset styling set up and also cutting down on the amount of shorthand you use.
Thank you for the feedback. I understand how starting with preset styling and using shorthand can be challenging for newbies. I'll make sure to start from scratch and use less shorthand in the next video to make it easier to follow.
what would be an alternative way to style the color of each testimonial? Ive read more than once overriding with "!important" is a bad idea? , wouldn't adding the color as a second class have higher specificity and work without !important, but it doesnt?
A good alternative to that would be adding a new class and declaring the styles like you mentioned. To increase the specificity, there's two ways to approach it. First, add a new class, and make sure that the styles are declared below the original (take advantage of the cascade) The other method would be to use a chained class selector. It should be something like this; .firstClass.secondClass, it means you're selecting elements that have both firstClass and secondClass applied to them simultaneously. It's a way to target elements more specifically by combining multiple class names.
@@kimdoescode thank you man! I'm working another of your videos today thanks for the help
Hi Kim, when you decide to do your next frontendmentor, would you consider a Junior level HTML&CSS? I cant do Java-YET!😁
Sure!✨
Just curious why you would do a submittal on a frontend challenge you didn't do a tutorial on? it doesnt matter at all just curious.
I used this one just for the video. It's a challenge I completed a while back.
@1:53 yes, nice! The basic house keeping is really holding me back now, so these short cuts.. Like click for click how u handle your zips would be nice. Think of anything your doing on auto pilot and question your assumptions of who knows what 😅
You're point is noted. I'll try my best to keep track of the small details 😅
Great work sir
W
This is awesome. I'm following
I love the way you simplify your design. I’m following
I love this videos💖. They are very easy to follow and understand and I learn so much that I feel I can try new or different things without getting lost. You're definitely the best
Thank you so much. I'm glad you love them❤️✨
great explanation
Thank you 😊
i haven't yet watched but I pray you make me understand. Amen. ❤
I hope you understand. Feel free to ask me any questions. I'll do my best provide the best response
Great Video Bruv, I'll start the challenge soon. But we dont see explore in vs code
Thanks brother. You can find the explorer icon in the top left corner of the code editor, directly below the VScode logo. It looks like two files stacked, one on top of the other.
How did you make your file system look like that?
I customized my computer's appearance to give it a minimalistic look. Here's what I did: • Installed custom themes to change the overall look. • Used OldNewExplorer and StartAllBack for a cleaner interface. • Added custom icons from DeviantArt. • Achieved a transparent effect using Explorer Blur, although Mica is also an option for the same result.
This one was a big. Waiting on the next.
Thank you, sir!