Figma Design To WordPress Theme Tutorial (Tailwind CSS)

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 50

  • @LearnWebCode
    @LearnWebCode  6 місяців тому +2

    This video is an excerpt from my 22 Hour web developer bootcamp for 2024. You can check out my full courses at my site learnwebcode.com/

  • @stpengineering
    @stpengineering 6 місяців тому +4

    I've always wanted to try Tailwind CSS with WordPress instead of the historic Bootstrap. This is the right opportunity. Thank you

  • @pfkellogg
    @pfkellogg 6 місяців тому +2

    Brad, I have learned so much from your courses. I just wanted to thank you.

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +1

      You're so welcome Patrick; thank you for the support!

  • @johnny2598
    @johnny2598 6 місяців тому +4

    Yes, more Figma to Wordpress !

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +10

      Thanks, and will do! If anyone reading this comment wants to send a freely-licensed Figma design my way, I'll take a look any maybe use it for a future YT tutorial of converting it to HTML / CSS / JS / WordPress

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

    Truly good video content!

  • @ePilicK_tv
    @ePilicK_tv 6 місяців тому +1

    Hi Brad, thanks for the extract I bought the course a while ago but haven't had time to watch it yet. I'm finishing the one on javascript (which i recommend to everyone).
    I wanted to ask you something, are we bringing the whole tailwind library into production this way? Or are we only bringing in the classes we are using?
    If so, would it be possible to take only the classes we're going to call in our php files (or a way to call only the ones we need), where we're going to structure the site? So that we carry around a much smaller file.
    Thank you in advance

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +2

      Thanks for the support! Good question, the workflow we use in this video only uses/exports/bundles the Tailwind classes that our PHP and JS files actually use. Like you mentioned, it results in a much smaller exported CSS file for visitors to have to load. Here's the Tailwind config file for reference github.com/LearnWebCode/wordpress-task/blob/main/tailwind.config.js

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

      @@LearnWebCode ty so much Brad, you're the best!
      If I wanted to also include the css classes that I am going to call up inside gutenberg (in the classes section of the various blocks I am going to use), is there a way like for js and php files?
      If so, thanks again

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

      I may have solved it by adding a safelist.txt. I don't know if this is the best choice!

  • @DEBUGENTITY
    @DEBUGENTITY 6 місяців тому +1

    Yeah boii that what iam looking for some custom theme development. Great work
    Can h make more videos like this.. Means the difficult part is no one talking about.

  • @rits3010
    @rits3010 6 місяців тому +1

    Hi, could you please create a tutorial on wordpress ci/cd ? A humble request.

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

      Thank you, Your student from Udemy :)

  • @MrJfergs
    @MrJfergs 6 місяців тому +1

    So does this mean that full site editing for themes is basically not usefull? Wordpress seems to be in an odd place where there are multiple different ways to create a theme but non of them are the official way??

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +1

      I agree that WordPress is in an odd place. Some users might want FSE themes, whereas other users might never in a billion years want to edit page templates instead of just posts and pages. In my 40+ hour premium course I teach how to create a FSE theme with our own custom blocks just because I feel responsible to teach the new WP tech; and because there is a specific client type that might love that sort of thing (but that might be rare). Realistically speaking, how often is a non-developer going to want/need to change page templates / design elements as opposed to just managing blog posts and content pages? I don't really have an answer as much as more questions. I personally would never use a FSE theme for a site I'm publishing myself, and if it was for a client, I'd imagine the client would want me to make template changes instead of them messing around with blocks and settings etc... but I've always been a huge advocate for the separation of content and presentation. What's funny is it felt like WordPress was an advocate for that as well until about 2019 🤷‍♂️

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

    There's a new tool around STUDIO almost similar to LOCAL. what're your thoughts on that?

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

      Thank you so much for the heads up, I hadn't heard about Studio. Looks like it's officially from WordPress which is pretty amazing; I don't think there's ever been an "official" way of having a local dev environment other than the slow/heavy Vagrant / VM way for contributing to core. I'll have to check out Studio.

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

    Thank you for your good training. If possible, teach some high-level and more advanced training.
    For example, prepare a tutorial on how to write a JavaScript package and publish it on the NPM site. How to get a part of the inputs from the user through executive commands and... There is no need for the original package to be very big, I just want to learn how to work. Thanks for all the knowledge you share.❤❤

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

      Awesome idea! I just added the NPM video to my todo list.

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

      @@LearnWebCode 😍

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

    wait so is this a course that shows you how you to design and build websites but also how to integrate them with wordpress?

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

      Good question! I love to teach but I'm horrible at marketing. The course doesn't teach you how to design, but instead, how to take designs in Figma that a fictional designer on your team / company created, and how you can implement them into living breathing code. The course assumes you have zero coding experience, and is a "how do you first break into the industry" kind of course. You start with the very basics of HTML and CSS, and work up to JavaScript, Next, WordPress integration, MongoDB and more.

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

      @@LearnWebCode Looks really interesting especially the wordpress section, haven't been able to find any straight forward resources for building a wp theme with tailwind

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

    Thank you. 🙏

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

    Hey Brad, have you ever used Elementor with WordPress before? I’d love to see a tutorial where you design a WordPress theme with Elementor.

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

      Hey, thanks for the comment! Does the free version of their plugin offer good basics? Or do you basically "have" to use their paid version?

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

      @@LearnWebCode I have actually not used Elementor before. I have noticed though that some WordPress jobs say you need to know how to use Elementor to be hired by them. It seems to be second to WooCommerce as the most common WordPress plugin many WordPress jobs require you to know in addition to WordPress itself. I know that Elementor allows you to drag and drop and I think resize elements on your WordPress site like Wix does. Again, I haven’t used it before though, so I’m not sure what the situation with their paid/free version is. But since a number of WordPress jobs require you to know and use Elementor to be hired, I thought a tutorial on how to use it with your themes from the guy who taught me how to build WordPress themes would be beneficial.

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

      @@LearnWebCode I'm actually not sure. I've never used Elementor myself. But I've noticed that a lot of WordPress jobs are looking for people who know how to use Elementor. So I figured a tutorial from you building a theme using Elementor would be beneficial.

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

      That's what we do at DeoThemes :) I don't have a tutorial as there are plenty already on UA-cam. Working and coding with Elementor is way easier than default WP editor.

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

    Thanks sir ❤

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

    thanks 😊

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

    Anything chesper than Figma?

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

      I use Figma's free tier; so it's hard to get cheaper than zero 😃

  • @pfkellogg
    @pfkellogg 6 місяців тому +1

    Has this been added or will it be added to your udemy: WordPress for Developers course?

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +1

      Hi, on Udemy it's in my course titled "Become a Web Developer: 2024 Bootcamp" - which is also available in my platform's bundle - both as a monthly subscription or a one-time purchase learnwebcode.teachable.com/p/learnwebcode-premium

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

      @@LearnWebCode I was a little confused because at 51:48 in this video your mouse is selecting the incorrect course which is the one I am taking over again right now and rest assured I really enjoy it and it is really sinking in now. I almost talk like you now.

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

      @@pfkellogg Oh good call! Thanks for the heads up. I reused that ending outro from a previous UA-cam video without thinking about the exact course it was highlighting. I just tried using the UA-cam editor to edit an existing live video to cut out that outro to avoid that confusion.

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

    Brad, I am late this time to comment first 😂.

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +1

      🤣 I have faith you'll get first next video :D

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

      @@LearnWebCode thank you buddy

  • @proteus1
    @proteus1 6 місяців тому +1

    I can't stand using wordpress, its slow plugin compatablities, and loaded with php scripts that slow the website. I started using css and html and being lightweight will always outrank a wrordpress site.

    • @LearnWebCode
      @LearnWebCode  6 місяців тому +2

      If you don't have clients or team members that aren't developers who need to update / publish content then yes, 100%, WordPress is unnecessary and you can't beat static HTML pages. But if you need non-developers to regularly contribute content and updates then WordPress is my favorite option.

    • @London2ATL
      @London2ATL 6 місяців тому +2

      So what CMS do you use to manage your content?

    • @dapowebdeveloper
      @dapowebdeveloper 6 місяців тому +2

      You don't understand or know a thing about WordPress

    • @techtipsuk
      @techtipsuk 6 місяців тому +1

      You’re comparing Apples with Oranges

    • @healthadvice3091
      @healthadvice3091 Місяць тому +1

      bro imagine saying that while the rest of us earning happily earning 🤑🤑

  • @joinglobalnetworks
    @joinglobalnetworks 6 місяців тому +1

    I like your content and tutorial my friend but we are so busy in the war against the occupation as you know.