Practical Web Dev
Practical Web Dev
  • 100
  • 20 814
Code is Art
Code is like art. Their are a million ways to write code and everybody's brain works differently. 10 different devs will write a web app 10 different ways, yet it will still have the same functionality. Don't worry about writing the smartest/coolest code. Just get the job done with what you know!
Take My Free Courses 🎓
Learn Git and GitHub: ua-cam.com/video/qele-RvGPJ8/v-deo.html
Learn HTML: ua-cam.com/video/hGgyMGY8LkM/v-deo.html
Learn CSS: ua-cam.com/video/o1ve0GvhL2E/v-deo.html
Learn JS: ua-cam.com/video/QjDQ7dAR46s/v-deo.html
Recommended Web Dev Books 📕📖📚
HTML & CSS: amzn.to/3AfLKhJ
JavaScript and JQuery: amzn.to/3AhBS7g
PHP & MYSQL: amzn.to/4hhKXxr
My Web Dev Equipment 💻
What I Use to Create Videos:
Audio-Technica ATR2100x USB Microphone: amzn.to/4hs7Gan
Macbook Pro 14 inch 2021 M1 Chip: amzn.to/3Ak2x3k
ASUS ProArt Display Monitor 24”: amzn.to/3UrduXy
Microphone Stand: amzn.to/3YKVU3z
Plugable USB-C Triple Monitor Docking Station: amzn.to/4hhdvHD
Keychron K8 Pro Wireless Mechanical Keyboard: amzn.to/48nXQlu
Logitech MX Anywhere 3S Wireless Mouse: amzn.to/3YI3w6A
Переглядів: 48

Відео

