I can't get out of Tutorial Hell

You Can Do This!
#1

Hey Coders,

Throughout the year i have followed tutorials, Purchased Brad Traversy Tutorial on Udemy and went through all the material and even the responsive design section and projects on FCC but when it comes to trying to build a new design from Dribbble I’m unable to execute this.

I know this is one of the most important skills to get down. Being able to translate a PSD image into HTML CSS & some javascript, If i’m unable to do this then i ain’t getting very far. :confused:

Advice would be appreciated.

#2

When you created the projects in the Responsive Design section, did you create them from scratch? If not, then I would go back and completely redo them (different design) and don’t watch any more tutorials. The problem with tutorials is they lock you into a specific design pattern and you are unable to think for yourself. The only time I might watch a tutorial is for a very specific task.

3 Likes
#3

I can’t do that…but I’ve successfully coded the example projects for several FCC projects. I don’t mean I’ve completed the assigned project … I actually created the lesson to be coded. You got this. Don’t get hung up. Move on and go back later and test your skills. You don’t need to be perfect at any of this, as long as you are improving.

1 Like
#4

No I used a tutorial for specific things only

#5

I would start off with something super simple. Instead of trying to re-create something from dribble, start with trying to clone the google homepage and then work you way up. I also suggest coming up with some single-page designs yourself and building them.

Another thing, try not to use tutorials unless you absolutely have to. Instead, research your problems, read articles that have code examples and then try to implement those things.

2 Likes
#6

Thanks for the advice I really appreciate it :slight_smile:

1 Like
#7

Thank you :slight_smile: I appreciate the feedback.

#8

TO go along with this advice, try doing a “side” app if you are using a tutorial especially if it is your 2nd time through the subject and you understand it a little better. Even if it is as simple as making a “bear” shape with CSS when the tutorial is making a “raccoon”, it’s just a matter of changing some of the variables to get a new shape, but the overall them would be similar with two ears, a face, a mouth, etc.

2 Likes
#9

Don’t be discouraged! You can do it!

Just like you, I get stuck in reading and following tutorials because I love to learn. The problem is that you must tinker to get good at programming.
Programming is about problem-solving, not solution-entering, and the only way you learn is by repeatedly failing and realizing what you don’t know.

Try to figure out just what specifically is giving you trouble. Responsiveness? Look into mastering Flexbox. General format? Look at good websites and right-click on “inspect element.”

Maybe look at this thread where the kind folks here gave me some very similar advice when I was going through JavaScript tutorial woes.

Lastly: When you start getting frustrated and losing confidence like this, just step away. Go for a walk, hit the gym, do some yoga. It’s remarkable what a fresh mind can do upon return.

You can do it!

4 Likes
#10

Thank you for the advice, I will keep pushing on. There’s days where I feel like I’m not getting anywhere but I’m starting to realise they my approach has been wrong.

#11

Inspect mode:

Due to a lot of websites being built with bootstrap and other front end frameworks. It just gets messy looking through that html and it’s not very semantic but it’s good to see how boxes are positioned and how much margin and padding a box has. I’m not a fan of bootstrap 4 personally. Especially when you’re trying to learn html5 CSS3 and JavaScript. I believe bootstrap is useful later on once you have them three languages down.

#12

But yeah I will continue using inspect mode. It helps a lot.

#13

Rather than thinking about “PSD into HTML CSS …” Try thinking “I’ve got an image, my designer’s just handed it off to me, and I need to create a structure.” Don’t think code, think meta!

Take a look at that magazine you got in the mail the other day. Open to a random article, preferably one with pictures. See its layout? Someone designed that. It’s a one- or two-column layout, there’s a title, there are sections, there are asides or images… it’s all structure. Can you identify the components to that structure?

Put the article aside, flip to a full-page ad. Do the same with that. It has a catch-line (which is a form of title), it has information, it has images and graphs and fine print (which, in structure, might be a footer). Can you see the structural parts? Don’t worry about how they all lay out, first make sure you are able to identify structural components.

Story Time!!

Every so often, I spin off into a rambling reminisce. It’s a thing. So back in the day, I was a much younger man, and my first non-farm, non-Radio Shack job? I worked in a graphic design sweatshop. Everything was printed on a compugraphic (which means print a line of type, then pick up scissors and paste it onto a paper layout), layouts were sized with a vertical camera, and pages were built by rubber-cementing the layouts onto massive proofs.

From there, I applied for a job making twice the money, but they had actual computers. I had to fake my way through the test (worked, as I’d had experience with Illustrator '88), but the big question they had after was, “everything’s there, but the sizes are all wonky. Did you use the z-scale we left you?”

End of story time…

So after the structural bits, which I had cold in the above story, you can start working on the cosmetic bits - font sizes, colors, images, positioning. They are two separate tasks. Folks often try to do both at the same time, and some folks can, but I suspect you may find it easier to break it down into the separate tasks that they are.

Find the structure, build the structure, then do the interior decorating. At least, that’s my 0.02

5 Likes
#14

just start building something. especially if you dont know what youre doing

2 Likes
#15

Hello @wjwebdev!

I found that one of the ways that worked for me to get out of tutorial hell was to just build things. Build whatever comes to mind. Build anything as long as you’re putting your skills to use. Tutorials are great for learning theory but you have to put in the time and effort to actually shipping things.

For me, I would start with the design. I grab a sheet of paper and physically draw out what I want the layout to look like. This gives me a reference point to look at when I forget where I want this box to go or how big I want that section to be.

This is also what I do when building anything at work as well. We were tasked with implementing a new feature of our web app and before writing a single line of code, I grabbed paper and pen, physically wrote out how I wanted the code to be structured, and only after my pseudo-code was complete did I start writing the actual code.

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” - Abraham Lincoln

Of course it’s not a perfect plan but perfection is not the point or the goal. The goal is to have a guide on where you want to go with your code.

I hope this helps and I cannot wait to see what you build! Keep your spirits high and know that you can do this. It takes time, effort, and perseverance but you can do this!

2 Likes
#16

Love this bro, thank you and Merry Christmas! 2020 is going to be a year full of built projects from me. I’m going to make sure of that one.

1 Like
#17

That’s awesome! Merry Christmas to you and yours and please do share your progress!

1 Like
#18

Maybe you’re being a bit harsh on yourself. It’s not that you are unable to do this, but you are unable to do this right now. It’s not a permanent state.

A part of the fun in learning is when you first thought that something is impossible, you continuously learn, and at a certain point, you reflect back and see that the impossible is now possible. Though, the cost (or maybe a reward?) of successfully reaching the top of a seemingly insurmountable mountain is realising there’s yet another seemingly insurmountable mountain hiding within the clouds above. Thus, the cycle repeats itself.

If you can’t translate a PSD image into the respective codes, you can try picking a different and simpler image. Or just make multiple iterations ie your first translation is awful so do a second one and a third one ad nauseam until you got it right.

Hope that helps.

2 Likes
#19