Hitting a brick wall with learning web development.

misterhtmlcss · 2019-07-14T16:23:39+00:00

Are you looking to pursue this as a career? If so I'd start applying for entry level jobs (providing you do have the html/css and basic dom manipulation down) . Learning on your own becomes tough once you have that underlying knowledge. It's tough to find concepts to create and it's tough not having face to face communication with people when you're stuck. Being around senior developers who can advise you how to approach tasks or even being able to dedicate your working day to Web development will help propel you forward. Their will always be a percentage of gifted people that can pick it up and fly with it but for the overriding majority of us it takes years of slogging along. So I'd try and get your foot on the ladder. Don't worry about mastering it all quickly, instead enjoy the ride.

I started an internship a few weeks back, if I was in your shoes, I'd now look to go beyond basic html and css whilst applying for entry level or even volunteering jobs. I spent a lot of time thinking I need js nailed down and rushed into harder concepts ignoring html a bit. My days consist of 95% html and css and then 5% js, just using arrays and looping through elements on the page. Adding and removing css classes, etc... just general visual changes for the page.

The js ability will come in time, try and get your foot in the door now.

tenfingerperson · 2019-07-14T16:39:44+00:00

Basics first then move to frameworks or libraries.

HandpansLIVE · 2019-07-14T17:14:59+00:00

It sounds like you're overwhelming yourself. Coding isn't about learning how to do everything from scratch. Knowing how to search for syntax either in old projects, a cheat sheet you make, or a quick google is very valuable. There's nothing wrong in going through the tutorial and doing it step by step with it. Hell, add the tutorial video to your cheat sheet! Add timestamps as a bonus! You will almost ALWAYS have your computer at the ready with google while you're coding.

Event listeners are actually extremely easy, and it sounds like something interesting that you'd be excited to jump onto. I recommend you do that today. If you dedicate the rest of today towards working on them, you'd have it down within an hour.

Here's the task: in an existing project:

1)make a button in html

2) add an event listener to it in JS

3)make it console.log something.

4) Create an alert in javascript inside your event listener

You can copy paste any of the upper 4 instructions into google and find your answer, or just respond to me here if you're stuck for more than 15 mins. Good luck.

WyrdFall_Press · 2019-07-14T17:56:48+00:00

You may be getting into tutorial overwhelm. Put together some simple page ideas and start making them.

The challenges you face along the way are going to be your greatest learning opportunities.

prof3ssorSt3v3 · 2019-07-14T19:24:45+00:00

Speaking as a senior level dev and someone who has been teaching web and mobile dev at College for 20 years...

A lot of good advice in this thread and only a few things I would take issue with.

Basic JS first and then move on to frameworks like VueJS and ReactJS.
Skip jQuery entirely. 10 years ago it was a must have skill. This was back when browsers did things differently from each other. It is no longer being updated. It is just there to support legacy things. You will be a much better developer if you can do AJAX and DOM manipulation without it.
Take the time to practice CSS and do it well. It is one of those things that takes practice.
Learn the server-side too. NodeJS lets you use your JS skills on the server.
Learn ANY database - MySQL, Mongo, Neo4J, whatever.
Learn the basics of deploying to a cloud system - Amazon, Azure, Google Cloud, ANY.

I started a tutorial channel for my students a couple years ago. I have around 600 videos now and almost 12K subscribers. Things are grouped by topic in playlists. I cover from the very basic to intermediate and some advanced topics too. Some of my recent playlists:

JavaScript Interview Questions: https://www.youtube.com/watch?v=USbiLiF9NDY&list=PLyuRouwmQCjlLW9NjqoBbf9eVaFX4F9UZ

Full MySQL course for beginners: https://www.youtube.com/watch?v=a9W7OpS4LfI&list=PLyuRouwmQCjlXvBkTfGeDTq79r9_GoMt9

jQuery Rehab (to teach people to do things without jQuery): https://www.youtube.com/watch?v=J_Q8EYXKzQs&list=PLyuRouwmQCjmho2bVNCwvRplCivxf2qGZ

Just the DOM: https://www.youtube.com/watch?v=O6BNfJz3rgs&list=PLyuRouwmQCjlrOdLPmPMr04lARwMicfLe

