Mr Coder
Mr Coder
  • 75
  • 431 395
Notifications Page | Frontend Mentor Challenge | Day 14
This is the 14th frontend mentor challenge we are going to cover. Today we will create a Notifications Page from scratch based on the design provided by frontend mentor. We will be using HTML, CSS, and JS.
Learn Flexbox in just 13 minutes:
-ua-cam.com/video/C_04AjhOwg8/v-deo.html
👉Courses:
- Learn Bootstrap 5 from Scratch:
www.udemy.com/course/complete-guide-to-bootstrap/?referralCode=C33D50A3EFA30E6CC6CE
- How to Sell on Envato Themeforest:
www.udemy.com/course/sell-on-envato-themeforest/?referralCode=C129143D12E31D83E154
💥Codepen Link:
codepen.io/iamsofiullah/pen/VwBMWdx
✨15 Days of Frontend Mentor Challenges Playlist Link:
ua-cam.com/play/PLc.html...
👉Frontend Mentor Challanges:
www.frontendmentor.io/challenges
⏱ Timestamps:
2:26 Starting Up
20:32 HTML
5:56 CSS
40:30 Responsiveness
46:16 JS
🔗Connect With Me:
🌎Website: www.sofiullah.com
Social:
Twitter: mrcoderyt
Facebook: mrcoderyt
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
Keywords: notifications page component, notifications pagecomponent solution, notifications page component codepen, frontend mentor challenge, front end mentor, web design challenge
#mrcoder #challenges
Переглядів: 3 783

Відео

