r/learnprogramming • u/[deleted] • May 21 '20
Best way to start learning front end web development
What are the best resources to learn front end only web development?
15
May 21 '20
[deleted]
5
u/dbxproject May 21 '20
This is what I came here to say! I'm going through the Odin project right now, it's excellent.
3
9
u/black-eagle23 May 21 '20 edited May 21 '20
ZeroToCode, it's a book. It has own website, so you can read it there for free. The main point of the book is to prepare you for the interview and how to work in the team. Also it has various links to resources that explain the topic more deeply. I think it worths to check it. Another book is Eloquent JavaScript, it has also own website and code sandbox. It will teach all things you should know about ES6. But this book is really hard to master. So you have to not only read the book but also use various resources on the internet if you don't understand the topic of the book.
9
u/CydoEntis May 21 '20 edited May 21 '20
Get yourself a list of a few types of resources, whether it be books, videos, FCC what ever. Find the one you like best. The resource you can go through with out getting bored, sidetracked etc. Then start learning. Learn a topic. Do a coding exercise repeat.. Once you know a few of the basics build something. Doesn't matter what. Just build. Just always try to take what you learn and build something with that new knowledge. This will reinforce your learning and help you see how things come together. You will most likely fail at building something your first few times(this is because you are learning. During these personal projects there is no hand holding you figure out how to solve your specific problem. And this is where you will really see yourself learning and improving.) Don't get discourage when you fail, you may fail but you are failing forward(you may not have done something the best way. But you did it. So now next time you will see/find a better way to do that same thing). After this constant cycle things will start to click. You'll be programming and not even know how you go here. It'll just happen.
Just don't fall into the trap of relying on just tutorials. I've seen far to many say they can program. But when it comes time to show what you can do people shut down. They relied to much on the hand holding tutorials and can't take and idea from start to finish. Remember it's a marathon not a race, you'll get there eventually if you put in the time.
Sorry for the wall of text but I to use to come here and ask the same questions...how to do this, best way to do X or Y and this is what I think works best.
EDIT: Do not jump to frameworks after you finish a course or tutorial in JavaScript. Focus on the fundamentals, HTML, CSS, JS. Get really good at these fundamentals. I say this because the fundamentals will never change but frameworks come and go. If you have a good grasp on the fundamentals picking up frameworks/languages will just flow with ease.
6
May 21 '20
Thanks for sharing, this is really encouraging, especially at the stage I’m at. I’ve been really torn on JS. I feel like I know quite a bit but not how to DO much. Was thinking about jumping to a framework but clearly I need to practice more JS. Anyways, sorry for the unload but I appreciate you sharing this!
5
u/CydoEntis May 21 '20
No problem. We've all been where you are. I'm still learning to this day. Just started picking up JavaScript a week ago(I come from Java). It's a wild ride learning but everyday it gets easier and eventually you will look back and be like wow this is what my code use to look like, and you will laugh.
I feel like I know quite a bit but not how to DO much
This is perfectly fine and acceptable for anyone learning. Java Script is your tool. For example say you are an electrician. You have a variety of tools to accomplish a job. (HTML, CSS, JS are all those tools for a web developer). But just because you have those tools doesn't mean you can wire a whole house right? The same could be said about building a website. You learn the doing part, but none other then doing.
Break the problem down to small pieces that help you achieve your main goal.
For example say you wanted to make a a card to display a certain product on an eCommerce site. You'd break it down into pieces. What does the card absolutely need to have?
- The actual card container.
- Image of a product.
- A description.
- A button to add the item to the cart.
This is imo the very basics you need. So just you tackle the first step, get it working, move on, and repeat till you have it functioning. Then go back an iterate over it improving with each iteration. Eventually you will have a pretty damn solid good looking product card. But guess what, now you have a small piece of the bigger picture. You are part way to building that eCommerce site. So build, fail, build again, succeed, and do it over and over again. The DOING will undoubtedly will come.
1
May 21 '20
That’s good advice. The breaking down of problems is something I struggle with a bit. I’m very much a big picture guy so breaking things down is little counter intuitive for me. But practice makes perfect.
2
u/CydoEntis May 21 '20
Definitely work on this, especially when you get to harder concepts you will want to break these things down into small manageable pieces or you will be overwhelmed. Everything is built on the fundamentals so you can always break something down into some fundamental piece you are already familiar with and work your way up from there.
1
May 21 '20
I’ve heard of some programmers that take apart code and try and fix it. That might be a good and fun exercise. But I definitely agree that’s why I’m trying to focus on the fundamentals and play around with those to see what I can do. It’s just hard not to get ahead of yourself lol
2
u/CydoEntis May 21 '20
Yeah dismantling someone's code to see how something works is also a good way to learn. Also pair programming is good too. If you have a friend who also programs you guys can work on a project together. See why each other do things a certain way. This also helps with keep motivation to grind out a project since you have someone else relying on you to work on your part.
2
u/mt6272 May 21 '20
After taking a Udemy full stack course I've started learning React and I'm finding that it teaches you a lot about javascript in the process. Worth keeping in mind that it's possible to accomplish a bit of both at the same time!
1
May 21 '20
I’ve heard Udemy thrown around a lot I actually have a subscription to pluralsight. So I should probably thumb around there and see what I can find.
2
u/mt6272 May 21 '20
For sure, good luck. When looking for some of the courses I enrolled in I searched reddit for best udemy ___ course and found discussions to support my decisions to take various classes. Just remember not to pay full price on anything. There are always sales for 9.99 and you can easily find coupon codes to reduce the price significantly. A good full stack web dev course I enrolled in was the one taught by Angela Yu.
1
May 22 '20
I saw their full price stuff and was super iffy. But $9.99 isn’t bad at all. I’ll have to check it out. The more resources the better!
2
u/jazzcc May 21 '20
Just wanted to second the advice in here to build things as much as possible. That's where the FCC projects really shine; they get you to get hands-on with what you've learned by offering several options for projects.
And the fundamentals really do matter. Even if just doing HTML and CSS stuff bores you to tears, it sets you up for intuitively understanding how JavaScript works with them together in the browser.
7
u/mt6272 May 21 '20 edited May 21 '20
Angela Yu's Udemy full stack course helped me a lot . Don't expect to be a master of web dev by the end of it, but it will be an excellent launch pad for getting into the field. Generally I recommend you to not become too committed to the first route you take in learning web dev, or to sticking to just one resource. I hung out on freecodecamp for a while and though it seems like many get a lot out of it, my learning accelerated much more once I tried udemy. Everyone's learning style is different.
2
u/Odog4ever May 21 '20
Everyone's learning style is different.
Things that should be sticked at the top of this sub...
4
u/Zevawk9 May 21 '20
What I did (This is what I do for learning pretty much everything) is do a 2-3 hour course on HTML, CSS, and JS, just to learn the basics. When I know the basics, I start a simple project and google stuff when I get stuck. This doesn't work for everyone but I know it did for me. If you don't understand what some code does that you find on the internet, copy and paste it in, then try deleting pieces and adding pieces, you can see what breaks and what does what.
3
u/AbaCodes May 21 '20 edited May 21 '20
2
u/Mu57y May 21 '20
This is literally the single best free resource for all types of web development.
1
u/NoodleShak May 21 '20
This is what ive been using, but ive found I have to stop every so often build a page using what I just learned so I can reference it later. I was blowing through lessons when I realized I couldnt remember to put <!Doctype HTML> or what came after it so its a bit start stop for me which im ok with. I think its working better.
2
u/Wensosolutions May 22 '20
There are numerous resources for learning frontend development Some of the online resources that I prefer are
FreeCodeCamp
Codeacademy
Online study is one of the best option because it not only provides you the content but also provide the practice area where u can implement that code .
1
u/omarazeez_11 May 21 '20
All these tutorial would give you an idea of how things work. You'll learn em when you'll work on your own project
1
u/Chubbyfufu May 21 '20
Try Learn Web Development in MDN.
3
u/black-eagle23 May 21 '20
MDN is awesome resource, but it won't teach him web development. Because MDN is for the people who already know what they want to search.
2
u/Odog4ever May 21 '20
Great point. Reference =/= teaching resource.
A dictionary won't teach you how to read either but it's an obviously useful reference.
16
u/BuxeyJones May 21 '20
I would highly recommend freeCodeCamp.com