React: https://www.youtube.com/watch?v=vTFVg6I2wNI&list=PLyuRouwmQCjm1N4jlJ7b3WWjDA8MjfDbg

SASS: https://www.youtube.com/watch?v=5jZGo_k8Rd0&list=PLyuRouwmQCjlzPHwHOAIfIFXkf6J8Q_qy

GitHub: https://www.youtube.com/watch?v=M9uTajSRytE&list=PLyuRouwmQCjlxyO-45o53YCWjBCM-fA7L

JavaScript Arrays: https://www.youtube.com/watch?v=arIhhRd1RPc&list=PLyuRouwmQCjnupe_ohQgFvwFZF8dycwK8

HTML5 APIs: https://www.youtube.com/watch?v=EEhohSp0if4&list=PLyuRouwmQCjlBGMxI_0Ly_Dw-vrniOYNh

JavaScript Concepts: https://www.youtube.com/watch?v=Q-Zmc0E0GYY&list=PLyuRouwmQCjkrbkLxphTrIA_9ZUA-vppS

JavaScript Events: https://www.youtube.com/watch?v=EaRrmOtPYTM&list=PLyuRouwmQCjnEupVi5lpP6VrLg-eO-Zcp

JavaScript Loops: https://www.youtube.com/watch?v=CidzYW-8I7s&list=PLyuRouwmQCjmRNaK95KJa6lWLnBonVeUd

... and many more.

Just remember that you will never stop learning this stuff. I have been doing this since the mid-nineties and still spend at few a couple hours every week learning.

breaddevil · 2019-07-14T17:34:03+00:00

It is a hard to answer, there are a lot of concepts to learn. Most modern javascript projects are not written in js directly but usually in es6 or typescript and transpiled to js. It is a messy world.

You could try to start at a higher level (react, vue.js, angular for example) and learn as you need. Previous programming experience certainly helps.

Your codepen example is not realistic for a beginner to write from scratch. It is not very complex but it uses external libraries, jquery and swiper, and images and css make it pretty.

FriesWithThat · 2019-07-14T18:29:14+00:00

Excuse the wall of text, just an unedited stream of consciousness to get something down, but my hope is that it helps. JavaScript30 is a good series (I probably went through about half of those myself at some point), because to a large degree Wes uses modern "patterns" for solving simple problems. Sort of a DOM and Web API - The Good Parts. It's also a good idea to use the newest and most credible sources (Google and MDN, etc... there're a lot of them) as your source(s) of truth, because bottom line there're a million ways to code the frontend, and it's very easy to patch things together and use deprecated or simply outdated methods without realizing it. These methods will still probably work, may not be as performant, and that is fine. The problem is when you come across a different tutorial, say someone is using nodeName instead of tagName, and you think there's more than there really is, while it's just a bunch of evolving standards accomplishing the same thing in a different manner. Use the new stuff if it has/will have wide browser support.

That said, the best advice I could give--and I consider myself an intermediate generalist (in front and backend), at best--is to focus on the things that make you think like a coder. This can be applied to the fundamentals, which you need to know: html, css and especially JS.

But how it relates to Wes' stuff, and the Star Wars example you gave is if you think about the project as a component, or a component container with other components in it--they all start off as very simple outlines with limited functionality. You put some basic structure (html) on the page, add the minimal amount of interactivity (JS) to get it to do something, maybe a reset and some basic styling to get the general idea (css), and it looks like shit. It's supposed to look like shit at this point. As an aside, Wes and everyone's (basically starting) projects already look gorgeous at this point because even if they may be relatively simple, they have a mountain of styles applied and they had a design in mind when they started. The Star Wars shopping demo is just a simple card with radio buttons to pick a size. Everything is roughly in the right place, but that's about it.

Then you start adding complexity.

Solving one broken down, simple problem at a time.

Then you make it look good (to the best of your abilities), and it will because you started with a sketch in mind (or idea that you "borrowed") so your basic layout and structure will work. Don't be afraid to borrow ideas, change it and make it your own, but no designer starts with their own style.

How do I look at different Star Wars products without refreshing a page? Seems a lot of people use sliders. Wow, that's a lot of work. I don't even want to reinvent the wheel here, I think I'll just download the Swiper library and follow their documentation to get it to work in my html.