Product Preview Card Component | Frontend Mentor Challenge | Day 13
Переглядів 14 тис.2 роки тому
This is the 13th frontend mentor challenge we are going to cover. Today we will create a product preview card component from scratch based on the design provided by frontend mentor. We will be using HTML, CSS, JS, and an API for this project. 👉Courses: - Learn Bootstrap 5 from Scratch: www.udemy.com/course/complete-guide-to-bootstrap/?referralCode=C33D50A3EFA30E6CC6CE - How to Sell on Envato Th...
Auto Typing Text Effect with ONLY HTML & CSS | Super Easy 🔥 | (With Source Codes)
Переглядів 22 тис.2 роки тому
In this video, we are going to create a typing text effect with only HTML and CSS. We are not going to use any javascript codes here. This animation will have a nice typewriter effect. If you want to learn cool CSS animation effects, then this video is for you! 👉Courses: - Learn Bootstrap 5 from Scratch: www.udemy.com/course/complete-guide-to-bootstrap/?referralCode=C33D50A3EFA30E6CC6CE - How t...
Advice Generator App | Frontend Mentor Challenge | Day 12
Переглядів 2,7 тис.2 роки тому
This is the 12th frontend mentor challenge we are going to cover. Today we will create an advice generator app from scratch based on the design provided by frontend mentor. We will be using HTML, CSS, JS, and an API for this project. 👉Courses: - Learn Bootstrap 5 from Scratch: www.udemy.com/course/complete-guide-to-bootstrap/?referralCode=C33D50A3EFA30E6CC6CE - How to Sell on Envato Themeforest...
QR Code Component | Frontend Mentor Challenge | Day 11
Переглядів 19 тис.2 роки тому
This is the 11th frontend mentor challenge we are going to cover. Today we will convert the design of a QR Code Component into responsive HTML, CSS. 👉Courses: - Learn Bootstrap 5 from Scratch: www.udemy.com/course/complete-guide-to-bootstrap/?referralCode=C33D50A3EFA30E6CC6CE - How to Sell on Envato Themeforest: www.udemy.com/course/sell-on-envato-themeforest/?referralCode=C129143D12E31D83E154 ...
One Page Full Website Project For Practice | Make A Responsive Website Using HTML & CSS
Переглядів 4,4 тис.2 роки тому
In this video, we are going to create a responsive one page full website template from scratch. This project is best for practice if you are learning web development. We will see how to create a responsive website using HTML, CSS, and a little bit of JavaScript. Hope you will like this video. You can see and download the source code on Github. You will find the link down below. 👉Courses: - Lear...
NFT Preview Card Component | Frontend Mentor Challenge | Day 10
Переглядів 8 тис.2 роки тому
This is the 10th frontend mentor challenge we are going to cover. Today we will convert the design of an NFT preview card component into responsive HTML, CSS. 👉Courses: - Learn Bootstrap 5 from Scratch: www.udemy.com/course/complete-guide-to-bootstrap/?referralCode=C33D50A3EFA30E6CC6CE - How to Sell on Envato Themeforest: www.udemy.com/course/sell-on-envato-themeforest/?referralCode=C129143D12E...
PHP Include and Require | PHP Tutorial for Beginners #13
Переглядів 1262 роки тому
In this video, we are going to learn about the PHP include and require. PHP allows us to create various elements and functions, which are used several times in many pages. It takes much time to script these functions in multiple pages. Therefore, we should use the concept of file inclusion that helps to include files in various programs and saves the effort of writing code multiple times. PHP a...
PHP Do While Loop | PHP Tutorial for Beginners #12
Переглядів 1793 роки тому
In this video, we are going to learn about the PHP do while loop can be used to traverse a set of code like PHP while loop. The PHP do while loop is guaranteed to run at least once. The PHP do-while loop is used to execute a set of code of the program several times. If you have to execute the loop at least once and the number of iterations is not even fixed, it is recommended to use the do-whil...
PHP While Loop | PHP Tutorial for Beginners #11
Переглядів 1023 роки тому
In this video, we are going to learn about the PHP while loop. PHP while loop can be used to traverse a set of code like for loop. The while loop executes a block of code repeatedly until the condition is FALSE. Once the condition gets FALSE, it exits from the body of loop. The while loop is also called an Entry control loop because the condition is checked before entering the loop body. This m...
PHP Foreach Loop in PHP | PHP Tutorial for Beginners #10
Переглядів 2283 роки тому
In this video, we are going to learn about the PHP foreach loop. PHP foreach loop is used to traverse the array elements. It works only on array and object. It will issue an error if you try to use it with the variables of different datatype. The foreach loop works on elements basis rather than index. It provides an easiest way to iterate the elements of an array. In this series, we are going t...
PHP For Loop | PHP Tutorial for Beginners #9
Переглядів 2063 роки тому
In this video, we are going to learn about the PHP for loop. PHP for loop is used to loop through a block of code a specified number of times. If the number of iteration is known, then we should use the for loop. But if it's unknown, we should use the while loop in PHP. In this series, we are going to learn the basics of PHP from scratch. I designed this PHP tutorial series for absolute beginne...
Operators in PHP | PHP Tutorial for Beginners #8
Переглядів 1283 роки тому
In this video, we are going to learn the PHP Operators. PHP operators are used to perform operations on variables or values. There are different types of operators in PHP like arithmetic operators, assignment operators, comparison operators, increment/decrement operators, logical operators, string operators, etc. We are going to learn the PHP operators with example. In this series, we are going...
PHP Switch Statement | PHP Tutorial for Beginners #7
Переглядів 1193 роки тому
In this video, we are going to learn the PHP Switch Statement. The PHP switch statement is kind of the alternative of if-elseif-else statement. It helps us to write more readable code and makes the process easy. In this series, we are going to learn the basics of PHP from scratch. I designed this PHP tutorial series for absolute beginners. If you are interested in learning PHP but know nothing,...
PHP Ternary Operator | PHP Tutorial for Beginners #6
Переглядів 1943 роки тому
In this video, we are going to learn the PHP ternary operator. Php ternary operator is kind of the shorthand method of if else statement. It helps us to write more readable code. In this series, we are going to learn the basics of PHP from scratch. I designed this PHP tutorial series for absolute beginners. If you are interested in learning PHP but know nothing, then you are in the right place....
PHP If Else Statement | PHP Tutorial for Beginners #5
Переглядів 873 роки тому
PHP If Else Statement | PHP Tutorial for Beginners #5
PHP Constants | PHP Tutorial for Beginners #4
Переглядів 753 роки тому
PHP Constants | PHP Tutorial for Beginners #4
PHP Data Types | PHP Tutorial for Beginners #3
Переглядів 1293 роки тому
PHP Data Types | PHP Tutorial for Beginners #3
Create A BMI Calculator with JavaScript to Measure Your Body Mass Index (BMI) 🔥
Переглядів 11 тис.3 роки тому
Create A BMI Calculator with JavaScript to Measure Your Body Mass Index (BMI) 🔥
PHP Variables & Scopes | PHP Tutorial for Beginners #2
Переглядів 1243 роки тому
PHP Variables & Scopes | PHP Tutorial for Beginners #2
Introduction to PHP & Getting Started | PHP Tutorial for Beginners #1
Переглядів 3473 роки тому
Introduction to PHP & Getting Started | PHP Tutorial for Beginners #1
Web Design in Figma | Designing A Website for My Bootstrap 5 Course | Speed Art
Переглядів 1,5 тис.3 роки тому
Web Design in Figma | Designing A Website for My Bootstrap 5 Course | Speed Art
Responsive Pricing Component With Toggle | Frontend Mentor Challenge | Day 9
Переглядів 2,5 тис.3 роки тому
Responsive Pricing Component With Toggle | Frontend Mentor Challenge | Day 9
Four Card Feature Section | Frontend Mentor Challenge | Day 8
Переглядів 3,9 тис.3 роки тому
Four Card Feature Section | Frontend Mentor Challenge | Day 8
Huddle Landing Page Design with HTML and CSS | Frontend Mentor Challenge | Day 7
Переглядів 7 тис.3 роки тому
Huddle Landing Page Design with HTML and CSS | Frontend Mentor Challenge | Day 7
Single Price Grid Component | Frontend Mentor Challenges | Day 6
Переглядів 2,6 тис.3 роки тому
Single Price Grid Component | Frontend Mentor Challenges | Day 6
Interactive Pricing Component with HTML, CSS & JS | Frontend Mentor Challenge | Day 5
Переглядів 3,9 тис.3 роки тому
Interactive Pricing Component with HTML, CSS & JS | Frontend Mentor Challenge | Day 5
Profile Card Component | Frontend Mentor Challenge | Day 4
Переглядів 10 тис.3 роки тому
Profile Card Component | Frontend Mentor Challenge | Day 4
3-Column Preview Card Component | Frontend Mentor Challenge | Day 3
Переглядів 8 тис.3 роки тому
3-Column Preview Card Component | Frontend Mentor Challenge | Day 3
Stats Preview Card Component | Frontend Mentor Challenge | Day 2
Переглядів 14 тис.3 роки тому
Stats Preview Card Component | Frontend Mentor Challenge | Day 2

