Absolute beginner’s guide to starting web development in 2023

Рет қаралды 95,227

Күн бұрын

Most web developer roadmaps cover things that you might be learning over the next several years, which can seem overwhelming when you’re just learning the very basics of HTML, so this video is here for people who’re just starting off, or who are thinking about getting into web development.
🔗 Links
✅ My video on the essential HTML elements for beginners: • The only tags you need...
✅ The roadmap I showed at the start: roadmap.sh/frontend
✅ Adrian's video on getting VS Code on your phone or tablet: • VS Code on my Phone fo...
✅ ICodeThis: icodethis.com/?ref=kevin
✅ Frontend Mentor: www.frontendmentor.io/
Disclaimer: Some of the links above might be affiliate links, which means that I'll receive a commission in case you like and decide to purchase the product or service. This comes at no extra cost for you, and helps support my channel 😊
⌚ Timestamps
00:00 - Introduction
00:16 - Who this video is for
00:37 - A computer/laptop will make your life easier
01:22 - Browsers
01:42 - Code Editor
02:49 - The languages of the web
06:19 - Don’t try to design and code at the same time
07:43 - You’re making more progress than you realize
09:36 - Practice a lot
11:00 - Note taking
11:52 - Ask questions
14:35 - Don’t rush it
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 256

@PeaceOutILoveMrYoung 8 ай бұрын

"It's only 4 months, you are still a beginner." I needed to hear this, Kevin.

@RichardCalder67 10 ай бұрын

Great video. One piece of advice that I have for new developers is type things out, even code snippets you find online. Copy and paste is bad. Typing does two things, first and foremost it commits syntax to memory, meaning you won't have to Google it every time you try to do it. Second, it allows you time to reason about, and learn, what the code is actually doing.

@tajjamalabbas 9 ай бұрын

I have 1st PC in the office and have a lot of free time I could not download window 10 it's a 32 bit Can you tell me any online code editor for practice? 8:10

@christopherkecun8349 10 ай бұрын

Thanks for returning to the start. It is much appreciated.

@papyrus88 10 ай бұрын

Amazing! A community like that was just what i was looking for!! ❤️❤️❤️

@andresfelipeladinoespitia 10 ай бұрын

Thanks a lot, Kevin. I like this beginner/advanced approach you have decided to adopt for your content. Your name is a staple in the web development community, and I'm pretty sure your contributions to both beginners and advanced developers are highly appreciated. Thanks for the time and effort you put into your content.

@harikrishnanpandyan5684 10 ай бұрын

Me : Learning more than 9 months still watching the video.. 😅😂😜

@Alex.Shalda 10 ай бұрын

Hey! Already applying?

@olaniyanayodele5986 10 ай бұрын

Css got us all like this😂

@fuzzboi 10 ай бұрын

Been learning for 5 years! In the same situation 😂👏

@nickodicko8866 10 ай бұрын

Same 😂

@tamunotonyespencer922 10 ай бұрын

@@olaniyanayodele5986 where you at?

@bensonbenson4149 10 ай бұрын

Glad to have seen this...started in July and I'm glad for progress. Thank you kevin

@aal2002 6 ай бұрын

Thank you for making a video for beginners that actually makes sense!

@NKXyooj 9 ай бұрын

This video gave me some inspiration. I graduated with an associate degree in web development and design and still feel like a beginner on many concepts. I’ll be looking at your other videos to teach myself again. Thanks for the video! 🙌

@ABelugaWhale 10 ай бұрын

I know that it's not a coding essential, but I would love a "Getting Started with Git/GitHub" video alongside the "Getting Started in VS Code"

@BrentMayberry 5 ай бұрын

The notetaking suggestion is so good. So many of us are satisfied when something works, and we move on. Taking notes helps cement concepts and patterns in your mind, and it's a great way to collect your own code snippets to use later. Thanks for the encouragement and advice, Kevin!

@courtneysdani 9 ай бұрын