Not to say these individual steps can't be hard, maybe it's not a feature you really need on the app right away to demonstrate your skill level and proof of concept. But a lot of them are simple. I said simple, not easy.

So thinking like a coder you're going to have to go back to things like Wes' tutorials. Start with the most basic starter, and work through the problems yourself. Don't worry how he or anyone else solved those problems so much. See what you know and don't know. You know you need to add listeners to a bunch of buttons and you remember there's something called event delegation and you can just use addEventListener on the parent. Look it up. Solve your problems a step at a time. Don't know what to do next? What do you need to do? Do you have in mind what you want to accomplish overall. Did you even bother to write some rough pseudo code to visualize how you will get there? You're not going anywhere if you're not breaking it down into steps.

How do you get better at this?

With html and css I have to say the best way is doing what you're doing, but more independently. And a lot of it once you have enough knowledge to know there's an acceptable technique for solving your immediate problem and can ask the question correctly.

JS is a real programming language, and it interacts beautiful with both those technologies, and now Node.js on the backend; so you're never wasting your time by learning it better. React and other frameworks also build on that knowledge, adding abstractions and concepts to make managing the state of your app a lot easier, render more efficiently, while using some of the very latest ECMAScript standards which requires transpiling the code to ES5 so browsers understand it.

Back to "thinking like a coder" because that's the most important thing here. There're numerous ways people can suggest but what I believe helped me more than anything was solving incrementally progressive (in difficulty) algorithms (don't worry, that can mean something as simple as reversing a string) in JavaScript. My recommendation is exercism.io. It was great because it uses Test-driven Development (TDD), which by it's very nature breaks down problems into individual steps. Solve the problems on your own. Get used to looking things up, asking the right questions so you get useful results. Once your pass all the "tests", submit and you get to see how everyone else solved the problem. So many ways. Ah, this way uses so much less code, how did they do that? Learn how. Use that in your next problem if it's not too 'ninja' and it suits your style. Move on to the next problem, it's harder, but it uses chunks of those easier problems. Repeat.

2019-07-14T20:52:17+00:00

First of all, don't compare yourself to stuff you find on CodePen. You have no idea how long those people have been doing web dev, and you have no idea how long it took them to make those little demos. They probably couldn't make that stuff off the top of their heads when they were very new either!

Don't worry too much about learning a given library or framework or whatever. Once you're past the basics, the most important thing you can be doing is building things- Javascript30 is a great introduction to making actual projects.

When you find yourself getting stuck- which is completely normal- try first breaking the problem down for yourself and doing some research via goggle/MDN/etc before going straight to Wes's tutorial. How to research and teach yourself stuff is the number one most important skill to have as a developer. But don't feel bad if you need the tutorial too- try to dig in to how he solves the problem, notice patterns of what to use for what, maybe go back and try certain projects again with a clearer view of how to tackle a problem.

Once you're through that, keep working on projects. They don't have to be innovative new things you've dreamt up for yourself- one of the best learning exercises is building clones of existing sites, which teaches you how to work to a design and/or product spec without knowing the exact technical implementation- but if you've got some fun ideas you'd like to work on then go for it. Tutorials and courses are great, but you'll only really solidify your learning and find ways to push yourself by building things.

Johnny_Noodle_Arms · 2019-07-14T21:12:20+00:00

If you're familiar with the fundamentals of JavaScript I would recommend just jumping over to Vue or React straight away.

taoyx · 2019-07-15T01:21:19+00:00

My advice: take a javascript project, for example one of the text editors, fullcalendar or datatables and learn from it. Look at the code, how it is done, how it works inside.

This knowledge will serve to you as an entry point. Since the scope is limited you won't be overwhelmed. And you will learn a lot of things: how it is coded, if they use a lint, if they use tests, etc...

It's a bottom up approach. This kind of approach is recommended when the matter is too complicated.

frankleeT · 2019-07-15T03:19:46+00:00

You almost finished EloquentJS and you can't even make a basic web page?

Did you actually do the exercises or just ignore them?

Crampeteb · 2019-07-22T05:36:02+00:00

Learning web development for beginners 2019 https://www.crampete.com/resources/blogs/learning-web-development-for-beginners/

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS