Learn HTML & CSS For Beginners (Let's Code From a Figma Design)
Вставка
- Опубліковано 8 лип 2024
- Join the full course here learnwebcode.teachable.com/p/...
Here is the Figma reference design that we are building together www.figma.com/community/file/...
0:00:00 Your New Career Path
0:04:09 What Is A Developer?
0:16:26 How / Where Do We Write Code?
0:33:08 Let's Start Coding The Homepage
0:49:43 Layout Spacing Basics
1:06:47 Finding Your Joy
1:10:32 VS Code Settings & Google Fonts
1:27:39 CSS Box Model
1:44:40 CSS Grid (Multiple Columns)
1:57:42 SVG Icons
2:11:17 Quick SVG Figma Tip
2:12:29 Background Splashes of Color
2:31:48 Preview of Projects
Brad, you are one of the best teachers I saw in my life. thank you for sharing and inspiring others! wish you the best!
Thank you so much! That means a lot to hear. Wish you all the best too!
I am a quadriplegic, 45 years old, and eager to learn. I have been watching your videos, and love your teaching skills. Your videos are easy to understand and follow. Thank you for taking the time to create these educational videos and share your knowledge with others.
Honestly, I developed a love for web development after following Brad's tutorial on Udemy. He's an amazing web development teacher I found on the internet. Whether it's HTML, CSS, JavaScript, or PHP, he nails it every time. Thanks a lot, Brad! 🙌
Thank you for this video. Please do more of these. And Welcome back, Brad!
Great to see you back mate, you are the best:)
glad to see you back
it my first time in this channel, Im convinced, im in
Very detailed, simplifies topics concepts and provides great added context
Great teacher💗
Looking Good!
Glad to see you back, Brad!
After 6 months ❤❤
Which is your upcoming course?
inspiring others! wish you the best! love you from india
Been forever mate. Been forever. ❤
You are awesome. 👍
I’m glad to shadow you 👍
Thats great... 😍😍
Welcome back Brad, you're getting better and better. This video is very well explained and encourages me to learn more. The coupling with Figma is very useful. I'm using it together with vs code. I wanted a clarification: does switching to dev mode in Figma have a cost? Clicking on it returns: "to use dev mode on this file, move it to a paid team"...
Anyway...
I just purchased the course and after the top page of the first two hours I am already immersed in the page-section. Thank you very much!
Hey Brad, one good thing is that you are back and also you have lauched0 a brand new course which I was eagerly waiting for...yayyy :D
one bad thing is I won't be able to afford your new course :(
BRAD IS BACK!!! YOU DA MAN!! 🙌
Thanks! Which tech have you been working on or learning lately?
AFFIRMATIONS!! MOAR!!
Brad! I was floored when you said you struggle to learn new things. I never would have guessed! Over the last year I've been working on learning Drupal for work and I keep wishing you had a Drupal course like your WordPress course. But then, I would never wish Drupal on you.
Maybe it's because you know the struggle, and that is why you are so good at teaching. It's good to see you again.
BTW, I've spent an eon trying to figure out how you do that thing with your cursor??? How do you make that square box around wherever you drag your cursor?
Hi! Thank you so much! I never put it into words like that before, but yes, I think my own challenges during learning are my biggest motivation to teach and help it make sense for others.
If you're on Mac you can press "CMD + Shift + 4" to click and drag a rectangle to measure pixels. I think Windows has a similar "clipping" tool but I don't know if it has a universally available one-shortcut-key away feature.
I had a friend who was really into the Drupal world. It's reputation really reminds me of WordPress; people outside of it dread it 😂 - but for the developers in the community, they realize you can use the platform to build just about anything you can think of; super powerful! I've only worked on 3 Drupal projects over the years and I didn't do any of the data / dynamic work; just basic template stuff. It's hard/complex as a beginner!!!
Great tutorial for beginners, I even picked up a few things and i've been doing this for a while. One thing to note is that I think dev mode is only available on a paid plan, though I could be mistaken.
Brad, take love from Bangladesh🥰🥰🥰🥰
Hi Brad, thanks for the tutorial!
I have some questions about your courses:
- Will the course you are showing here be on Udemy too?
- In your "Wordpress - Unlock power with code" course, do you teach and use OOP PHP inside too? Because I have experience with OOP in Java, so wondering if I can pick up OOP for PHP along the way there.
let's learn to code 😊😊
Let's do it 🥳
Thank you sir Brad for this incredible course. You are my best teacher that I always admire and want to be like, and such I registered your courses on udemy platform. Thank you for the detailed instructions and guidance.
Sir Brad, I want to ask, is it possible. you use pseudo selector like div::before and div::after, instead of creating the divs you created with the classes circle and circle-two to make the gradient in this video?
You're a G
Hey Brad, would really value your mentorship, I have purchased a few of your udemy courses and hoping to complete them. Was really focused on wordpress but now trying to learn react and or vue. It seems the web deve landscape seems to always be progressing so not sure what to learn react or vue or web components, my previous role was heavily WP based so hoping future roles will be more JS based, great videos btw your an awesome teacher
Thanks for the message! It's just my own biased opinion, but I'd definitely recommend React. Not only does it have more job opportunities, but Next.js is trending lately and it's React-based. Also, if you're into the WP world, then React knowledge is very powerful! The Gutenberg editor uses React for blocks, and the upcoming "Interactivity API" (for public front-end) is based around Preact I believe, but still, React knowledge should be a plus.
Hi Brad,
Can you tell me which external keyboard is the best one for coding in Windows?
Hi! Keyboards are personal preference, but I'm a fan of any mechanical keyboard, and I like all switch types except for blues. I've had good luck with mechanicalkeyboards.com/ - I'd recommend searching UA-cam for "mechanical keyboard switch type sound and feel comparison" to see which switch type seems the most appealing for you. Also placing the keyboard on a folded towel or desk mat can go a long way towards making typing more enjoyable. Cheers!
I love the course so far. I can't get the full course tho i don't have enough money. Are you doing any giving aways yet to some lucky subscribers?
Glad you're liking it so far! I won't be doing any give aways, but is there a topic / technology in particular that you're interested in learning? I can always do bite-size videos here on my channel.
@@LearnWebCode flex box, css grid
Brad - I think you are assuming that I am watching video on the same screen that I’m trying to build the website on so when you keep clicking on figma and then moving it, I dont know what you are doing as I am on two screens. Am now totally lost as to how to get the set up on to Figma and am giving up.
how can i shadow your work
Can you make a Tutorial on how to create a custom WooCommerce OR Shopify Store from a Figma Design File provided by Clients. It is a humble request brother.
That's a great idea for a tutorial! I'll add it to my list, but probably won't get to create it anytime super soon. For what it's worth, I usually create a 100% static simple separate HTML/CSS/JS folder and then once I'm happy with the way it looks only then do I even begin to try integrating it with Woo or Shopify. That way I'm using all of my brains horsepower on one aspect/task at a time.
i wish could fast for this video
How to get job sir??
Where do you live brother ?
"Promo SM"
Holy fuck I actually love you😇