Stop Using Built In Text Editors
Переглядів 24521 день тому
In this video we will discuss why it's bad to use/rely on built in text editors from online web dev learning platforms and what to do instead. Take My Free Courses 🎓 Learn Git and GitHub: ua-cam.com/video/qele-RvGPJ8/v-deo.html Learn HTML: ua-cam.com/video/hGgyMGY8LkM/v-deo.html Learn CSS: ua-cam.com/video/o1ve0GvhL2E/v-deo.html Learn JS: ua-cam.com/video/QjDQ7dAR46s/v-deo.html Recommended Web ...
Let's Build the SunnySide Agency Landing Page From Frontend Mentor
Переглядів 151Місяць тому
Challenge Page: www.frontendmentor.io/challenges/agency-landing-page-7yVs3B6ef Complete Project Code: github.com/Practical-Web-Dev/agency-landing-page Live Site: stately-boba-dbe3a4.netlify.app/ Take My Free Courses 🎓 Learn Git and GitHub: ua-cam.com/video/qele-RvGPJ8/v-deo.html Learn HTML: ua-cam.com/video/hGgyMGY8LkM/v-deo.html Learn CSS: ua-cam.com/video/o1ve0GvhL2E/v-deo.html Learn JS: ua-c...
Will AI Replace Web Developers? A Practical Look using Chat GPT
Переглядів 216Місяць тому
In this video we will answer the question of AI and if it is able to actually replace web developers. We will be using ChatGPT to code landing pages and websites to see how it does against a real human developer. Recommended Web Dev Books 📕📖📚 HTML & CSS: amzn.to/3AfLKhJ JavaScript and JQuery: amzn.to/3AhBS7g PHP & MYSQL: amzn.to/4hhKXxr My Web Dev Equipment 💻 What I Use to Create Videos: Audio-...
Let's Build The Base Apparel Challenge From Frontend Mentor From Scratch
Переглядів 134Місяць тому
In this video we will build the Base Apparel Landing Page from Frontend Mentor from scratch. We will also use AI via ChatGPT to help us write some of the code so that you can see how it can help you as a web developer. Challenge Page: www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0 Complete Project Code: github.com/Practical-Web-Dev/base-apparel-page Live...
How to Start a Web Dev YouTube Channel
Переглядів 412 місяці тому
If you are interested in starting a Web Dev UA-cam channel, this video will teach you - 1. What equipment to buy 2. How to plan your videos 3. A basic workflow for creating content I recommend that all new and experienced web developers start a UA-cam channel for personal branding purposes. What I Use to Create Videos: Audio-Technica ATR2100x USB Microphone: amzn.to/4hs7Gan Macbook Pro 14 inch ...
4 Reasons Why Every Web Dev Should have a YouTube Channel
Переглядів 1302 місяці тому
It's been a year since I started this channel and I had no idea that I would get subscribers and people that actually enjoyed my content. This experience has taught me that I should have started a web dev UA-cam channel years ago and that other web developers should do the same thing ASAP. Watch the Video to get my top 4 reasons why all web devs should start a UA-cam Channel! What I Use to Crea...
The Best way to Learn Web Development (8 Tips)
Переглядів 3132 місяці тому
Today I will share 8 tips that will make learning web development and making money from your skills much easier. If you follow them, you can launch a new career making good money in less than a year. Jon Duckett Web Development Books: HTML & CSS: amzn.to/3AfLKhJ JavaScript and JQuery: amzn.to/3AhBS7g PHP & MYSQL: amzn.to/4hhKXxr
Practical Web Dev Roadmap for 2024 and Beyond
Переглядів 1434 місяці тому
In this video I will give you a roadmap that show you exactly what you should learn as a self taught web developer to start making money and to improve your lifestyle. Join My Newsletter: practical-web-dev.ck.page/436dfb663f Learn Roadmap Skills for FREE: Learn Git and GitHub: ua-cam.com/video/qele-RvGPJ8/v-deo.html Learn HTML: ua-cam.com/video/hGgyMGY8LkM/v-deo.htmlLearn CSS: ua-cam.com/video/...
How to Host Websites on Netlify for Free and Add a Custom Domain
Переглядів 1,2 тис.4 місяці тому
In this video I will show you how to host websites for free using Netlify and GitHub. I'll also show you how to add a custom .com domain name to your Netlify hosted website using Namecheap. Netlify is great for new developers that need to host portfolios and portfolio projects. Join my Newsletter: practical-web-dev.ck.page/436dfb663f Learn Git and GitHub: ua-cam.com/video/qele-RvGPJ8/v-deo.html...
The Ultimate Beginners Guide to Git and GitHub
Переглядів 1174 місяці тому
In this video I will teach you basics of Git and GitHub. You will learn what Git and GitHub do, the differences between them, how to use the terminal/command line on your computer, and how to integrate Git and GitHub to the Visual Studio Code text editor. Join My Newsletter: practical-web-dev.ck.page/436dfb663f Git and GitHub Tutorial Article: practicalwebdev.com/how-to-set-up-and-use-git-and-g...
How to Finally Master HTML and CSS
Переглядів 1134 місяці тому
All web developers should be able to build any design into a functioning landing page/website using raw HTML and CSS. Watching coding tutorials is fine when you are brand new to web development, but you'll eventually need to turn all of them off and build web pages all by yourself. Doing this will force you to understand complex concepts and help you master HTML and CSS FAST! Resources From the...
Frontend Mentor Social Proof Section Full Project Walkthrough
Переглядів 2364 місяці тому
In this video we will build the Social Proof Section project from FrontendMentor.io. You will learn how to break down and build a design piece by piece and make it mobile responsive. Full Project Code: github.com/Practical-Web-Dev/social-proof-section Fronend Mentor Challenge: www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA Live Site: statuesque-stroopwafel-8277cb.netlify.app/ H...
Article Preview Component Full Tutorial (Frontendmentor.io)
Переглядів 3474 місяці тому
In this video we will build the Article Preview Component from FronendMentor.io from scratch. This video will teach you how to break down a design, position items using flex box, and show you how to implement some basic JavaScript. FrontendMentor Challenge: www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT Project Code: github.com/Practical-Web-Dev/article-preview-component L...
Fronend Mentor Recipe Page Full Tutorial
Переглядів 3784 місяці тому
In this video we will build the Recipe Page challenge from frontend mentor. Frontend mentor Challenge: www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm Project Code: github.com/Practical-Web-Dev/omlette-recipe-page Live Site: moonlit-starship-6b0cdc.netlify.app/ Like my style? Learn to Code with me: HTML Course: ua-cam.com/video/hGgyMGY8LkM/v-deo.html CSS Course: ua-cam.com/video/o1ve0Gv...
How to Improve Website Speed by Compressing Images
Переглядів 245 місяців тому
How to Improve Website Speed by Compressing Images
How to make a Responsive Hamburger Menu with JavaScript
Переглядів 905 місяців тому
How to make a Responsive Hamburger Menu with JavaScript
How to Create a Timed Popup Modal With Vanilla JavaScript
Переглядів 2635 місяців тому
How to Create a Timed Popup Modal With Vanilla JavaScript
How to make a Modal With Vanilla JavaScript
Переглядів 1625 місяців тому
How to make a Modal With Vanilla JavaScript
How to Create a Favicon for a Website From Scratch
Переглядів 355 місяців тому
How to Create a Favicon for a Website From Scratch
Profile Card Component Full Project Tutorial (FrontendMentor.io)
Переглядів 2525 місяців тому
Profile Card Component Full Project Tutorial (FrontendMentor.io)
How to Use Figma as a Developer
Переглядів 2546 місяців тому
How to Use Figma as a Developer
How to Use JavaScript Event Listeners
Переглядів 1357 місяців тому
How to Use JavaScript Event Listeners
How to Remove HTML Elements Using JavaScript
Переглядів 757 місяців тому
How to Remove HTML Elements Using JavaScript
How to Replace HTML Elements with JavaScript
Переглядів 1557 місяців тому
How to Replace HTML Elements with JavaScript
How to Create HTML Elements Using JavaScript
Переглядів 717 місяців тому
How to Create HTML Elements Using JavaScript
How to Select Multiple HTML Elements Using JavaScript Methods and Loops
Переглядів 857 місяців тому
How to Select Multiple HTML Elements Using JavaScript Methods and Loops
How to Select Single HTML Elements Using JavaScript
Переглядів 347 місяців тому
How to Select Single HTML Elements Using JavaScript
How to Select HTML Elements by ID Using JavaScript
Переглядів 298 місяців тому
How to Select HTML Elements by ID Using JavaScript
The DOM (Document Object Model) Explained in Plain English
Переглядів 428 місяців тому
The DOM (Document Object Model) Explained in Plain English

КОМЕНТАРІ

  • @alfredkonneh2963
    @alfredkonneh2963 17 днів тому

    This design from frontend mentor is very disappointing. The company logos has serious problems. I started it but after I get to that section, I was forced to abandoned the project.

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

    0:44 Equipment - Screen Recording Software 4:30 Equipment - Microphone 6:41 Equipment - Microphone Stand 7:45 Equipment - External monitor(s) 11:06 Planning videos 16:08 Workflow

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

    3:32 Reason #1 - Branding/social proof 5:44 Reason #2 - Learn and retain knowledge better 7:02 Reason #3 - Potential to earn income 11:17 Reason #4 - It's easy to make content

  • @EmmanuelOgbor-ft2xz
    @EmmanuelOgbor-ft2xz Місяць тому

    I have a question please, how do I set up my custom domain email account?

  • @EmmanuelOgbor-ft2xz
    @EmmanuelOgbor-ft2xz Місяць тому

    I watched this video yesterday and it helped me alot, Thank you

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

    I see AI as a tool for devs, i mean it's good for coding little parts of websites which save lot of time, i personally use ChatGPT alot and it saves lot of time but yeah some time it gives the incorrect or outdated stuff which really messed up the whole project but it's good for coding chunks, for example "design the signup card", "write the infinite scroll logic using vanilla JavaScript", "write a middleware to log different types of request on different file", and it also help alot in debugging I just gave it the code with the error i am getting and boom it resolves it and also explain what i was doing wrong, but yeah it can't build the whole fully functioning website and also for using AI tools for development you need to be familiar with all the technology and requires practical knowledge and experience to work efficiently.

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

    Cant you just iterate? Change this change that . This is wrong here etc. I am a dev aswell

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

    Yeah i picked the project design thinking that it will be easy, but i was stuck trying to figure out how to start, but thanks to your guidance its almost done <33

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

    Hearing you laugh whenever you came across an issue is just a relief like nothing to be frustrated about

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

    Thank you a lot, i just wanna add a small note which is setting the property " left: calc(100vw- 750px) " for the hero phone image will center the phone horizontally for all screen sizes

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

    WordPress !!!!!! Destroyed my machine

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

    I finally understand how to work with position parameter, thank to you, watching you building the website step by step is just amazing

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

    Thank you for the great explanation ill just spam this playlist with gratitude words because this is a lot helpful

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

    All i have to say is 'THANK YOU'

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

    Is it possible to add the custom domain without changing the Nameserver ?

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

    I'm new to web development and this video is absolutely useful! You earned a sub! Keep up the good work!

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

    Where I can get the figma file

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

    Thank you so much

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

    you should have talked about using cline and ai to help with your work flow haha

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

    good information.

  • @g06-football23
    @g06-football23 2 місяці тому

    When i do this and try to go to the website it says "This site can't be reached" ERR_TUNNEL_CONNECTION_FAILED

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

    I like your teaching style thus far...I am here for it

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

    I like how everyone codes uniquely ....instead of your div class=divider....I have been using the <hr/> then style it with css. It looks exactly the same.😊😊😊😊. Btw, I like your teaching style..its not rushed. Very cool. Cheers

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

      Thanks. The thing with div class divider is that you can style it with css. Some designs have random lines under things and if I remember correctly, you can’t style the width and color of an hr. I could be wrong. But yes, coding is like art in many ways. We all have a style.

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

    The idea for your next video is great I'm curious how you do this 💥

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

    In the current trend everyone is taking about react, node and express. I don't know is this due to job market in different regions. What's your thought on MERN? Everybody keep on saying do MERN. I've just got a good grip on JS and now I'm confused guide me.

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

      Everyone who is a tech influencer is pushing the MERN stack because it helps course sales. Real devs that get work done and make money learn PHP/Laravel/Wordpress. By the way, productive devs use JQuery, not React. If you want a job and to be an employee, look in your local job market for what people are hiring for. If you want skills that allow you to make money on your own, learn PHP full stack development. This channel isn’t about trends, it’s about real world results

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

    Great video! I especially liked the part “You will forget things” and this is normal.

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

    Hi, is there a way to center the container using flexbox or can we only do it by setting the margin to auto?

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

      You can use flexbox to center an item within a div/container. But If I’m building a small project component I center it with margin auto and add top margin because it otherwise looks bad on the mobile devices. Using flexbox you end up getting a ton of margin on top in smartphone view which looks dumb and requires more code to be written. In the future, search that question on Google, build a project completely alone without me, and then my answer wont be necessary because you’ll learn this on your own, which is much more powerful. If you want to be a web dev, learn to look stuff up and struggle before discovering the answer.

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

    What visual studio plugin do you use to get everything coloured that way? looks nicer than mine haha

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

    thanks very much aprecaited

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

    Hello, would be awesome if you have any full-stack projects. I am struggling with ideas on how to implement back-end with front-end as my back-end knowledge is very limited.

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

      Yes, will do that in the future for sure. It's not as hard as you might think, especially if you learn PH[ and mySQL database

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

      @@PracticalWebDev Awesome man, for some reason YT didn't notify me of your response.

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

    That's awesome Bro

  • @Sarfarazz.shaikh
    @Sarfarazz.shaikh 4 місяці тому

    its showing "Awaiting for Netlify DNS"

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

      Would you be kind enough to tell me if it works or not?

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

    as a developer bricks is much better then elementor for a developer

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

      Maybe so, but if you want to make money and get a job with a company/freelance, Elementor is better. This video isn’t about the best technology, it’s about learning the skills that companies want

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

    Been really enjoying your front end mentor java script solutions

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

    Thanks a lot. Yeah I'm feeling kind of hopeless lol, but this could be it

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

    This roadmap feels less intimidating as friendly for beginners can you come up with courses of php bootstrap and all other tech that newbie need to learn That would be super helpful ❤.

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

      Im considering making some paid premium courses

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

    I'm a beginner but started pushing code using vscode directly using the GUI is that ok. I feel very overwhelmed using git using cmd but this was helpful I'll start using git using cmd

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

      You can use whatever workflow you want my man, but it's still good to know the basics of the terminal

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

      Yeah, I'm now introducing that in my workflow. Your tutorials are easy to grasp and are helping me bro keep up the good work bro.

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

    Thank you so much bro for sharing this one I'm a beginner and recently started learning web dev and this surely gave me some confidence ❤

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

    Fire video

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

    Great job - thank you.

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

    hey bro, thanks for your work. I appreciate your detailed work.. I hope you create more frontendMentor challanges, especially those with JS. I I have a question. Looking at the active version of the Desktop version, you see a little upside-down triangle attached to the share-component. I tried to recreate that, but failed hard. How do you create that?

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

      Thanks bro. As far as the triangle thing you I'm not sure man. I suppose you could save it as an image in Figma and then maybe set it as a background image and put the icons on top of it. Or I'm pretty sure their is a way to create the triangle with CSS. I didn't want to waste time figuring it out because I have more content to create and client work to do. If this stuff was for a paying client I'd worry about it LOL

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

    thats soo goood !!! pls keep doing these challenges, ther'e so helpfull . big love

  • @JamesBorland-y5x
    @JamesBorland-y5x 4 місяці тому

    God bless you soooooooooooooooo much

  • @Danielrooster-t3v
    @Danielrooster-t3v 5 місяців тому

    wowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww You really helped me learn this challenge, all the other vids have been watching wasnt helping me compared to yours Thanks a lot

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

    Thank you , the Project Code - github is not working could you solve the link

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

    You just earned a follower Love your videos

  • @Korbin-qk5xq
    @Korbin-qk5xq 5 місяців тому

    Really good video and straight to the point. And im wondering how u became a software developer/engineer. Did u get ur bachelors in CS? And was it easy for you to find a job? Im interested in becoming a software engineer and would rather not have to go through 4 years of college. Im 17 and recently got my highschool diploma. Would really appreciate your feedback!

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

      No college. I taught myself and then started freelancing for clients. Learn the basics and then focus on building one project at a time by solving one problem at a time.

    • @Korbin-qk5xq
      @Korbin-qk5xq 5 місяців тому

      @@PracticalWebDev Its good to hear you didnt go to college, i really dont want to. Thank u for responding, this helps a lot!

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

      @@Korbin-qk5xq No problem man. I recommend learning HTML/CSS (Be able to build any design from scratch) then learn basic JavaScript and then learn how to build websites with Wordpress and Shopify. Don't try to master everything. Learn the basics and then start working for real clients ASAP. Learn as you go and try to make money as you learn. The best way to learn is by solving real world problems. Watch more of my tutorials to see how I break down designs and then go off on your own and clone a website.

    • @Korbin-qk5xq
      @Korbin-qk5xq 5 місяців тому

      @@PracticalWebDev im already slightly familiar with html, css, and js, but nowhere near being ready to work for a client. Im still just trying to drill the small easy-to-forget things into my head. And ive watched several of your videos and they are pretty easy for me to understand and i recognize pretty much all the code you type(except for how you shorthand the layout for your html in like 1 minute, that skill clearly comes with years of experience and im not even going to bother trying to understand all of that and just stick to basics.) But again, thank you for responding, every bit of guidance i can get is VERY helpful.

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

    other videos was sort yours was abit longer then others but ive gain much benifit from u i only got confused of the others videos if watched ....newbie here ...thnks bro ...i realy apreciate this ,thanks alo

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

      Yes, other creators make short videos because all they care about is the "algorithm" and views. I make videos for the people that want to learn the right way. Thanks for the kind words

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

    You do great job thanks mate

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

    I got to say, your chill and calm demeanor makes this rather enjoyable 🫡 instead of overcomplicating you're just like look bro this is how it is It's this simple And you're right it is so it's nice to see someone treating it as such

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

      Thanks man. I'm just a bro/personal trainer weightlifter that taught himself how to code lol

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

      @@PracticalWebDev What are the odds, I'm just a bro too! 🤣 I'm no weightlifter but I take my physique quite seriously, and what I put into my body, which is basically just protein, fiber and a medium level of carbs. Right now I drive a semi and I work 12 to 16 hours a day which has really been a hamper on my learning. I made a website and it looks pretty good but then I learned about grid and I was like okay so now I'll just make it all in grid So I broke the entire thing and now I'm putting it back together which has been unbelievably helpful for learning. If I have any questions I just ask GPT for the general idea and then find a corresponding UA-cam video if I need more clarification and away I go. I strongly underestimated how much it would break things if I went from complete flex to complete grid 😅 And then there's the whole beauty of trying to figure out why something doesn't work for an hour just to realize you accidentally put a space in the CSS rule which rendered it useless. All about the journey right ? 😅