Absolute beginner’s guide to starting web development in 2023
Vložit
- čas přidán 1. 07. 2024
- 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 CZcams 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!
"It's only 4 months, you are still a beginner." I needed to hear this, Kevin.
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.
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
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 ❤️
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.
Thanks for returning to the start. It is much appreciated.
Amazing! A community like that was just what i was looking for!!
❤️❤️❤️
Glad to have seen this...started in July and I'm glad for progress. Thank you kevin
Thank you for making a video for beginners that actually makes sense!
Awesome video as usual. Thanks for this Kevin!
Thanks a lot for this Insight Kevin. Glad to have found your community!
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"
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!
I will being Sticking to your channel on this new journey of mine because your content are Concise and in-depth and straight forward. ❤
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 😆
+1 for the Beginner VS Code setup video.
Me : Learning more than 9 months still watching the video.. 😅😂😜
Hey! Already applying?
Css got us all like this😂
Been learning for 5 years! In the same situation 😂👏
Same 😂
@@olaniyanayodele5986 where you at?
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! 🙌
Great channel, Kevin! You’re helping me on my journey 🙌🏾
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 🙏🏾
Kevin you are my hero in web developement
I always recommend your channel when people say how do i learn css :)
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!
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.
Thank you ! Beautiful video and thanks very much for the advice. Cheers !
Thank you so much for this Sir Kevin 🙌
A VS Code beginner setup and tutorial would be VERY appreciated!
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.
So well explained, awesome stuff 👍🏻
Thank you!!! I needed this.
Thank you man. God Bless😊
Am learning a lot through your videos. Thank you
Hey Kevin, great video! I also just wanted to say I really like your sweater!
Hey Kevin, I've recently subscribed to your channel. Best content on youtube!
Thank you kevin, i really appreciate your advice
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 !
Kevin, thank you for great motivation video! 👍
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!
Thank you Kevin for this video.
I really like this fellow. Thank you so much Kevin Powel !!! I'll definitely subscribe to your channel!
@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.
This video clarify many things thanks
I agree,taking note is a great tool in learning.
Been learning web development for about 4 months now on a Lenovo Chromebook Duet😅 and this channel always help me get better with css.
very informative man, thanks a lot and God Bless.
Thanks man! I'm currently watching your space travel website course on Scrimba!
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 😋
Sounds like tutorial hell, you need to just start spitting out random projects and put in the work.
@@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
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
@@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
@walnutsandbeastliality what course did you take?
Super helpful! Thanks a lot!
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.
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.
Kevin, this is a very motivational message
That is really helpful.. also improved my confidence
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
thanks Kevin so much may God give you more life and all you wish to fullfill..
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.
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!
A VS video tutorial based upon your teaching style would be a fine companion video to your other video tools! -Bob...
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
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 🎉
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!
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.
I agree writing notes is very efficient way and by doing this we don't forget stufffffffff
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. 😊
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!
I would highly appreciate a video about VS code
Beyond amazing 👏🏾......
Great video, thanks
Yes I been looking all. Over NO ONE HAS A BEGINNER into vs code as far as learning how to use it 😮😮😮😮
I’d love to see how you configure your VS Code.
Great content ❤🎉
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.
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.
same :D
Same situation feels like I should just quit
@@shamrosekjan598 do not quit, find a buddy to code with
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
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++
Finally after being comfortable with JavaScript, I'm gonna start learning React on September 😊
Thanks man
First like and comment my guru 😊
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.
thank you !!!
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.
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.
@@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 CZcams videos on this to help.
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.
Thanks Kevin
Senior developer, watching this video👍
Some CZcamsrs 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).
Absolutely and that is why I feel i am not gonna be web developer.
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
Learnt how to use ATOM through you so please do a how to get started with VS CODE video. Thanks.
great video.
Thanks :)
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.
Thank you
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?
Here's my advice to beginners: test each new line of your code immediately after writing it - it doesn't take too long and your code will remain valid all the time (actually VS Code Live Server extension will do it semi-automatically for you). If you add several lines of HTML, CSS and JavaScript at once and then test your page/app it will be much harder to find the error(s).
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).
(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.
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.
I feel like making templates for WordPress, sounds fun. Do you know the difference in Wordpress and Webflow?
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
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.
cool video)
WoW ♥
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
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.
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.
as well as html, css havascript, should you also learn C# or Python
Bedankt
Thanks so much!
hey guys, so im just starting out, should i learn HTML & Css first before trying to learn Javascript?
im enroute of doing self-study now because i tried applying for a bootcamp a week ago, but i failed my technical test i got 9/18 questions correct but wasnt enough for them to accept me, but the whole technical assessment was java script that they made me study for a whole week. had no prior knowledge/background experience about it. but looking at re-applying in 3 months.
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.
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
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?
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.
Yes! breaks are so important!
You learnt yourself
Chatgpt helped center an image by display block