Practical Web Dev
Practical Web Dev
  • Видео 92
  • Просмотров 15 236
Practical Web Dev Roadmap for 2024 and Beyond
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: ruclips.net/video/qele-RvGPJ8/видео.html
Learn HTML: ruclips.net/video/hGgyMGY8LkM/видео.htmlLearn CSS: ruclips.net/video/o1ve0GvhL2E/видео.html
Learn JS: ruclips.net/video/QjDQ7dAR46s/видео.html
Просмотров: 118

Видео

How to Host Websites on Netlify for Free and Add a Custom Domain
Просмотров 405Месяц назад
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: ruclips.net/video/qele-RvGPJ8/видео.htm...
The Ultimate Beginners Guide to Git and GitHub
Просмотров 85Месяц назад
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
Просмотров 99Месяц назад
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
Просмотров 161Месяц назад
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)
Просмотров 1962 месяца назад
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
Просмотров 2122 месяца назад
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: ruclips.net/video/hGgyMGY8LkM/видео.html CSS Course: ruclips.net/video/o1ve0...
How to Improve Website Speed by Compressing Images
Просмотров 202 месяца назад
In this video you will learn how to make image file sizes smaller by resizing and compressing images using a free web app. Websites that use compressed images are often load twice as fast as websites that do not. Free Image Compression Web App: squoosh.app/ Like my style? Learn to Code with me: HTML Course: ruclips.net/video/hGgyMGY8LkM/видео.html CSS Course: ruclips.net/video/o1ve0GvhL2E/видео...
How to make a Responsive Hamburger Menu with JavaScript
Просмотров 613 месяца назад
In this video you will learn how to build a mobile responsive hamburger menu from scratch using HTML, CSS, and a little vanilla JavaScript. Completed Project Code: github.com/Practical-Web-Dev/js-mobile-menu Like my style? Learn to Code with me: HTML Course: ruclips.net/video/hGgyMGY8LkM/видео.html CSS Course: ruclips.net/video/o1ve0GvhL2E/видео.html JavaScript Course: ruclips.net/video/QjDQ7dA...
How to Create a Timed Popup Modal With Vanilla JavaScript
Просмотров 2063 месяца назад
In this video you will learn how to create a timed/automated popup modal using vanilla JS. You will also learn some basic form validation techniques and how to add and remove CSS classes with JavaScript. Lesson Code: github.com/Practical-Web-Dev/timed-popup-modal Learn to Code for Free: HTML Course: ruclips.net/video/hGgyMGY8LkM/видео.html CSS Course: ruclips.net/video/o1ve0GvhL2E/видео.html Ja...
How to make a Modal With Vanilla JavaScript
Просмотров 1063 месяца назад
In this video you will learn how to make a modal appear using a click event with vanilla JS. Lesson Code: github.com/Practical-Web-Dev/js-modal-tutorial Learn How to Code for FREE: HTML Course: ruclips.net/video/hGgyMGY8LkM/видео.html CSS Course: ruclips.net/video/o1ve0GvhL2E/видео.html JavaScript Course: ruclips.net/video/QjDQ7dAR46s/видео.html
How to Create a Favicon for a Website From Scratch
Просмотров 333 месяца назад
In this video I will teach you how to make a website using free online tools and a little bit of HTML. Tools Uses in this Video: Canava Design Software: www.canva.com/ Free Background Remover Website: www.remove.bg/ Free Favicon Generator: realfavicongenerator.net/ Build The Project in this video with me: ruclips.net/video/PS0ln3INGHY/видео.html Learn to Code for Free: HTML Course: ruclips.net/...
Profile Card Component Full Project Tutorial (FrontendMentor.io)
Просмотров 1533 месяца назад
In this tutorial we will build the Profile Card Component from frontendmentor.io using HTML and CSS. This tutorial will teach you how to use Figma Design software, create a web page from scratch using HTML and CSS, make a web page mobile responsive using CSS Media Queries, position background images using CSS. Completed Project Code - github.com/Practical-Web-Dev/profile-card-component Live Sit...
How to Use Figma as a Developer
Просмотров 1294 месяца назад
In this video you will learn how to use Figma as a web developer by unlocking Dev Mode. Dev Mode allows you to see all of the CSS styling that goes into making a design so your projects look as close to the design as possible. Build the Featured Project in this Video - ruclips.net/video/mCgwdwF74ss/видео.html Learn HTML for FREE - ruclips.net/video/hGgyMGY8LkM/видео.html Learn CSS for FREE - ru...
How to Use JavaScript Event Listeners
Просмотров 1095 месяцев назад
In this lesson you will learn how to add event listeners to HTML elements with JavaScript. Event Listeners allow the user to change the page based on certain actions like clicks, hovers, window resizing etc. JS Course Files - github.com/Practical-Web-Dev/yt-js-course Want to learn Web Development? Check out my free course playlists! Learn HTML - ruclips.net/video/hGgyMGY8LkM/видео.html Learn CS...
How to Remove HTML Elements Using JavaScript
Просмотров 285 месяцев назад
How to Remove HTML Elements Using JavaScript
How to Replace HTML Elements with JavaScript
Просмотров 975 месяцев назад
How to Replace HTML Elements with JavaScript
How to Create HTML Elements Using JavaScript
Просмотров 435 месяцев назад
How to Create HTML Elements Using JavaScript
How to Select Multiple HTML Elements Using JavaScript Methods and Loops
Просмотров 385 месяцев назад
How to Select Multiple HTML Elements Using JavaScript Methods and Loops
How to Select Single HTML Elements Using JavaScript
Просмотров 315 месяцев назад
How to Select Single HTML Elements Using JavaScript
How to Select HTML Elements by ID Using JavaScript
Просмотров 235 месяцев назад
How to Select HTML Elements by ID Using JavaScript
The DOM (Document Object Model) Explained in Plain English
Просмотров 355 месяцев назад
The DOM (Document Object Model) Explained in Plain English
How to Create Loops in JavaScript and Use them Practically
Просмотров 285 месяцев назад
How to Create Loops in JavaScript and Use them Practically
How to Create Arrays in JavaScript
Просмотров 235 месяцев назад
How to Create Arrays in JavaScript
How to write If Else Statements in Javascript (Make Decisions with Code)
Просмотров 385 месяцев назад
How to write If Else Statements in Javascript (Make Decisions with Code)
How to Use Numbers (Integers) in JavaScript
Просмотров 316 месяцев назад
How to Use Numbers (Integers) in JavaScript
Everything You Need to Know About JavaScript Strings
Просмотров 166 месяцев назад
Everything You Need to Know About JavaScript Strings
How to write functions with parameters and arguments using JavaScript
Просмотров 276 месяцев назад
How to write functions with parameters and arguments using JavaScript
How to write functions with JavaScript
Просмотров 386 месяцев назад
How to write functions with JavaScript
Learn all of the JavaScript Data Types and how they work
Просмотров 256 месяцев назад
Learn all of the JavaScript Data Types and how they work