Love the video. This journey is definitely discouraging. I started a bootcamp and I’m almost on month two and I have been struggling….. I feel like we are learning everything so quickly I don’t have time to really play with or build things with the new things we are learning. I do better when I don’t feel so much pressure or so rushed.

@Swiftwebberi67 9 ай бұрын

Thanks a lot for this Insight Kevin. Glad to have found your community!

@jorgegamboa5408 10 ай бұрын

I started like 5 months ago, I have studied lots of hours every day and yeah , Kevin is 100% right… the difference between when you start and now is a whole different thing. CSS ❤️

@Evangelist45938 10 ай бұрын

Kevin you are my hero in web developement I always recommend your channel when people say how do i learn css :)

@explorer8279 6 ай бұрын

I will being Sticking to your channel on this new journey of mine because your content are Concise and in-depth and straight forward. ❤

@juli.72 10 ай бұрын

Awesome video as usual. Thanks for this Kevin!

@andi1984dev 10 ай бұрын

Thank you for this incredibly honest and back-to-the-roots review on how to start in web development. It's refreshing to see a genuine guide that doesn't rush the process but emphasizes the importance of steady learning and practice. This is a must-watch for anyone beginning their journey in web development. Kudos for keeping it real! Greets from someone "old" started webdevelopment when there was Mobile Internet Explorer version 5 😆

@musziknchocl8 6 ай бұрын

I just came across your video as I'm working towards a career transition into tech. I'm in the exploratory stage and trying to decide which path/skillset I want to pursue (UX or front-end dev). Your video is extremely encouraging and helped me understand that there's a community available and that I'm not expected to "know everything" or "be an expert" which is reassuring. I'm coming from a social work/mental health background so this is all very new to me. Thanks again for the positivity 🙏🏾

@undyla-chan1675 7 ай бұрын

Dude thank you. You're really sweet and encouraging and with all the toxic techbros around here on the internet it's hard to find someone who just sounds like they genuinely want to teach people cs. Thanks man!

@taariqq 10 ай бұрын

+1 for the Beginner VS Code setup video.

@ahmed51988 10 ай бұрын

You said in some of your videos that one of your goals is to make people fall in love with css or at least hate it less through forming a solid understanding of it. Your magic worked for me. Thanks !

@mrtobitoun 8 ай бұрын

Great channel, Kevin! You’re helping me on my journey 🙌🏾

@She_tech 9 ай бұрын

This video came across my tl at the right time. Was feeling overwhelmed that after months I wasn't making any progress on my front end journey.

@psm6618 10 ай бұрын

A VS Code beginner setup and tutorial would be VERY appreciated!

@Konstantinosiakovou 7 ай бұрын

Algorithms sometimes are helpful! I have that question long time ago trying to be a professional web developer until I found your videos and I found them very interested!

@galeflower3272 6 ай бұрын

Thank you!!! I needed this.

@Phantasmal-Frights 9 ай бұрын

Thank you ! Beautiful video and thanks very much for the advice. Cheers !

@sebastiangonzales46 10 ай бұрын

Thank you so much for this Sir Kevin 🙌

@bill4824 10 ай бұрын

@KevinPowell, Last week I started my web dev journey through Scrimba. I am doing the Front End Career Path. I've also done your CSS course there as well! Thanks for all you do.

@andrewchalimbanakanyinji5434 10 ай бұрын

Thank you kevin, i really appreciate your advice

@vlfanai_dev29 10 ай бұрын

Been learning web development for about 4 months now on a Lenovo Chromebook Duet😅 and this channel always help me get better with css.

@di2015 10 ай бұрын

Hey Kevin, I've recently subscribed to your channel. Best content on youtube!

@walnutsandbeastiality866 10 ай бұрын

Hi Kevin! I just started diving (back) into web development just by starting it two years ago, getting jaded, and didn't care much about it until a week or so ago. Two years ago I made a mistake by spending too much time at the basics and realized that I need a very "top-down" approach into the subject: Found an amazing course that explains everything in broad strokes, then I started getting into backends (which always made me wonder "how exactly do websites even get what they need to display?") that sparked my interest again 😋

