KimDoesCode
KimDoesCode
  • 24
  • 5 875
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
Переглядів: 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

КОМЕНТАРІ

  • @vanshjain3375
    @vanshjain3375 11 годин тому

    Ayy G, U deserve a like and a Sub for that explaination!!

    • @kimdoescode
      @kimdoescode 11 годин тому

      Thank you@@vanshjain3375. Your support means a lot ✨

    • @vanshjain3375
      @vanshjain3375 11 годин тому

      @@kimdoescode keep up the good work man. You will reach great heights for sure 🫡

  • @puneetshakya3001
    @puneetshakya3001 2 дні тому

    Thanks bro for this one..

  • @user-sp6ee6yh6e
    @user-sp6ee6yh6e 2 дні тому

    pure explanation. You deserve this👉 subscribe, like

  • @puneetshakya3001
    @puneetshakya3001 14 днів тому

    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

    • @kimdoescode
      @kimdoescode 14 днів тому

      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!

    • @puneetshakya3001
      @puneetshakya3001 14 днів тому

      @@kimdoescode I've a basic idea of how to use positions the triangle creation using pseudo before and after will be really helpful

    • @kimdoescode
      @kimdoescode 2 дні тому

      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

    • @puneetshakya3001
      @puneetshakya3001 2 дні тому

      @@kimdoescode thank you so much bro for helping me out this one is clear now 🙂

    • @kimdoescode
      @kimdoescode 2 дні тому

      You're welcome @@puneetshakya3001✨. I'm glad it helped you out☺

  • @undisputedalex22
    @undisputedalex22 16 днів тому

    Well Done! You're indeed a pro....

  • @puneetshakya3001
    @puneetshakya3001 19 днів тому

    Bro I like your workflow how you proceed I've started frontend mentor challenges they are great

  • @georgeyuviki
    @georgeyuviki 20 днів тому

    I am the first to comment Haha.

  • @Daniel-di8rh
    @Daniel-di8rh 24 дні тому

    Nice video. Please be starting desktop design first next time

    • @kimdoescode
      @kimdoescode 24 дні тому

      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!

  • @MAYREE-OH
    @MAYREE-OH 27 днів тому

    THANK YOU VERY MUCH WELDONE

  • @YordiYilma
    @YordiYilma Місяць тому

    good job keep up !!!

  • @falloumacbook3649
    @falloumacbook3649 Місяць тому

    nice work Kim

  • @stevenstroud1379
    @stevenstroud1379 Місяць тому

    You think you could do this again using using SCSS and BEM?

    • @kimdoescode
      @kimdoescode Місяць тому

      @@stevenstroud1379 Interesting idea 🤔

  • @codearenaofficial
    @codearenaofficial Місяць тому

    Great! 🤌🤌

  • @user-qb2ru7mf9z
    @user-qb2ru7mf9z Місяць тому

    Great video Kim!

  • @razlb5395
    @razlb5395 2 місяці тому

    Keep going !

  • @konforblessing345
    @konforblessing345 2 місяці тому

    Kim, appreciate the effort you put into explaining everything so clearly. Looking forward to more content like this.

    • @kimdoescode
      @kimdoescode 2 місяці тому

      Thank you for the comment. I appreciate the support. More content is on the way

  • @tasinmalif_
    @tasinmalif_ 2 місяці тому

    what is that windows theme you are using? make a tutorial if possible on how to get the same theme it so beautiful

    • @kimdoescode
      @kimdoescode 2 місяці тому

      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.

  • @georgeyuviki
    @georgeyuviki 2 місяці тому

    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!

    • @kimdoescode
      @kimdoescode 2 місяці тому

      Thank you very much. Your support is highly valued✨

  • @xRajaw
    @xRajaw 2 місяці тому

    you earned a subscriber :)

  • @Superior-jt3wq
    @Superior-jt3wq 2 місяці тому

    Background music ✅ Clean code ✅ Straight to the point ✅

  • @razabulAhmed
    @razabulAhmed 2 місяці тому

    I love your tutorials

  • @Superior-jt3wq
    @Superior-jt3wq 3 місяці тому

    Nice man 🎉

  • @a1551x
    @a1551x 3 місяці тому

    How did you learn web dev? Any resources you would recommend?

    • @kimdoescode
      @kimdoescode 3 місяці тому

      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.

  • @RobertTripp-i7w
    @RobertTripp-i7w 3 місяці тому

    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.

    • @kimdoescode
      @kimdoescode 3 місяці тому

      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.

  • @whateveritwasitis
    @whateveritwasitis 4 місяці тому

    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?

    • @kimdoescode
      @kimdoescode 4 місяці тому

      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.

    • @whateveritwasitis
      @whateveritwasitis 4 місяці тому

      @@kimdoescode thank you man! I'm working another of your videos today thanks for the help

  • @whateveritwasitis
    @whateveritwasitis 4 місяці тому

    Hi Kim, when you decide to do your next frontendmentor, would you consider a Junior level HTML&CSS? I cant do Java-YET!😁

  • @whateveritwasitis
    @whateveritwasitis 4 місяці тому

    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.

    • @kimdoescode
      @kimdoescode 4 місяці тому

      I used this one just for the video. It's a challenge I completed a while back.

  • @whateveritwasitis
    @whateveritwasitis 4 місяці тому

    @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 😅

    • @kimdoescode
      @kimdoescode 4 місяці тому

      You're point is noted. I'll try my best to keep track of the small details 😅

  • @giantwolfjerry5650
    @giantwolfjerry5650 4 місяці тому

    Great work sir

  • @user-zd3pg6nh6y
    @user-zd3pg6nh6y 4 місяці тому

    W

  • @ovieolori2398
    @ovieolori2398 4 місяці тому

    This is awesome. I'm following

  • @ovieolori2398
    @ovieolori2398 5 місяців тому

    I love the way you simplify your design. I’m following

  • @andreakarimecruz6851
    @andreakarimecruz6851 5 місяців тому

    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

    • @kimdoescode
      @kimdoescode 5 місяців тому

      Thank you so much. I'm glad you love them❤️✨

  • @behold2661
    @behold2661 6 місяців тому

    great explanation

  • @rahmanmusah4470
    @rahmanmusah4470 6 місяців тому

    i haven't yet watched but I pray you make me understand. Amen. ❤

    • @kimdoescode
      @kimdoescode 6 місяців тому

      I hope you understand. Feel free to ask me any questions. I'll do my best provide the best response

  • @isaacadam255
    @isaacadam255 6 місяців тому

    Great Video Bruv, I'll start the challenge soon. But we dont see explore in vs code

    • @kimdoescode
      @kimdoescode 6 місяців тому

      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.

  • @FaitalSkai
    @FaitalSkai 6 місяців тому

    How did you make your file system look like that?

    • @kimdoescode
      @kimdoescode 6 місяців тому

      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.

  • @georgeyuviki
    @georgeyuviki 7 місяців тому

    This one was a big. Waiting on the next.

  • @georgeyuviki
    @georgeyuviki 7 місяців тому

    Thank you, sir!