Комментарии

  • @BLINKBOXHD
    @BLINKBOXHD 3 дня назад

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

  • @nadeemdirkse
    @nadeemdirkse 3 дня назад

    thanks very much aprecaited

  • @BLINKBOXHD
    @BLINKBOXHD 5 дней назад

    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 4 дня назад

      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

  • @wasimulbaritonmoy8303
    @wasimulbaritonmoy8303 18 дней назад

    That's awesome Bro

  • @Sarfarazz.shaikh
    @Sarfarazz.shaikh Месяц назад

    its showing "Awaiting for Netlify DNS"

    • @devrajchapai2537
      @devrajchapai2537 Месяц назад

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

  • @KaifShaikhTaufiq
    @KaifShaikhTaufiq Месяц назад

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

    • @PracticalWebDev
      @PracticalWebDev Месяц назад

      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 Месяц назад

    Been really enjoying your front end mentor java script solutions

  • @PepeDaily
    @PepeDaily Месяц назад

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

  • @puneetshakya3001
    @puneetshakya3001 Месяц назад

    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 ❤.

  • @puneetshakya3001
    @puneetshakya3001 Месяц назад

    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 Месяц назад

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

    • @puneetshakya3001
      @puneetshakya3001 Месяц назад

      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 Месяц назад

    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 Месяц назад

    Fire video

  • @hcmac100
    @hcmac100 Месяц назад

    Great job - thank you.

  • @lc8478
    @lc8478 2 месяца назад

    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 2 месяца назад

      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 2 месяца назад

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

  • @JamesBorland-y5x
    @JamesBorland-y5x 2 месяца назад

    God bless you soooooooooooooooo much

  • @Danielrooster-t3v
    @Danielrooster-t3v 2 месяца назад

    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 2 месяца назад

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

  • @nobleugo9947
    @nobleugo9947 3 месяца назад

    You just earned a follower Love your videos

  • @Korbin-qk5xq
    @Korbin-qk5xq 3 месяца назад

    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 3 месяца назад

      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 3 месяца назад

      @@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 3 месяца назад

      @@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 3 месяца назад

      @@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 3 месяца назад

    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 3 месяца назад

      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 3 месяца назад

    You do great job thanks mate

  • @siig9905
    @siig9905 3 месяца назад

    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 3 месяца назад

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

    • @siig9905
      @siig9905 3 месяца назад

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

  • @lionorlopez8802
    @lionorlopez8802 3 месяца назад

    u help so much

  • @BeefCurd
    @BeefCurd 3 месяца назад

    1:30 start of the video

  • @samratwosti
    @samratwosti 3 месяца назад

    You are the best

  • @tommypool-xd5np
    @tommypool-xd5np 4 месяца назад

    Am I right in thinking that guessing the width and height of the element isn't necessary if you download the design files (figma files etc)?

    • @PracticalWebDev
      @PracticalWebDev 4 месяца назад

      You are correct. However, this is now a paid feature with Figma (used to be free for years) I think you have to pay $15 a month to get the dev tools that give you the CSS for each project you are working on. I was unaware of the new premium subscription when I made this tutorial.

  • @ameliagoodson7400
    @ameliagoodson7400 4 месяца назад

    Thanks for the video. The thing with utility classes is that it's not a term that entry level devs will know or search for! Like so many things with development, you don't what knowledge you're missing...

  • @MarianaUrzainqui
    @MarianaUrzainqui 5 месяцев назад

    is there any way I could get the Figma's dev mode for free? or is there another similar one? I'm just starting to code and I feel it is very useful

    • @PracticalWebDev
      @PracticalWebDev 3 месяца назад

      You have to pay for Figma Dev Mode feature. ruclips.net/video/FuhQOilkg6Y/видео.html

  • @yasirtahirkheli74
    @yasirtahirkheli74 5 месяцев назад

    Excellent video except for the fact that those terminators were being deliberately skipped. Although that feature is what makes me cringe modern javascript adding more ambiguity to the code unlike the old practices where one knew exactly where the code was ending.. Sorry for my critique but couldn't hold back what I feel for modern javascript syntax.

    • @PracticalWebDev
      @PracticalWebDev 5 месяцев назад

      Yes, the JavaScript community likes to create complexity for the sake of complexity.

  • @robertodepasamonte3434
    @robertodepasamonte3434 5 месяцев назад

    Thank you for this excellent and well presented javascript tutorial. I would really appreciate you doing future tutorials on use of javascript in relation to mobile menus, e.g., toggling the mobile menu icon (hamburger), changing CSS selectors to open and close mobile menu, setting the active menu item link, closing the menu on clicking a menu link, closing the menu with click outside the menu links, others.

    • @PracticalWebDev
      @PracticalWebDev 5 месяцев назад

      I have that planned for a future video. Stay tuned!

  • @DanneManne88
    @DanneManne88 5 месяцев назад

    Thanks for explaining the concept CSS Utility Classes

  • @richardreinier2378
    @richardreinier2378 5 месяцев назад

    this is great! thanks for this video!

  • @chiggywiggy524
    @chiggywiggy524 5 месяцев назад

    What to do with the data.json file that comes with it?

  • @HornOfGoat33
    @HornOfGoat33 5 месяцев назад

    man, I cannot get the authors name to sit next to the image in a straight line. It wants to break his name up into top and bottom. any suggestions?

    • @PracticalWebDev
      @PracticalWebDev 5 месяцев назад

      Open chrome dev tools and try changing the width of the author image or the width of the overall container that holds all the info. Coding is 10% writing code and 90% problem solving, so get used to being stuck and having to tinker with things lol

  • @janabeamesderfer3401
    @janabeamesderfer3401 6 месяцев назад

    👌 *Promo SM*

  • @JeremiKress
    @JeremiKress 6 месяцев назад

    Is premium worth it in your opinion?

    • @PracticalWebDev
      @PracticalWebDev 6 месяцев назад

      If you want to work on the premium challenges which are better as a portfolio piece, yes.

    • @legolas7r
      @legolas7r 6 месяцев назад

      Premium is NOT enought; because you get only 9 points a month with which you can download the mterials for the project you decide to do. Its ideal to get the Premium + subscription that gives unlimited points to download / work on projects.

  • @blaues_einhorn_
    @blaues_einhorn_ 6 месяцев назад

    Thank you for this great and well-described video! I'm still an absolute beginner in the area of ​​HTML/CSS and am currently trying out the challenges of Frontend Mentor. Since I'm more of a learning by doing type, I'm grateful for step by step videos like this! Maybe you'll consider doing more of the beginner challenges from Frontend Mentor? I would be happy :) Kind regards from Germany

    • @PracticalWebDev
      @PracticalWebDev 6 месяцев назад

      I have done many video challenges from FM. Check out the rest of my videos and thanks for watching... PS after you've watched me break down and build a design 2-3 times, try a project completely on your own because that's where the real learning starts

  • @rahmanmusah4470
    @rahmanmusah4470 7 месяцев назад

    could you please do a video on how to submit the challenges

  • @rahmanmusah4470
    @rahmanmusah4470 7 месяцев назад

    I used max width 100% for image and i had a hard time centering it in the card-container.

  • @rahmanmusah4470
    @rahmanmusah4470 7 месяцев назад

    I was thinking text align is for typography only not items like images but it worked when you used it.

  • @Ramesh_Royy
    @Ramesh_Royy 8 месяцев назад

    nice😉

  • @abdultalllyrics5276
    @abdultalllyrics5276 8 месяцев назад

    Nice video. I'm kinda new to programming. I have another suggestion on how to center the elements. /* Using text-align: center; in the qr-container, everything in the container(image, h1, p) centers. Then I can decide not to use h2 and p {text-align: center} and vice versa. */ I'd like to connect with you If You don't mind so we can do projects together in order to improve my programming knowledge.

  • @israel-mendes
    @israel-mendes 8 месяцев назад

    Thank you for the great content! I love the casual video style. It's helpful when you speak out your thoughts on issues.

  • @mitetoOoOoO
    @mitetoOoOoO 9 месяцев назад

    Hi, I came here for the curved borders. I had absolutely no idea how to do them. This was my last newbie challenge and now I can move to the junior ones. As for your question: I also couldn't find the font on Google Fonts, but luckily when you download the starter zip, you have both of the fonts you need in the assets folder. Thanks again for the curved border.

  • @11UndaKova11
    @11UndaKova11 9 месяцев назад

    You've just got yourself a sub and like. Been looking for an explanation on this. Appreciate the time and effort💯

  • @harikrishna-wr2db
    @harikrishna-wr2db 10 месяцев назад

    Hey man just wanted to say thanks for all the videos. Videos where you go through your thought process step by step has been THE most helpful thing to start actually coding. There was a huge gap between learning the css syntax in tutorials to actually building the css for a website, which no one seems to acknowledge lol. Thanks a bunch and keep em coming :)

    • @PracticalWebDev
      @PracticalWebDev 10 месяцев назад

      Yes dude. CSS is the biggest pain and even after years of doing web dev I still get stuck on some designs every once in a while. But once you master CSS you feel like a god because you can at least build anything you want visually. Keep at it man! Learning actual programming languages is easier than raw CSS in my opinion but you should master HTML and CSS before you move on to programming.

  • @ceceliadamore
    @ceceliadamore 10 месяцев назад

    Promo-SM

  • @CohenNikesh
    @CohenNikesh 11 месяцев назад

    Awesome video! Any chance you could do a vid on the REST Countries API challenge? Thanks!!

    • @PracticalWebDev
      @PracticalWebDev 10 месяцев назад

      Yes! I will be doing all frontend mentor challenges and posting them on RUclips. I will be creating a JavaScript course soon and then doing projects with APIs

  • @SuhDelphine-p9v
    @SuhDelphine-p9v 11 месяцев назад

    Great tutorial