КОМЕНТАРІ

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

    You are an amazing teacher 🎉

  • @Bread-vk8fl
    @Bread-vk8fl Місяць тому

    Done!

  • @ÂngelaGarcia-y2y
    @ÂngelaGarcia-y2y 2 місяці тому

    Hi, i did all like u did but show me error can u help me, this just work if i public?

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

    I too have been fighting to find a way to send mail through my site. It's been hours of searching over many days but now that search is over. Your video was great and got me finally up and running. THANK YOU!!

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

    Excellent tutorial! thank you!

  • @anaclaraa.s.8257
    @anaclaraa.s.8257 4 місяці тому

    thank you for the video! how would you make the animation to stop when the whole sentence has been typed? thanks

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

    Thanks for the video.. I'm such a noob when it comes to back end lol the font in your IDE is a bit hard to read for me though.

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

    Best tutorial for this topic. Thank you very much!

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

    What theme is this?

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

    Bro, a question... Why didn't you use html semantics, I saw a videos that said to use them because they have descriptions instead of a div because a div doesn't have a description.... What are your thoughts on this?? I'm also open to hear any other person's thoughts on it.

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

    Sir can you do a video how to send mail using only xampp with Gmail smtp

  • @mbrinmanidw
    @mbrinmanidw 8 місяців тому

    Wow, great walkthrough! I have to agree with @shapesii from 2 years ago. I wasn't expecting much, and came away very impressed. :)

  • @kalilfagundes7431
    @kalilfagundes7431 8 місяців тому

    Thanks!

  • @dpcare1499
    @dpcare1499 8 місяців тому

    Excellent tutorial with speak is fine. Thanks from bottom of my heart.

  • @wie.funktioniert
    @wie.funktioniert 8 місяців тому

    Please show at the beginning what the end product will be so we know if it is the right thing for us.

  • @Erik-xv5kc
    @Erik-xv5kc 8 місяців тому

    great video

  • @kioswebid
    @kioswebid 9 місяців тому

    why favicon hidden after use smooth scrollbar?

  • @alan-overthenet
    @alan-overthenet 9 місяців тому

    Thank you.

  • @Alds___
    @Alds___ 9 місяців тому

    my stat box is not laying out like it should be in the video it is still all onto of each other anyone know a fix?

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

      likely you havnt linked the css file.

  • @MICHALIS_02
    @MICHALIS_02 10 місяців тому

    Thanks. All I needed was how to get the font family 🚀🚀

  • @jasonmarachabond7598
    @jasonmarachabond7598 10 місяців тому

    My brother I would like to thank you for helping me at the beginning stages of my coding journey. You are literally carrying me and my learning right now. Greatly appreciated. Please do not stop making videos. You are really helping us beginners.

  • @imakoos
    @imakoos 10 місяців тому

    very nice!

  • @ShravyaKarnam
    @ShravyaKarnam 10 місяців тому

    awesome video and easy one

  • @ajith-u6c
    @ajith-u6c 11 місяців тому

    thank you bor🥺🥺🥺🥺

  • @MichaelWatkins-o9n
    @MichaelWatkins-o9n 11 місяців тому

    Great instructions and demo!

  • @aauniversal4122
    @aauniversal4122 11 місяців тому

    i have a website through which i send a mail to the user. the email address through which i am sending the email i want to change this email

  • @DeepSingh-of7dl
    @DeepSingh-of7dl 11 місяців тому

    how can i upload in xampp server?

  • @moustafaelkoushy5480
    @moustafaelkoushy5480 11 місяців тому

    Can we do this one using flex box instead of grid?

  • @chanda_techno_share_handle
    @chanda_techno_share_handle 11 місяців тому

    Thanks

  • @ASED254
    @ASED254 Рік тому

    Nice to meet you, beginners friendly teach 🎉

  • @NandugokulKN
    @NandugokulKN Рік тому

    nys bro

  • @starjuda363
    @starjuda363 Рік тому

    THANKS for your work,what theme you use in vscode

  • @AbdurRahman-hb3gn
    @AbdurRahman-hb3gn Рік тому

    Please tell me the name of your VS Code theme, I'm literally searching it.

  • @GyminiJoe
    @GyminiJoe Рік тому

    after 4 months i couldnt manage this. i quit coding

  • @rrrrrrr202
    @rrrrrrr202 Рік тому

    Hi is it safe? from hacking? Thanks alot

  • @nellwinston9283
    @nellwinston9283 Рік тому

    Thanks for your help and explanation!

  • @zone2025
    @zone2025 Рік тому

    It was very helpful. Thank you!

  • @tolaniajibade4080
    @tolaniajibade4080 Рік тому

    Great tutorial ✅✅✅

  • @reallifepubg00039nav
    @reallifepubg00039nav Рік тому

    Bro osm🎉

  • @DetectiveSquarepants
    @DetectiveSquarepants Рік тому

    I get a 405 error even after using the same code and steps. Any thoughts?

  • @aakashrai2749
    @aakashrai2749 Рік тому

    Great Content 👍👍👍👍👍👍👍👍

  • @LauraCostellodiycrafts
    @LauraCostellodiycrafts Рік тому

    thank you!! simple and to the point. I'm still overly complicating everything and making my life more difficult when doing these projects.

  • @AliffianAkbar-y7g
    @AliffianAkbar-y7g Рік тому

    scam, dont recevied email fvck

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

      Google blocks it anyway.

  • @kamal-ahmed
    @kamal-ahmed Рік тому

    Useful video. As a backend developer I suffer when building something with css. Your video is helping me. I have done 2 projects from frontend mentor so far. I will continue.

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

      dam i thought developer jobs you need to be good in all...so you are telling me i can get job just as backend without knowing css?

  • @LauraCostellodiycrafts
    @LauraCostellodiycrafts Рік тому

    Awesome as always - l learned a lot here exp regarding img overlay and found it very useful.

  • @shushurel
    @shushurel Рік тому

    It's working but didn't receive any email on the receiver(email inbox or spam)

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

      I have the same problem here as well. Wonder why it's not working.

  • @lokesh31286
    @lokesh31286 Рік тому

    Can you please provide the video for attaching a file to mail with same contact form

  • @MR.CODER4193
    @MR.CODER4193 Рік тому

    Please support me bro

  • @MR.CODER4193
    @MR.CODER4193 Рік тому

    Hii

  • @awaznipi2709
    @awaznipi2709 Рік тому

    Attachment 📎 please 😢