Pixel Rocket
Pixel Rocket
  • 27
  • 271 541
Figma for Web Developers – Full Course - Part 2 of 3
📚 Figma for Web Developers - Full Course Overview 🚀
This course is designed specifically for web developers who want to master Figma and seamlessly bridge the gap between design and code.
This is part two of a three part course.
You can find part 1 here: th-cam.com/video/np9WReo9pVU/w-d-xo.html
Timestamps of part 2 video:
0:00 - 4:16 - Toolbar Overview
4:17 - 7:37 - Properties Panel Overview
7:38 - 9:12 - Prototyping Basics
9:13 - 13:32 - Layers, Groups, Frames & Sections Overview
13:33 - 16:55 - Constraints & Resizing
🎥 Course Structure & Video Breakdown of full course
Intro to Figma
📌 What is Figma?
📌 Figma Cloud vs Figma Desktop App
📌 Free Account vs Paid Account
📌 Setup Account
Getting Started
📌 Figma File Browser Tour
📌 Different Ways to Open a Figma File
📌 Figma Editor Introduction
📌 Figma Navigation Panel
📌 Figma Canvas
📌 Toolbar Overview
📌 Properties Panel Overview
Core Concepts
📌 Frames, Sections, Groups & Layers
📌 Constraints & Resizing
📌 Auto Layout
📌 Typography
📌 Styles
Dev Mode
📌 How Designers Will Share a File with You
📌 What to Do When You Review a Design
📌 What is Dev Mode?
📌 Navigating Dev Mode Interface
🎯 Who Is This Course For?
Frontend Developers
Full-Stack Developers
Software Engineers
Anyone collaborating closely with design teams
🚀 Why Take This Course?
Gain clarity on design handoffs
Learn to extract precise design specifications
Improve team collaboration and workflows
#FigmaForDevelopers #FrontendDevelopment #UIUX #WebDevelopment #FigmaTutorial #LearnFigma #DeveloperTools #DesignToCode
Let me know if this aligns with your course vision or if you'd like refinements! 🚀
มุมมอง: 176

วีดีโอ