@TravisHi_YT 10 ай бұрын

Sounds like tutorial hell, you need to just start spitting out random projects and put in the work.

@walnutsandbeastiality866 10 ай бұрын

@@TravisHi_YT Oh, I certainly do: It's daunting, but I have a grail project in mind I'm deeply into mechanical watches, and these watches can differ in accuracy a lot (-15 to +20 on a "good" movement, -4 to +6 with a certified Chronometer, and 0 to +5 with a top certified METAS chronometer) Now, I wrote a script that queries a fixed NTP server, and the user can sync their watch to that reference time and see the current deviation: from that, I save data points and graph out these deviations for the whole "timing run" Users can also log in and add watches to their collection that they are able to measure I already implemented the whole timing part, now all it needs is the whole login, safe routings and data save/append/delete function from the backend

@nordicnomad5473 9 ай бұрын

It's better to learn by doing, for example try to create a simple mouse click game using html, CSS and JavaScript . This will make us learn the basic and most used features of html, CSS and JavaScript

@walnutsandbeastiality866 9 ай бұрын

@@nordicnomad5473 At this point I'm having a good understanding about that (HTML, CSS and JS), however I still don't know jack about the fundamentals of backend coding Namely, I don't really know how an authentication/authorization system works on the backend (I'm only at learning about Node and Express routing, then the "glue" between Node and MySQL and/or Mongo (and when to use which)) and things like that I still don't know anything about AJAX either... So much to learn

@Josh43117 8 ай бұрын

@walnutsandbeastliality what course did you take?

@doniecode 4 ай бұрын

Thank you man. God Bless😊

@sam-harrison 10 ай бұрын

So well explained, awesome stuff 👍🏻

@natesanp9088 2 ай бұрын

Am learning a lot through your videos. Thank you

@late.night.creation 6 ай бұрын

Hey Kevin, great video! I also just wanted to say I really like your sweater!

@thejourneyofamom 9 ай бұрын

Thank you Kevin for this video.

@swingoutmuseum6454 10 ай бұрын

Kevin, thank you for this video. I'm a newbie and I'm getting confused with all the information out there. 1) I would like to see a video about setting up and using VS code to debug a JavaScript program. 2) Another video discussing the next skills, tools, and languages to learn

@952a259 9 ай бұрын

Kevin, thank you for great motivation video! 👍

@AustinThomasFilms 10 ай бұрын

When I started watching your channel I hated CSS, now I genuinely enjoy it and think that it's one of the most fun parts! Thanks for what you do Kevin, keep up the great work.

@Eminno-Ab 10 ай бұрын

This video clarify many things thanks

@_ata_3 9 ай бұрын

Thanks for pointing out that it takes time, maybe years to be good at it. A lot of people fake this so much they are not being honest.

@nakulyadav9287 8 ай бұрын

I finished a pretty comprehensive certification back in march, covered html css js and basics of React. Even learnt a lot of advanced Css concepts from Kevin. Though after that, I felt completely burnt out and kind of moved away from it. It's been 6 months and I felt like I needed to get back to it. Hopefully, this time around I can stick with it for good. Wish me luck guys :) Thanks for the video kevin

@lettyviana 10 ай бұрын

I tried to learn just by practicing and it was not such a good practice for me. When I combined it with theory, i.e., actually learning what each thing/function/code line does and why they do it, I started to really understand what I was doing when I just practiced. Each person has a pace and we must always respect our own. Thank you for your content Kevin, it has helped me a lot in several situations.

@KevinPowell 10 ай бұрын

Totally agree, if you're practicing without having learned anything yet, you'll just be lost... the problem is too many people read/watch tutorials, but don't follow along, or they just follow along and never practice on their own!

@eymardjulianfaderon7493 10 ай бұрын

very informative man, thanks a lot and God Bless.

@eirenedelosreyes6025 10 ай бұрын

I agree,taking note is a great tool in learning.

@agateanne6384 4 ай бұрын

I really like this fellow. Thank you so much Kevin Powel !!! I'll definitely subscribe to your channel!

