Web Development Project Ideas for Beginners | Building beginner projects in Javascript
HTML-код
- Опубликовано: 6 июн 2024
- Try Audible and Get Two Free Audiobooks - amzn.to/2H2HNhO
Time Links:
Intro - 0:00
First Websites - 1:51
Starting with Javascript - 2:39
Menu Maker - 3:40
Bootstrap - 4:16
Full Stack App - 4:44
Restaurant - 5:17
Free Code Camp - 5:50
Jennifer DeWalt - 6:10
How to build a project - 6:38
Free APIs - 7:34
Advice - 7:55
Google - 9:08
Stackoverflow - 9:57
When you are learning web development, or a beginner to software development in general, you need to be building and working on personal projects to be able to better understand what you are learning and have some great things to talk about during job interview so this video is a collection of web development project ideas for beginners.
Obviously when you are beginning to learn web development, you will not have all the knowledge about how to build a project or even have a good idea for a website to develop or a nice idea for a project, but as your skills grow it does get easier with time and coming up with ideas for web development projects also gets a lot easier. Suddenly you’ll start seeing everything as a project or how you can make a website or web app for this or that and keep building a list of web development project ideas.
In this video, I outline and talk about some of the web development project ideas for beginners that I have worked on and completed on my journey from not knowing anything about web development to getting hired as a developer.
How to build projects - a basic break down:
Find problems you are having and look at solving them.
Write out UI and pseudocode on a piece of paper before you start coding.
Work with free APIs to practice working with data.
Be flexible and take criticism constructively.
How to use Google to find the answer to an issue.
Engage with Stack Overflow.
I have listed a number of web development project ideas I have built myself, so please feel free to use them and build on them:
Lotto Number Generator
Simulate Dice Rolling
Rock Paper Scissors vs the computer
What’s the weather where you are?
ToDo list (with server & database)
A random password generator
A website for a local business or restaurant
A 3 page website for a travel website
A personal portfolio website
Ask your family and friends for ideas of what they would like to see?
My Computer - amzn.to/2idKiks
My Camera - amzn.to/2khK2VW
My Tripod - amzn.to/2jFvBqI
My Camera Bag - amzn.to/2jF9QXY
Javascript Book - amzn.to/2idL9Sc
If you liked this video then go ahead and subscribe! goo.gl/NoM0fg
___
Free Code Camp: goo.gl/HXvlNM
The Odin Project: goo.gl/uaVlc2
Jennifer DeWalt 180 Project Blog: goo.gl/9KyIi5
Link to last video: goo.gl/9R3mDj
Github: goo.gl/Jt8PSU 
Наука
First developer ever on youtube to have these 3 great quality's: speaks clearly, not boring, and very informative! Thank you for all your resources.
Wow! Thank you so much for this comment, it made me really happy :D I'm really happy to see that you found the video helpful!
@@BenTalks Hi, how are you? I like the work you do and the videos you publish. I don't have a professional profile, I don't have a CS degree, I don't even have full secondary education. What course do you recommend to me, that can gives me the knowledge and solid foundations to start as a confident front end web dev and that gives me the possibility to start practicing and carry out my own projects, my idea is to be able to reconvert myself and in the future get a job in the field, I hope you can help me, thanks
I'd just like to thank you for how thorough your description in particular is, with all of the Timestamps and relative links etc. Much appreciated :) thanks for this video!
Thanks for watching Jack, I'm glad to see the video helped.
This is the first video of yours that I have seen (about to check out more). I really appreciate the advice and ideas you presented. Thanks for the good video!
Thanks for watching! I'm happy to see the video helped out.
thanks for posting this, I've mainly worked as a designer and am now learning more Javascript etc, so I can do more development, hearing your story is inspiring.
Thanks for watching! And good luck with the Javascript
This vlog really inspired me on my learning journey. Sometimes it's easy to get overwhelmed, but encouragement like this is like finding water in the desert.
Best of luck! Just take it at your own pace and remember why you are learning. One of the most important things I've realised so far is to not compare your ability to others.
You might feel overwhelmed but you only need one skill to success: Be consistent
@Obinna Okoroafor "Encouragement like this is like finding water in the desert." Truth delivered in poetic form. :-)
I’ve been wanting to start learning as well. It’s been a year for you!. How has it gone? Kinda overwhelmed but it is a skill I’d love to learn.
@@ricardom4010 how is your journey going so far?
Thank you for this video! Over the dozens of blogs, vlogs and RUclips videos I have poured over the last few weeks trying to gather info about how to get started to become web developer, this is by far one of the most helpful.Specifically, thanks for these:1. Telling us how/what to put in Google to find solutions to problems.2. Mentioning The Odin Project 3. Mentioning Jennifer DeWalt
Really glad the video helped. When you're new to this the amount of information out there is overwhelming for sure.
hey ben! the video was really so helpful . The projects and blog u talked of i havent heard of them yet even though i am self learning web designing from past few months. Definately subscribing. Please guide more and more about web development.thanx
Hi Arya, Thanks for watching and leaving me a comment. Keep an eye out for new videos coming soon!
great video mate! really inspiring. It's easy to feel overwhelmed and hopeless when starting out. glad to see we all start out as an un molded lump of clay haha.
Hey man, nothing is easy when you first start. Just take it easy and keep learning something new everyday.
Dude, great set of video's, liked and subbed. Thank you so much for these videos. 😎👍
Thanks for watching :)
I find your videos really useful, great information on how to progress and develop, exactly what most aspiring web developers are looking for. Keep up the good work mate!
Thanks for the great comment. I'm really happy you enjoyed the video and it helped!
This is the most helpful video I have ever seen in my life! Exactly what I needed to see and understand. So many videos say to you build a portfolio, but never the how to go about it. Perfect resource I have now, thank you so much
I'm really happy that you found the video helpful. Have you started working on anything?
Ben Talks Ive done the colt steele udemy course. Now doing a javascript one then I am going to start hitting the projects!
Thats awesome! Good luck with the Javascript course and start building stuff to practice!
Hey Ben, Really amazing and useful video. Thanks for sharing this stuff!
Thanks for watching an letting me know that you found the video useful.
One of the best informative you tube video for new bee front end developer with honesty. Good job "Ben Talks"
Hi Shailesh, Thanks for watching!
hey , thanks a lot . was searching for some ideas as a starter in frontend devlopment . ur video helped a lot . (y)
Hi Utpal! Thanks for watching. I'm happy to see the video helped you get some ideas for projects.
Tnx Dude, I stopped here because i have my first project in HTML5 & CSS, and you gave me now the idea of how i should start, and always "Have fun" xd ... :)
Really glad to see the video helped you keep moving forward dude!
I made a portfolio and posted it on Facebook and everyone bagged on it so hard but it helped me think of different ways how to build it, take old projects and update them and so forth. Even if people are extremely critical of your work, it will give you new ideas to bring to the table!(:
Thats the attitude that will make you better! Well done for putting yourself out there and taking criticism in a constructive way and using it to improve!
Thanks a lot bro!! Seriously, your videos give me so much confidence that I will also be able to develop websites too!! Thanks!!!
Wow! Thank you for the kind words. Good luck with your studies :)
Thanks a lot. This video was the mental and emotional boost I needed today.
Hi Joel, thanks for watching. I'm glad you found the video helpful. How's it all going for you?
Great video, thanks for the info and hope you make more!
+nightshadow427 thanks for the great feedback and thanks for watching. I'm working on more videos!
Yes...this is incredible out there....when learning javascript for example, main issue is that most if not all courses just throw concepts over and over to the student and the person gets floating without the notion of what exactly it does for them....if all teachers were to explain javascript always showing life examples to each concept, the learning would be flashy!!!! if you figure this out, you will have an unique concept of teaching!!! cheers and thank you for what you do!!!
Thanks for the great words. I'm happy to see that you found the video useful! I plan on making some more tutorials where I explain a bit more about what is actually going on when you are writing Javascript.
Exactly i finished a CS Degree not knowing alot about any subject we went tru, basicaly you just learn a little just so you know and you move on in the next class or subject , so you have to learn on your on
thanks for share you experience mate. its really helpful to know this things!
Thanks for watching!
Hi Ben am happy that i find your channel, the problem you mention that confront new web developers has been what is holding me back, i have learn PHP, bootstrap and Javascript but still learning but i have not come up with what to build to show for what i have learn but watching you have encouraged me and i have also visited Jennifer Dewalt blog and am fascinated my the simplicity of her blog. Am going to adopt that simplicity to build mine too. thanks for your advice. Goo Job.
Hi Okafor, I'm glad that you were able to find her blog too. What projects are you working on?
Thank you man! Keep it up!
Hi Milos, thanks for watching! Really glad you enjoyed the video :)
Ben thanks a lot for your help!!! I start to follow your channel from now.
Thanks for watching!
I searched on google for those knowledge, and got you there .It was perfect
Thanks for watching! Glad that you found the video helpful!
Hey Ben, nice to find you on here!
Thanks for watching!
i would recommend it as it is the only framework that I know at the moment :D But remember there is a huge difference between AngularJS and Angular 2/4, so it's almost like learning 2 different frameworks.
I am also interested in web development and searching for projects as a beginner. Thanks for the guidance, you are doing great work.
Thanks! I'm glad the video helped
Dude, you’re awesome. Subscribed!!
Hey Sebastian, Thanks for watching and subscribing!
glad I found your channel. thanks for the information.
Hi Daniel, Thanks for watching!
Thank you so much I really needed to hear that.
Good luck with your journey!
Your video is so motivating. And got some resources too. Thanks. 👏
Thanks for watching! I'm really happy to hear that it was useful for you
Amazing video Ben. You're an inspiration
Hi Daniel, Thanks for the kind words :)
Great video Ben I'm living in Israel for almost 2yaers now really nice to hear from you!
That's awesome!
Your message received by my heart. You so honest Thank you
Hi Mohamoud, thanks for watching and leaving a comment!
You really help, mate. Thanks.
Thanks for watching. I'm glad the video was helpful.
Awesome video. Lots of great ideas for projects!
Hi Shaana, thanks for watching. I'm glad the video helped you out :)
This inspired me bud. Thank you!
Thanks for watching. Really glad that you could get some ideas
Really great video mate 👍🏽
Thanks for watching! I hope it was helpful
Great! This is so inspiring. Thank you
Thanks for watching! I'm happy that you found the video helpful!
Thank you for your awesome and informative channel!!
Hi Richard, Thanks for watching :) I'm glad to see that you are finding the channel is informative
אחלה סרטון!
בדיוק לומד את זה בעצמי (בגלל זה כנראה הגעתי מלכתחילה לסרטון) :)
Hi Harel, thanks for watching! Good luck with the learning and the upcoming job hunt.
Two questions if you allow me:
1. You mentioned mongoDB. Why use a noSQL database?
2. Why use angular.js for a landing site, instead of using plain HTML, CSS (with bootstrap) and JS?
Thanks for the videos !
Hi Alex,
Thanks for watching and asking some questions!
1) I mentioned mongoDB because of it's use in the MEAN stack for web development and it is what we were taught at our bootcamp. I think it is also easier to learn while you learn javascript, because all the logic and syntax is similar. If you what to start with a mySQL database, then you also need to learn SQL along the way.
2) I built the landing page in AngularJS more as an exercise to practise the AngularJS framework. But I've now gone back and am working on some projects in just HTML, CSS and JS to practice it again.
Problem with web development is they tend to have lots of ppl who don't like coding. So you get all these frameworks, libraries so and so ppl making all sorts to create simple things like menus for "JS developers". Lots of things they do dont really make sense to a guy like me who started with C family and Java.
Angular JS IS mainly used for a SPA(Single Page Application) and gives better performance than simple JS and in Angular JS, validation and search/filtering is easy to implement and understand than the simple functions that are using in JavaScript.
@abqs Exactly. Less dependencies.
Thanks a lot . Maybe i was looking for some advice instead of leaning how to build a portfolio. After watching your video i'm thinking i'll start from scratch again and build something.
Hi Anna, thanks for watching :) What are you planning on building?
Good one, thanks for sharing your experience, Ben
Thanks for watching!
Thanks man.... That's a great video on how to move on as a beginner ❤️
I'm glad it helped
Good advise and great video! Thanks a lot.
Thanks for watching!
I felt like you are talking about me. So I Subscribed :)
Thanks for watching! I'm really happy to see this video was helpful to you
Good encouragement for beginners...Awesome!
Thanks for watching! I'm glad it was helpful for you.
I found this video very useful! Thank you so much
Hi Toyin, thanks for watching! I'm happy you found the video helpful.
Hey Ben, FOA thanks for making this video. It really helped and motivated me to jump into MEAN stack dev.
I dont know much about it. So if you could guide me to any website or RUclips channel to learn MEAN stack.
Thanks again!
Hey man, thanks for watching and commenting. If look on Udemy, there are some great courses to learn the MEAN stack.
But I would also suggest you take a step back and break down what you want to learn.
M - MongoDB - look into NoSql databases and look up "Mongoose" which makes writing mongoDb syntax easier
E - express is your 'logic' on the server side. Look for videos on youtube like 'intro to express server'
A - AngularJS or Angular2 - its up to you, but if you are new to programming. I'd recommend AngularJS as you don't need to know Typescript
N - NodeJs - Your server. This is where you'll type our all your express and Mongoose commands to CRUD to the database and do user authentication. Again just look up 'NodeJS for beginners'.
I also recommend thinking about what you want to build first and then break it down. Like:
Does the user need to login/have a profile
Do you need to CRUD to a database?
What do you want your website to do?
Thank you man, very useful tips.
Thanks for watching! Happy you found the video helpful
great source of ideas and mindset.. thanks mate for refreshing my mindset. cheers
Thanks for watching and commenting. Happy to see that you found the video helpful!
I watched your video first time and its really Helpfull.........
Thank you for watching the video!
Really cool. Definitely agree with the points you covered. Self-taught too. Didn't know about theodinproject, thanks for sharing.
Hi Allan, I'm glad to know that you learned something new. When did you start learning?
Some time in 2010, had a little bit of an introduction in 2009... How about you Ben?
I started playing with wordpress and codecademy in 2015, but actually learned properly since 2016.
Thanks Ben.... Video is really inspiring :) ... Subscribed.
Hi Santhosh, thanks for watching and subscribing :)
Thanks! This was really motivating
I'm so glad!
SUPER INTERESTING. GOOD STUFF
Thanks for watching!
One of the best video I have ever come across..Edit: it's Best, not one of best.
very useful, thank you !
I'm glad it helped :)
Very inspiring video! Thanks!
Thanks for watching!
the way you describe the things are awesome....thanks for you suggestion..I hope it would help me
Hi Akshay, thanks for watching. I'm glad you found the video helpful
I feel highly motivated. Thank you
Hi Victor! Glad the video helped out
Thanks i learnt alot
Thanks for watching. I'm glad the video helped
Hy Mr. Ben that very impacts on me !! and Thnks for your IDEA
I'm happy to see the video helped you get some ideas!
Hey Thanks for sharing the resources..Nice video and advice
I'm happy to see that you found the video helpful :)
Thank you so much!
Thank you for watching!
This was really helpful & felt really authentic
Thanks you!
Great info!!
Hi Adam, thanks for watching!
Thank you so much
Thank you for watching!
Very nicely explained !!!
Thanks for watching!
Thanks for the video you inspired me to do some projects .Currently i am learning back end with php mysql ,can you recommend some simple or intermediate back end projects or resources , i have no job experience so i am building a portfolio for the time being .
Hey man, thanks for watching and asking a question. What about building a library system for books where you can check them in/out and when they are due back. If they are late, send a fine email to the person who took the book.
Where do you work? Do you have stock that comes in or out? Do you have shifts of people? Do you have meetings? Maybe build a Create Read Update Delete (CRUD) web app that can track one of those types of things.
When you've built it, comment here, I'd love to see it!
Ben Talks can u plzz suggest me a ideas for my final year SE project i m stuck in problem?????
sharing personal stuff!!! thats really kind ben....olaaa
Thanks for watching! I'm glad that you enjoyed the video.
so inspiring. Thank you so much for sharing.
You are so welcome!
i did a web project "TO-LET" (where you can post add to buy/sell/rent a land/house/flat/apartment) using PHP, HTML, CSS, BOOTSTRAP & basic JavaScript ! No PHP Framework, not even OOP/PDO!! I was satisfied with my project even though code was really messy and not organized at all! But now focusing on learning PHP framework as well as OOP and PDO though someone said ...... PHP has no value now a days without Framework!
Thats sounds like an awesome project. Is there anywhere to see the project, or is it on Github? I think frameworks are essential know nowadays in either Javascript or PHP.
Really beneficial, much appreciated.
Thanks for watching. I'm glad that the video was helpful for you! :D
Thank you so much for this video. It really helped.
One question: if I don't know how to add a feature but want to add it should I use tutorials for it?
Of course!
I always find tutorials are a great place to start if you don't know how to do something, but they are usually limited as they are built on bare bones projects that lack a lot of the logic of what I've built.
But as a place to learn the basics, then read the docs and then hack the new feature into your solution its the best way to learn :D
your videos is too good bro.
Thank you very much!
wow thanks buddy
Thanks for watching! Glad you liked the video
Ben thank you for putting out this video it means alot!. I've been working with javascript since nov 2019 and still finding myself trying to understand the data types in the since of putting it all together in a website... so as a person that's been coding in js and building projects what would you tell someone that was in your shoes from the beginning?.
First off, thanks for watching and commenting.
I think if I was talking to myself at the beginning of learning, I would say just keep building stuff and practicing. Any stupid little idea you have to make with code do it. Look for solutions. Even if you don't finish a project or some code just keep doing stuff because thats how you learn. Also show off your stuff to friends and family because they will think you are a wizard and that's a good feeling when you may be thinking that your are rubbish.
@@BenTalksShoot thank you for replying back to me brotha!. That's great advice I'm planning on doing exactly that learning small snippets of javascript using the DOM scroll events and javascript animation... I've tried looking at a full projects and kinda got confused from looking at the complete project so I'm breaking it down to small sections of javascript... would you recommend that approach before looking at a tutorial website?. Because I'm very much a hands on learner. 😅
Great video bud
Hi Mario, thanks for watching and leaving a comment!
Great video
+TSS NCS Thanks for watching!
Good stuff!
Hi Simon, thanks for watching
thank you!!
Thank you for watching!
Hwy Ben very motivationg video.Thanks for sharing
Thanks for watching!
Good one
Thanks for watching and commenting!
Hey fella, thanks for the video, Can you suggest me what would I study AngularJS or NodeJs and which is important ?
Hi Ayush,
So AngularJS is a frontend Javascript framework built by Google allowing web developers to build Single Page Applications. It was the first 'real' javascript framework and it allows you to build a website using html templates and rendering your information into those templates with Javascript. If you know javascript then it is rather easy to pickup and learn.
NodeJS is a server side technology like python or Java but it is written in Javascript. So if you know javascript you can build a web server.
It depends what you want to do as a developer in regards to which is important, but if you can, why not learn both? Learn how to build great looking and functional websites in AngularJS and then build the backend and server in NodeJS.
ok so i started learning java script in grasshopper on my phone but it is very simplified on there so i started to learn how to code java script on my computer and wanted to make one of my ideas from my phone but on my computer the iceCreamPicker9000 but to make my code work i need to be able to randomly pick a string from an array grasshopper had a very simple way of doing this but that wont work in sublime text any tips on how to randomly pick things?
I'd look at this stackoverflow.com/questions/7350363/select-a-random-string-from-an-array and try out your solution using codepen
This video is a goldmine)
Thanks for watching! I'm glad you found some gold in the video
Hey Ben, just discovered your channel, saw few videos and really like how you document your journey helping others to hop on the web dev train ;)
Being also programmer and web developer, your channel is a great inspiration for me because I just started my own youtube channel where I want to document my journey on building & launching little side project apps. It would be cool to get some feedback from you ;)
Sorry it took me so long to see this comment, but thank you for watching and I'm glad you also started your own channel. I'll check it out!
This helped me so much!!!!!
Thanks for watching! I'm glad the video helped you out.
I got so inspired by this. When people make examples of themselfes. You lern so much from experienced!
Again thank you for the kind words! That's why I like to make these videos because I know that it helps people to see a real person doing this stuff.
(:
i wish you were my teacher thanks man so much ive learned somestuff my teacher hasn't touched yet
Glad the video helped :)
thanks dude
Thanks for watching!
Thanks for the Video..I found it very useful
You spoke dropping links to project you've worked on. I can't find them
*about
Saw it already ...Thanks once again
Hey Ben! I am learning vue and react kinda together should i learn angular too?
Hi Prabesh, I would slow down and learn each framework at a slower pace to make sure that you can really understand the ins and outs. The beauty of React and Angular 2, is that under the hood they are really similar. React is the next thing on my list of things to learn. Also note that AngularJS is completely different to React and Angular2
Oh! Thanks for shedding some light into my confusion. After watching your video I started learning more of JavaScript as a programming language and dived deeper into the Data Structure and Algorithm world. I even learnt Object Oriented JavaScript and the functional side of JavaScript. I said to myself that my goal is not just to be a web developer who knows popular frameworks and is capable of building web apps for clients rather my goal is to be able to build such frameworks myself. So, I'm currently learning advanced JavaScript and sometimes learn Vue and frontend design. :D
Thats the best way you can do it. Just focus mainly on building your fundamental skills and design skills!!! Frameworks can be complicated at first but at the end of the day they are anther tool to use, so practice makes perfect.
thanks for the tips, really helped me :)
I'm happy to hear that the tips helped :)
nice vid 😊
Hi Manoj. Thanks for watching and commenting!
Hey did you learn AngularJS or Angular 2/4 for your bootcamp? since they are technically in two different languages.
Hi Nabil,
At my bootcamp I learned AngularJS, as Angular 2 was still in beta and not being widely used yet.
Now at my job we use Angular 2, so I am learning so much as I go along out of necessity. Typescript is still taking getting used to, but honestly I like it. Angular 2 makes me think far more logically about what I'm doing than in AngularJS, so the code base ends up cleaner.
What frameworks are you using?
Quite useful
Thanks for watching
oh yeah Keep teaching man
Thanks for the encouragement!
Video was helpful
Hi Shibnath, I'm glad to see that you found the video helpful.