Figma for Web Developers - Full Course - Part 1 of 3
มุมมอง 76516 ชั่วโมงที่ผ่านมา
📚 Figma for Web Developers - Full Course Overview 🚀 This course is designed specifically for web developers who want to master Figma and seamlessly bridge the gap between design and code. This is part 1 of a 3 part video. Part two is here: th-cam.com/video/PxZ-6mXI4tY/w-d-xo.html Timestamps of part 1 video: 0:00 - 0:54 - What is Figma 0:55 - 2:14 - Figma Cloud VS Figma Desktop 2:15 - 3:10 - Fre...
Install Bootstrap via NPM | 2024
มุมมอง 4272 หลายเดือนก่อน
In this video, I'll guide you through the complete process of installing Bootstrap via NPM and customising its SASS variables. We start by setting up a blank project, then dive into Bootstrap's source code folder to understand its structure. I’ll show you how to use a VSCode plugin to compile SASS and then switch to using the NPM SASS plugin. Finally, we'll explore how to properly customise and...
Bootstrap Crash Course 2025
มุมมอง 2692 หลายเดือนก่อน
Welcome to this introduction to Bootstrap, the popular web developer framework! Whether you're a complete beginner or looking to refresh your skills, this video series will guide you through the essentials of Bootstrap, step by step. We’ll explore what Bootstrap is, its pros and cons, and whether it’s right for your project. Plus, you’ll learn practical ways to add Bootstrap to your site, inclu...
TailwindCSS - How To Use @apply & @layer directives
มุมมอง 4.8K2 ปีที่แล้ว
If you're new to Tailwind CSS, then you're likely trying to figure out how to use the various directives. In this video, I'll walk you through the @layer and @apply directives. We'll refactor an HTML button and go from inline Tailwind utility classes to using the same utilities as part of a CSS component class. My website www.pixelrocket.store TailwindCSS Crash Course th-cam.com/video/BY6fhtCDr...
How To Recompile Bootstrap's Sass In VSCode
มุมมอง 7K2 ปีที่แล้ว
In today's Bootstrap how-to video, I'll show you two ways you get Bootstrap setup in your project using VSCode: in the first option, we'll download the Bootstrap source files, add them to our project, and then use a VSCode plugin to compile our Sass into CSS. In the second option, we'll use NPM to download Bootstrap and then use that same VSCode plugin again to compile our Sass into CSS. My web...
PostCSS Crash Course
มุมมอง 4.6K2 ปีที่แล้ว
PostCSS is a Javascript tool used to transform your project's CSS. In this crash course, I'll talk you through the basics, compare PostCSS to Sass, and then we'll code together on two projects: the first project will show you what functionality PostCSS offers you as a pre-processor, so a Sass replacement. The second project will show you how you can use PostCSS to prepare your production CSS. M...
How To Add Bootstrap To Your Wordpress Theme/Template
มุมมอง 12K2 ปีที่แล้ว
In today's Wordpress How To video, I'll show you the various ways you can add Bootstrap 5 to your Wordpress template. We'll start off by adding Bootstrap to our Wordpress site via a CDN (Content Delivery Network), then we'll download the Bootstrap source code, add it to our Wordpress template, and use a Vscode plugin to recompile our Sass. Lastly, I'll show you how to use Gulp to manage all the...
TailwindCSS - How To Write A Custom Plugin
มุมมอง 3.5K2 ปีที่แล้ว
If you're looking to write your own custom Tailwind CSS plugin as part of your project (not a standalone NPM package), then this video will show you the basic steps to handle this. We'll code a plugin that sets base styling for a H1 tag, and then we'll extend the plugin to also add a custom component to the Tailwind CSS component layer. My website www.pixelrocket.store TailwindCSS Crash Course ...
TailwindCSS - How To Handle Light/Dark Mode
มุมมอง 9K2 ปีที่แล้ว
Once you've built your project using Tailwind CSS, you might then also need to support light/dark mode. In this video, I'll show you two ways that TailwindCSS can help you toggle between light and dark mode. My website www.pixelrocket.store TailwindCSS Crash Course th-cam.com/video/BY6fhtCDrqU/w-d-xo.html
How To Add Javascript Files To A Wordpress Theme
มุมมอง 3.7K2 ปีที่แล้ว
In this video, I'll show you the code required to add Javascript to your Wordpress template. You'll learn about the Wordpress functions wp_enqueue_scripts, wp_register_script, and wp_enqueue_scripts. My website www.pixelrocket.store wp_enqueue_scripts developer.wordpress.org/reference/hooks/wp_enqueue_scripts/ wp_register_script developer.wordpress.org/reference/functions/wp_register_script/ wp...
How To Customise Bootstrap's Breakpoints
มุมมอง 4.3K2 ปีที่แล้ว
Bootstrap breakpoints allow developers to use different styling for the same content depending on the user's device width. Find out how to customise the default breakpoints using Sass in this video. My website www.pixelrocket.store Timestamps 0:00 Intro 1:02 Sass map 1:33 Override Sass map 2:23 Sass map amend
Tailwind CSS Crash Course
มุมมอง 6K2 ปีที่แล้ว
In this crash course, you'll learn what Tailwind CSS is, how it differs from other frontend frameworks, and you'll then build a one page project. You'll learn how to install Tailwind CSS using NPM, how to customise Tailwind, and you'll build elements such as pricing tables and feature summaries. We'll also discuss whether you should be creating CSS components or just using CSS utilities in your...
How To Enable Gradients In Bootstrap
มุมมอง 4.9K2 ปีที่แล้ว
In this video, we'll go through what Bootstrap 5 offers developers in terms of gradients. We'll look at what you can use out of the box, and what additional gradient options you can enable through your template's Sass settings. My website www.pixelrocket.store Timestamps 0:00 Intro 0:50 Enable Sass option 1:40 Button gradient 2:27 Alert gradient
Tailwind CSS How To Customise Colours
มุมมอง 15K2 ปีที่แล้ว
Tailwind CSS gives you all available colours (V3) out of the box. But you can also define your own colours, or only pick some of the available colours. Let's go through the steps required to customise the available colours using Tailwind CSS. My website www.pixelrocket.store TailwindCSS Crash Course th-cam.com/video/BY6fhtCDrqU/w-d-xo.html Timestamps 0:00 Intro 0:57 Extend colour scheme 3:38 Se...
Bootstrap 5 Crash Course 2022
มุมมอง 11K2 ปีที่แล้ว
Bootstrap 5 Crash Course 2022
How To Install Tailwind CSS via NPM
มุมมอง 3.6K2 ปีที่แล้ว
How To Install Tailwind CSS via NPM
Build A Custom Modal With Bootstrap 5
มุมมอง 4.6K2 ปีที่แล้ว
Build A Custom Modal With Bootstrap 5
How To Customise Bootstrap Spacers
มุมมอง 4.3K2 ปีที่แล้ว
How To Customise Bootstrap Spacers
How To Enable Bootstrap Negative Margins
มุมมอง 4.7K2 ปีที่แล้ว
How To Enable Bootstrap Negative Margins
Customize Bootstrap font family
มุมมอง 17K2 ปีที่แล้ว
Customize Bootstrap font family
Change Bootstrap background color
มุมมอง 19K2 ปีที่แล้ว
Change Bootstrap background color
Change Bootstrap's colors
มุมมอง 37K2 ปีที่แล้ว
Change Bootstrap's colors
Customize Bootstrap's buttons
มุมมอง 11K2 ปีที่แล้ว
Customize Bootstrap's buttons
Install Bootstrap via NPM
มุมมอง 37K2 ปีที่แล้ว
Install Bootstrap via NPM
Sass Crash Course 2022
มุมมอง 32K2 ปีที่แล้ว
Sass Crash Course 2022
Customise Bootstrap's Sass
มุมมอง 15K2 ปีที่แล้ว
Customise Bootstrap's Sass