@Mhmd-wx1bg 10 ай бұрын

Thanks man! I'm currently watching your space travel website course on Scrimba!

@roshinif 10 ай бұрын

That is really helpful.. also improved my confidence

@LouiseJosephine 9 ай бұрын

I first learnt HTML and CSS when i was younger and back then you made your layouts with float and position and to achieve rounded corners and shadows you had to make them with background images lol. I'm so excited by how far CSS has come and learning all the changes 🎉

@LouiseJosephine 9 ай бұрын

I'm also a designer, and I think they need a name for when you're both because "full stack" is front/back end but I haven't found a term for when you're also a designer!

@Azikkii 8 ай бұрын

Just be thankful you didn’t start when you had to code webpages with tables 👀 I still have nightmares from nested tables inside nested tables inside more nested tables.

@JerryFitness01 8 ай бұрын

Super helpful! Thanks a lot!

@Poukenkambou 10 ай бұрын

Kevin, this is a very motivational message

@petrvalenta8835 10 ай бұрын

Hi Kevin, another very nice video. Thank you a lot! One thing, about the "Note taking" 11:00 - I've tried, but in fact there is so much information and if you are at the beginning, you don't know what is important and unimportant information and so you easily slip into writing everything. I know it, I've experienced it. Now I don't write notes anymore and instead I prefer to write code. If I don't remember something, I look at my older repos, or I google (or ask the AI) and I remember a lot more that way than by writing notes. 😊

@KevinPowell 10 ай бұрын

One reason I like to advocate for taking notes after, and not during. When you do it while learning, you tend to write *everything* down. If you do it afterwards as a recap, it can be a lot more useful. But yeah, coding first for sure!

@MrDwarfsChannel 8 ай бұрын

First of all Great video as always. I am a returning Web Developer / moving to web dev from another field. It could be a cool idea to make a video for develoeprs coming from other areas since web dev is really different to other fields in that there are tons of options for tooling. For example in IOS dev there is a clear choice of what you should focus on and what are the tools that you need to learn if you want to do something but in webdev there are tons of frameworks and libraries for almost everything.

@Glorian692 8 ай бұрын

thanks Kevin so much may God give you more life and all you wish to fullfill..

@wranther 10 ай бұрын

A VS video tutorial based upon your teaching style would be a fine companion video to your other video tools! -Bob...

@theoriginalnayce6784 10 ай бұрын

Hey, Great Video Kevin! I've been studying HTML, CSS and JavaScript for 10 months with a few breaks in between. I'm not in a hurry, I am learning at my own pace. I watched many tutorials and completed a few web development courses. This week I started Front End Mentor projects, but I often feel stuck and don't know where to start or what is the best tag to use. This leaves me a bit demotivated and wondering if programming is the right path for me. However, I don't want to give up because I have a strong passion for technology. I'm fascinated by the fact that in web development we can create and let our imagination run wild.

@mk-vg1mx 10 ай бұрын

same :D

@shamrosekjan598 9 ай бұрын

Same situation feels like I should just quit

@mk-vg1mx 9 ай бұрын

@@shamrosekjan598 do not quit, find a buddy to code with

@LelouchBritannia-id6nx 8 ай бұрын

Try to do projects related to what you're interested, along the way you will search and find tools you need to complete it. Hope this helps

@lillyinthefield2787 9 ай бұрын

Yes I been looking all. Over NO ONE HAS A BEGINNER into vs code as far as learning how to use it 😮😮😮😮

@Smile__007 10 ай бұрын

Beyond amazing 👏🏾......

@janbohlen8488 10 ай бұрын

Great video, thanks

@angerbadge773 10 ай бұрын

i was waiting for react..etc part oh wait this is an absolute beginners guide right, hope u will make an other video about what one should focus and learn once he/she has done a good amount of work and build some projects in html css and js.

@rawafkarim4469 10 ай бұрын

I agree writing notes is very efficient way and by doing this we don't forget stufffffffff

@vmGrymm 6 ай бұрын

thank you !!!

