Learn HTML & CSS For Beginners (Let's Code From a Figma Design)

Рет қаралды 9,593

Күн бұрын

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

Пікірлер: 50

@brauliogarcia1836 6 ай бұрын

Brad, you are one of the best teachers I saw in my life. thank you for sharing and inspiring others! wish you the best!

@LearnWebCode 6 ай бұрын

Thank you so much! That means a lot to hear. Wish you all the best too!

@aci25tv 6 ай бұрын

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.

@Z.Bridge 4 күн бұрын

Z.Bridge Being a very beginner I enjoyed your video's which are great, but even more your way of teaching. Thanks for bringing over your knowledge the way you do it.

@midnight9428 6 ай бұрын

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! 🙌

@Z.Bridge 4 күн бұрын

Being a very beginner I enjoyed your video's which are great, but even more your way of teaching. Thanks for bringing over your knowledge the way you do it.

@LearnWebCode 4 күн бұрын

I'm so glad the video was helpful; and thank you so much for the kind comment 🙏

@teammoderngeeks 6 ай бұрын

Thank you for this video. Please do more of these. And Welcome back, Brad!

@iambhavinpatel 6 ай бұрын

Glad to see you back, Brad! After 6 months ❤❤ Which is your upcoming course?

6 ай бұрын

Great to see you back mate, you are the best:)

@kelvinzimmerman8852 3 ай бұрын

Very detailed, simplifies topics concepts and provides great added context

@simphiwengcobo1513 6 ай бұрын

it my first time in this channel, Im convinced, im in

@tamisweitzer275 6 ай бұрын

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?

@LearnWebCode 6 ай бұрын

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!!!

@matthewbelcher200 5 ай бұрын

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.

@neppe4047 6 ай бұрын

glad to see you back

@SandroGiambra 5 ай бұрын

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!

@user-ix2ey3rr5c 6 ай бұрын

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 :(

@jeevank3849 5 ай бұрын

inspiring others! wish you the best! love you from india

@srfahmd 6 ай бұрын

Looking Good!

@brandsintel 6 ай бұрын

Been forever mate. Been forever. ❤

@ronidinho 6 ай бұрын

BRAD IS BACK!!! YOU DA MAN!! 🙌

@LearnWebCode 6 ай бұрын

Thanks! Which tech have you been working on or learning lately?

@hassanm7865 6 ай бұрын

Great teacher💗

@dilhansiriwardhana2937 6 ай бұрын

Thats great... 😍😍

@midnight9428 6 ай бұрын

I’m glad to shadow you 👍

@touseefghazanfar8487 6 ай бұрын

You are awesome. 👍

@TheInternalNet 5 ай бұрын

AFFIRMATIONS!! MOAR!!

@EmiliaKaida 6 ай бұрын

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.

@majadulislampallab1351 6 ай бұрын

Brad, take love from Bangladesh🥰🥰🥰🥰

@philip9677 6 ай бұрын

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

@LearnWebCode 6 ай бұрын

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.

@Ubaid-24 6 ай бұрын

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?

@bigjoshallen 6 ай бұрын

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?

@LearnWebCode 6 ай бұрын

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.

@bigjoshallen 6 ай бұрын

@@LearnWebCode flex box, css grid

@anis.science 6 ай бұрын

Hi Brad, Can you tell me which external keyboard is the best one for coding in Windows?

@LearnWebCode 6 ай бұрын

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 KZfaq 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!

@user-ge1sq3nx1z 6 ай бұрын

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.

@funguy29 6 ай бұрын

You're a G

@gokilbree5396 6 ай бұрын

let's learn to code 😊😊

@LearnWebCode 6 ай бұрын

Let's do it 🥳

@thecodemon 6 ай бұрын

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.

@LearnWebCode 6 ай бұрын

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.

@philip9677 6 ай бұрын

how can i shadow your work