ความคิดเห็น

  • @gauravgarg7703
    @gauravgarg7703 4 วันที่ผ่านมา

    Part 3 when?

    • @pixelrocket66
      @pixelrocket66 4 วันที่ผ่านมา

      Probably not for another two weeks. Part 3 is focused on dev mode, and I want to create some resources to give you challenges.

    • @gauravgarg7703
      @gauravgarg7703 4 วันที่ผ่านมา

      @pixelrocket66 looking forward to it, btw love this course

  • @befra-f7w
    @befra-f7w 12 วันที่ผ่านมา

    The last one doen,t work. gulp buildStyles doesn't exist, it was to be bpm run-script gulp buildStyles but then an error appears "'buildStyles' errored after 3.74 ms" II have everything the Same, also the main.scss is not created after buildStyles.

  • @neoocm
    @neoocm 26 วันที่ผ่านมา

    Yes, describe the setup please

  • @chivhub
    @chivhub หลายเดือนก่อน

    hello sir what if i cant choose the static page option on the cdn

  • @chaosknight3175
    @chaosknight3175 2 หลายเดือนก่อน

    This tutorial is gold!

  • @danieleoneta
    @danieleoneta 2 หลายเดือนก่อน

    glad to see you back! Great video, thanks.

    • @pixelrocket66
      @pixelrocket66 2 หลายเดือนก่อน

      Thank you - been very busy with my day job and setting up my site in my free time, but am going to start rolling out a bunch of Bootstrap and Tailwind content over the next few months!

  • @ahaar3838
    @ahaar3838 2 หลายเดือนก่อน

    I also hope that you can do headless wordpress or... Actually, I don't mind any wordpress videos for as long that you can provide more WP related videos

  • @ahaar3838
    @ahaar3838 2 หลายเดือนก่อน

    I liked the way you explain on each of the concepts, I hope that you do more WP videos including plugin or woocommerce development

  • @him99ful
    @him99ful 2 หลายเดือนก่อน

    How to use those blue-500 or green-400 type of color in bootstrap

  • @mdmasudurrahman851
    @mdmasudurrahman851 3 หลายเดือนก่อน

    could you please make a series for customize all typography of bootstrap 5.3?... currently I am trying to customize font-size mapping my own.

    • @pixelrocket66
      @pixelrocket66 3 หลายเดือนก่อน

      yeah, I'm busy filming an entire learning path for Bootstrap. It'll include standalone video courses for all the Bootstrap major topics (colours, fonts, breakpoints, components) and will include projects to accompany each video series as well. I'll be releasing it on my website.

  • @falinhares
    @falinhares 4 หลายเดือนก่อน

    Excelent. Worked just like a charm for me.

    • @pixelrocket66
      @pixelrocket66 4 หลายเดือนก่อน

      Glad it helped!

  • @MichaelAguilar-j2l
    @MichaelAguilar-j2l 5 หลายเดือนก่อน

    What's your VS Code color highlighter extension on your index.html file?

  • @rossscondie4615
    @rossscondie4615 5 หลายเดือนก่อน

    Man... everything worked perfect... even the Minimised code got generated in the dist folder... but when I upoad that to a plain html/php server it just displays the unformatted version as if Bootstrap isn't working at all... does the server need to have bootstrap installed too or should the code work by itself? Any ideas what I've done wrong, as I said everything works perfect on localhost

    • @pixelrocket66
      @pixelrocket66 5 หลายเดือนก่อน

      Do you have a link to your website? Also, put your full project code up on a github repo and send me the repo link.

    • @rossscondie4615
      @rossscondie4615 5 หลายเดือนก่อน

      @@pixelrocket66 Thanks for that offer, very kind of you! I re-did the whole tutorial from scratch, but hit the same problem... it's taken me a while to notice but in the dist generated code, the links to CSS and JS are being generated with an extra / in front of the path... so for example href="/index.c1f971ee.css" when it should be href="index.c1f971ee.css" --- if I just go in and remove the extra /, everything works!! Thank you. On to your other videos now :)

  • @donnazukowski
    @donnazukowski 5 หลายเดือนก่อน

    Great course. Got me up and running. Thank you so much!

    • @pixelrocket66
      @pixelrocket66 5 หลายเดือนก่อน

      Great to hear!

  • @lingdotdev
    @lingdotdev 5 หลายเดือนก่อน

    Thank you so much for making this tutorial! 👍

    • @pixelrocket66
      @pixelrocket66 5 หลายเดือนก่อน

      You're welcome!

  • @fatoyeoluwaseun
    @fatoyeoluwaseun 6 หลายเดือนก่อน

    A great tutorial, I must say!

    • @pixelrocket66
      @pixelrocket66 5 หลายเดือนก่อน

      Glad it was helpful!

  • @BG-xu8be
    @BG-xu8be 6 หลายเดือนก่อน

    Nice, but it would have been more useful if you had shown also how to compile the javascript.

  • @markyzee31
    @markyzee31 7 หลายเดือนก่อน

    Hey PR, I ran through everything in the gulp version, got the sass compiling. The JS is compiling but the local WP site isn't reading the JS it seems? No errors anywhere. Any tips?

    • @pixelrocket66
      @pixelrocket66 6 หลายเดือนก่อน

      Difficult to tell without seeing your code. Put your project up on a github repo and paste in the URL (make sure the repo is public).

  • @rocinante6033
    @rocinante6033 7 หลายเดือนก่อน

    bro you're a legend !!!!!!!!!!!! the best channel ever

  • @daily-emotions-179
    @daily-emotions-179 7 หลายเดือนก่อน

    I saw you btn custom color is black. How can I change to white?

  • @arshadahamed988
    @arshadahamed988 7 หลายเดือนก่อน

    Bro what is component base utilities in tailwind

  • @dreamlandband
    @dreamlandband 8 หลายเดือนก่อน

    Thank you so much

  • @nailabouadil8357
    @nailabouadil8357 8 หลายเดือนก่อน

    this video deserves over a million views!

  • @D--3
    @D--3 8 หลายเดือนก่อน

    Edir: Would you have a different SCSS file for different webpages? Or would that be compiled into one file. I'm supposed to be working with 5 different pages. Awesome!! I managed to get this to work! The autoload & sass compiling is so coolll - I wish I could follow your boilerplate flow to learn the proper process - but I can't figure it out so far so I'm gonna hv to hack it a little with the looming deadline :')

  • @xopc8788
    @xopc8788 8 หลายเดือนก่อน

    🎯 Key Takeaways for quick navigation: 00:00 *💻 SASS - preprocesor CSS* 04:37 *🔄 SASS redukuje powtarzalność* 22:37 *📁 Importowanie plików* 26:15 *❌ Problem z `@use` a `@import`* 38:21 *🎨 Zmienne, listy i mapy* 47:01 *📝 Listy Sass* 52:03 *🧰 Mixiny Sass* Made with HARPA AI

  • @anonymousme3571
    @anonymousme3571 9 หลายเดือนก่อน

    I got this error right off the bat :') What do I do? Tried searching how to install NPM or launch but no luck. zsh: command not found: npm

    • @pixelrocket66
      @pixelrocket66 9 หลายเดือนก่อน

      You need to install node: nodejs.org/en. Make sure you shut down your command line after installing node as well. Good luck!

    • @anonymousme3571
      @anonymousme3571 9 หลายเดือนก่อน

      @@pixelrocket66 Thank you! I'll go ahead and give it a go again :>>

  • @manishjha6239
    @manishjha6239 9 หลายเดือนก่อน

    Only one word for this awesome tutorial about bootstrap install via NPM...Superb Man

  • @DavidRobertLewis
    @DavidRobertLewis 9 หลายเดือนก่อน

    Thanks, super useful. Anything on streamlining wp dev using bootstrap and sass is helpful. Is parcel better than gulp? How would you go about including a range of js frameworks into the theme, for example, @fancyapps/ui?

  • @ParhamSalamati
    @ParhamSalamati 9 หลายเดือนก่อน

    Very strait forward, right to the point, thanks for sharing ^_^

  • @green_letsplay
    @green_letsplay 9 หลายเดือนก่อน

    Thank you very much!

  • @Comintern01
    @Comintern01 9 หลายเดือนก่อน

    sir, pls teach us how to write nested tailwind css in cssfile

  • @simonbates9454
    @simonbates9454 10 หลายเดือนก่อน

    i followed all the steps carefully but no scss styles are added when i run live server?

  • @ahmedaishan
    @ahmedaishan 10 หลายเดือนก่อน

    Overriding Bootstrap styles with custom CSS is acceptable, isn't it?

  • @marceladonicova571
    @marceladonicova571 10 หลายเดือนก่อน

    After gulp buildScripts the main.js is generated but dropdown in page is not function. What se the problem maybe

  • @aidanwatt8707
    @aidanwatt8707 10 หลายเดือนก่อน

    Just joined you on this trip but could have done with knowing that when you select sample page in wordpress it uses the index page.php from the theme!!

  • @sebvargas
    @sebvargas 10 หลายเดือนก่อน

    Thank you, this was a wonderful tutorial!

  • @DavidRobertLewis
    @DavidRobertLewis 11 หลายเดือนก่อน

    Great tutorial, but got stuck half-way here with the spacer amends, terminal kicks us this error: @parcel/transformer-sass: Undefined variable. ╷ 10 │ 1: $spacer * .25, │ ^^^^^^^ ╵ src/css/abstracts/_variables.scss 10:6 @import src/css/main.scss 2:9 root stylesheet Error: Undefined variable.

    • @DavidRobertLewis
      @DavidRobertLewis 11 หลายเดือนก่อน

      I fixed it by adding: /* import only the necessary Bootstrap files */ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; Weird because I already have @import "~bootstrap/scss/bootstrap";

  • @Stealerwolf
    @Stealerwolf 11 หลายเดือนก่อน

    tysm bro

  • @joeri29
    @joeri29 11 หลายเดือนก่อน

    Thank you so much!!😉😉😍😍☺☺

  • @aidanwatt8707
    @aidanwatt8707 11 หลายเดือนก่อน

    Great job and superb clarity attached to common sense. Thanks

    • @pixelrocket66
      @pixelrocket66 11 หลายเดือนก่อน

      Glad it was helpful!

    • @aidanwatt8707
      @aidanwatt8707 11 หลายเดือนก่อน

      I have followed your framework which worked fine except for one small item. I used the Navbars Offcanvas html instead of just a navbar. I do have a bootstrap website but the offcanvas part is not working nor the color mode button. Can you give me a heads up how to connect them again.

  • @morchellemusic2829
    @morchellemusic2829 ปีที่แล้ว

    I enjoyed this crash course! I use Sass with BEM like you mention at the end of the video, I usually nest as you mention by using class, it's great, readable and maintainable

  • @CoolIntellect
    @CoolIntellect ปีที่แล้ว

    Thanks for this amazing tutorial man! It was a bit difficult for me at first but after learning the basics of sass I can say it's so helpful!

  • @CoolIntellect
    @CoolIntellect ปีที่แล้ว

    Thanks a lot, man! You've significantly strengthened my foundations. I do have some weaknesses in Sass, but I recognize its importance and find it truly amazing. I'm committed to working on it to improve. Thanks again, man - your assistance means a lot to me. I highly appreciate it!

  • @ujolmaharjan2010
    @ujolmaharjan2010 ปีที่แล้ว

    Thanks 🙏

  • @kkokoruz
    @kkokoruz ปีที่แล้ว

    Everything was going great until 19 minutes in. Once the Sass Importing for the Functions, Variables and Mixins happen, it breaks. I tried adding one at a time. First the Functions - Error Can't find stylesheet to import. I saw a comment further down saying it doesnt work with BS 5.3 so I tried again with BS 5.2 Same issue. If someone knows how to resolve I would appreciate hearing from you. Thank You

  • @MeezanTheFairBloke
    @MeezanTheFairBloke ปีที่แล้ว

    Very leka nice course mate! Keep it up!

  • @ChristopherPowers77
    @ChristopherPowers77 ปีที่แล้ว

    Thanks this is just what I needed to dust off my wordpress theme building.

  • @thomasmarx2471
    @thomasmarx2471 ปีที่แล้ว

    This was great! Been trying to figure out the best way to set this up and kept getting lost. This all worked! One question, why with the variables is it scss/_variables.scss with an underscore, but when you import them there is no underscore @import "../node_modules/bootstrap/scss/variables";. Why wouldn't the file names just be the same?

  • @jenniearll1337
    @jenniearll1337 ปีที่แล้ว

    Newbie here. I'm accessing the terminal through VS Code to set up the parcel bundler but it says zsh: command not found: npm - any ideas? I can't really continue further without this and I like your approach, hoping to complete this and other courses.

  • @stewtech
    @stewtech ปีที่แล้ว

    How did you get Wordpress files on vs code?