@_tanzil_ 10 ай бұрын

Finally after being comfortable with JavaScript, I'm gonna start learning React on September 😊

@homeoffice3524 10 ай бұрын

I totally recommend Notepad ++ I can work with VScode. But I just don't need all that customisation and beautify things. It's just really personal preference. For example if I'm doing Python code then definitely VS or Pycharm not notepad++ but for HTML/CSS/PHP I somehow prefer Notepad++

@ViewMumbai 10 ай бұрын

Great content ❤🎉

@jeremiahsmarketing 10 ай бұрын

Thanks man

@MarvinKleinMusic 10 ай бұрын

I would highly appreciate a video about VS code

@raba650 10 ай бұрын

I’ve always seen myself as not being that creative. So coming into this field with this in mind, I’m struggling with coming up with design ideas. But looking at the dev tools elements and styling for different themes and websites has helped me to learn. Hopefully the more I do, the better I’ll get over time.

@fitsum-ru5yw 8 ай бұрын

Please help me I'm in the same situation thinking of i'm not creative enough for software engineering... but I'm academically clever student.

@raulbarriga7416 8 ай бұрын

@@fitsum-ru5yw Just study the topic of web design to learn about different tools & technical people use in web development. There’s a bunch of KZfaq videos on this to help.

@spankyjeffro5320 6 ай бұрын

Why not focus on being practical in stead of creative? Why not try to fix some problems? Create functionality? If you want to focus on being creative, copy for a time. Look for sites with cool themes and copy them to gain inspiration and break down their design choices.

@HarveySpecter0 10 ай бұрын

Thanks Kevin

@crimsonisland 10 ай бұрын

I’d love to see how you configure your VS Code.

@younaspa1058 10 ай бұрын

Thanks :)

@Nala-Potter 10 ай бұрын

Thank you

@tech_with_med 6 ай бұрын

great video.

@user-kh5bk6ld5d 10 ай бұрын

Senior developer, watching this video👍

@jeanelizedenys 10 ай бұрын

i'd be interested in a setting up vscode video showing from fresh install of vscode to live site. ie how you set it up, compile code and get it to run the website, test your code and maybe even debug if there are tools for that

@adeniyiokunade1075 10 ай бұрын

Learnt how to use ATOM through you so please do a how to get started with VS CODE video. Thanks.

@mskev8224 10 ай бұрын

Very intersting explanation of the fundementals. I know you are an expert on web matters but could you reduce the zoom cuts as they are very distracting.

@sahanabajpaie4529 9 ай бұрын

Some KZfaqrs or educators might give you the impression that you just need to be proficient in HTML, CSS/SASS, and a bit of JavaScript to secure your first front-end developer job. However, the reality is that with these skills alone, you might not even receive an interview call, let alone land a junior role. To have even a slight chance of getting an interview, you should be familiar with at least one framework (such as React, Vue, or Angular).

@Konstantinosiakovou 7 ай бұрын

Absolutely and that is why I feel i am not gonna be web developer.

@__manojts__ 10 ай бұрын

First like and comment my guru 😊

@hollowbug2443 10 ай бұрын

A good metaphor for the web languages is: Html is like the skeleton of a creature. Css is all the muscles & skin javascript is the ability to everything and make it interact with each other and other things. And javascript frameworks (like react, angular etc) are throwing out or/and rewriting other functionalities for a different creature (use-case scenario) like a dog instead of a human. dogs don't need the walking but instead need a rewrittten speech module to just go 'barf' and some variations of it.

@aymansoliman1783 9 ай бұрын

WoW ♥

@user-iw1st2lh7h 3 ай бұрын

cool video)

@Ceko 8 ай бұрын

Bedankt

@KevinPowell 8 ай бұрын

Thanks so much!

@nordicnomad5473 9 ай бұрын

@TheJurciks 9 ай бұрын

I couldn't agree more about reflecting on where you started and where are you now. I've been learning Web Dev seriously for more than a year now, trying to put in at least an hour every day, of course it doesn't work that way so ideally I will do it like 4 days throughout the working week. So after a whole year and doing college I will still sometimes feel like I don't know what am I doing but if I look back at my college course where I barely touched on JS and now after I've been learning for a year the difference is staggering. I always laugh at these KZfaq videos whiy titles "How I become a web developer in 6 months"

@deatho0ne587 10 ай бұрын

VSC or NeoVim (has a higher learning curve but you might like it better) for your IDE. Obsidian is great for taking notes and also decent for learning Markdown (you will need this for jobs). NPP okay for notes (quick ones) and looking at files from others (before adding them to your own).

@myartikool 10 ай бұрын

(Neo)Vim for webdev is so needy in terms of plugins, custom settings, lsp's, linters and so on. It is really better to just start with vscode and not touch (neo)vim until you feel comfortable with the default web stack. I've already learned basics of react and started learning typescript - and that's another layer to take care of. So i just get burntout of neovim and its settings, and plugins to make it usable... so i just switched back to vscode. Don't get me wrong for some python, c, java or whatever language like that - (neo)vim is awesome and i would've use it, but for webdev there's just too much work to make it... nice to develop in. Oh, and in vscode there are two awesome plugins for typescript: total typescript, pretty typescript errors. Not a necessity but something nice to have at start.

@deatho0ne587 10 ай бұрын

Work comps: VSC - Companies love MS Home/Work comps: VSCodium or NeoVim - Depends on the OS By the way, TypeScript is not every job out there. Yes, it is nice and wish JS had types by default. The extensions to add to VSC for webdev depend on what projects a user will be working with. "Code Spell Checker" can work in general.

@user-gf6vo9jz5f 10 ай бұрын

Hey kevin ! i faced the issue so often about when i made a custom select dropdown with div's. It works fine everywhere but when i add a overflow on main div of where multiples input fields and select exist but my select's options get hide on scroll. like when i open select options, all options get hide inside that main div. can you made a video on it please.

@marconarca2706 10 ай бұрын

A quick question Kevin what happens when you have a max-width and min-width that have a specified pixel values and have a width:100%. Appreciate if you make a video out of it Thanks

@colorsofgaia 8 ай бұрын

I feel like making templates for WordPress, sounds fun. Do you know the difference in Wordpress and Webflow?

@russellcortez4784 10 ай бұрын

Hey I just watch about one of your video about responsive website. In the course I'm taking it didn't explain about CSS root selector or var, can you make a video about it?

@keaton718 10 ай бұрын

Do you have advice for designers who want to learn web development to supplement their design skills? I know usually designers design a site and developers make it, but designers aren't cheap and developers aren't cheap so some of us want to do it all ourselves. I know you've said multiple times you don't recommend trying to specialise in both, but it is nice being able to make all your own graphics and animations and videos and stuff and the static html site that uses it all.

@nordicnomad5473 9 ай бұрын

Try to convert a web design done in Photoshop or the same into actual html/CSS. This will help you to learn the basics, then start learning CSS animation, gradients etc

@3.14name 4 ай бұрын

I m very unsure if I should pivot to web development with a marketing ba, or it s too late for it now and I should focus on something else seeing AI building a website with just a few prompts. Any advice?

@DesPardesKiKahani 10 ай бұрын

Quick question: How much html and css do I need to know before I can start learning JavaScript. I know html fully. I know some of advance css aswell.

@daveturnbull7221 10 ай бұрын

I find taking a 10-20min break really handy when I'm struggling to wrap my head around something. I usually go and turn a perfectly good piece of wood into sawdust. I often find the solution suddenly just pops into my head.

@KevinPowell 10 ай бұрын

Yes! breaks are so important!

@tamunotonyespencer922 10 ай бұрын

You learnt yourself

@moodyshah007 8 ай бұрын

as well as html, css havascript, should you also learn C# or Python

@115switch 10 ай бұрын

This is literally day 1 advice lol i consider myself a beginner but not fron scratch lol but that is really good advice overall for people just starting out usually you see videos and they make a lot of assumptions. great channel great video as always