Forem: Bryan Guillén da Silva

How to Watch a Coding Tutorial [and actually learn]

Bryan Guillén da Silva — Thu, 13 Aug 2020 09:06:05 +0000

So you are on Twitter or LinkedIn, trying to start your journey as a Developer, and these people keep telling you:

"You should not waste your time watching Udemy/Youtube courses, you won't actually learn!"

"I read the documentation, you should do the same"

"You will only learn if you build something and not by watching tutorials"

Well, they are partially right, but also wrong!

You DO have to build things. You DO have to read the documentation, and you SHOULD NOT only rely on video-tutorials.

BUT...What if you learn better visually? What if English is not even your first language, so only reading the documentation would confuse you?

If that is the case, then I would like to share with you a couple of things that worked for several other developers and me!

How to learn from video-tutorials correctly

1. PAUSE ⏸️

There will be a moment in the tutorial when you will notice that the instructor is about to code the solution to a problem. When you reach that point, PAUSE the video.

You will feel tempted just to see how he does it. You will even think:

"I'll try on my own next time."

"This is easy/hard, so I won't bother. Let's see the solution."

Don't give in. This will become a habit if you do.

2. THINK 🧠

Make sure you spend a meaningful amount of time trying your own solution!

Research the problem, troubleshoot, fail, try again.

Here is where those people from above got it right: Documentation is your best friend in these situations.

3. RESUME ▶️

So you really tried your best and couldn't solve the problem on your own? Don't worry! Make sure you don't overdo it.

You are not expected to be able to solve everything on your own if you're just starting! Hell, even Seniors are not expected to solve everything on their own. So don't put unnecessary pressure on yourself.

Play the video again and compare your approach, see what you did differently and how you could improve!

4. MAKE IT YOUR OWN! 🔨

Make sure you are building something that can be shown to potential employers! You cannot show something that is exactly the same as in the coding tutorial! Because you could have very well copied the code...

Instead, add features, change styles, layouts, functionality. It is ok if you keep the general idea, but make it different enough that you can call it YOUR work!

Just as every person is unique, your journey will be too. But hopefully, you can see that there are some patterns that many successful developers follow again and again to learn!

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

The Importance of Array Methods in JS [explained with food]

Bryan Guillén da Silva — Wed, 05 Aug 2020 21:00:20 +0000

An Array is a data structure, possibly the most fundamental one!

"Okay, but what is a data structure?"

Short answer: It is just a structure where you can organize, modify, access, store, and retrieve data. And Data, my friends, is essential to what we do!

There are MANY data structures, several are built-in into Javascript, many others have to be custom-made (and guess what, you need arrays to do so!)

Alright, enough, you get the idea and understand the importance.

If data structures are so important in programming, and an Array is the most fundamental one... Don't you agree that it would be helpful, even unavoidable, to learn the many Array Methods that JavaScript offers out of the box?

The problem:

I struggled with this concept when I was starting and it took me a while to understand them because:

Thinking about imaginary data when you are learning is too abstract and boring.
I just learn them conceptually. Too much theory, and not enough practice.

The Solution:

How did I solve these issues?

1. I related these Array methods to stuff that I did understand. It was suddenly not abstract anymore

If you know me, you know I LOVE food. So I prepared this little snippet relating food to some of the most used Array Methods:

2.I practiced and actually tried out the methods.

A great tutorial to follow and code along is Florin Pop's Array Methods Playlist.

Here is the first video of the playlist:
👇👇👇
Array Methods - Florin Pop
☝️☝️☝️

Hopefully, you can make the most out of these methods and make a big leap in your Development Career!

My Previous Blog Post:

👉 How I helped my Wife learn Front End Development

How I helped my Wife learn Front End Development

Bryan Guillén da Silva — Sun, 02 Aug 2020 20:15:44 +0000

At the beginning of 2020, my wife decided to learn Web Development and so she asked me where she should start.

Needless to say, I was excited to have someone so close to me to talk about something I love (and also to use as my guinea pig to see if my suggestions work for her! 😂 )

I helped her make a plan/roadmap to learn the basics of web development, starting with the Front End. Now, almost August 2020, she said she is having A GREAT time and the plan I elaborated is working like a charm!

So I decided to share this with you. Who knows, it might help other people too!

ENOUGH with the background story, here is the plan:

1. Responsive Web Design

Learn the basics of HTML, CSS, Accessibility (and so much more).

Where: Free Code Camp has an amazing platform to learn this. But I recommend you get this certification by following along with the amazing Florin Pop. He has videos where he goes through all the challenges on FCC and helps you solve them with no rush and lots of patience.

First video of the series:

Florin is kind, knowledgable and fun! (Make sure you follow him on his social media)

2. CSS - In Depth

In the last step you would have played around with some very important concepts but now it is time to get serious.

Where: Check out this incredible Udemy Course called:
👇👇👇
CSS - The Complete Guide.
☝️☝️☝️
In this course, you will see all the key concepts of CSS covered in depth. Important things like Flexbox and CSS Grid will be expanded upon compared to the previous step. Max definitely knows what he is talking about and will make complex concepts seem easy!

3. Build, Build, Build

Now you know A LOT and you probably followed along building several projects. Now it is time for you to build your own projects. It doesn't have to be the next Twitter or Netflix, but build 1 or 2 small projects where you put everything in practice.

DON'T FORGET: Upload your work to Github so other people can see it. Here is a tutorial on how to push to Github and make your projects live: A Guide to using Github Pages.

4. Looks + Functionallity

If you made it this far you are on 🔥

Your websites probably look amazing but now, they need to do something, right? The buttons, forms, even simple calculations, all that requires scripting/programming. Otherwise, the website is just static art.

This is were learning JavaScript, the most used and beginner-friendly programming language there is, comes into play!

Where: Another Udemy Course.
👇👇👇
The Complete JavaScript Course.
☝️☝️☝️

This one is taught by the patient and thorough instructor: Jonas Schmedtmann.

5. Solidify your knowledge - AKA Build some more!

The more you build, the more chances you have of retaining the knowledge you just obtained.

Where: Probably one of the people who has contributed the most to the Development community is Brad Traversy, and not a long time ago he decided to bless us with an awesome Udemy Course called:
👇👇👇
20 Web Projects With Vanilla JavaScript.
☝️☝️☝️

Believe it or not, that's it. If you follow these steps you will know enough to call yourself a Front End Developer!

Of course, there are a lot of things you could add, like a Framework, a CSS pre-processor, bundlers, and transpilers. But with HTML, CSS, and JS, you have enough to become employable!

Time: 6-7 Months

Budget: ~40$

BONUS: Be active in the community. Tweet about your journey, cheer other people, and learn from others. Have a professional LinkedIn Profile

DISCLAIMER: Make sure you build your own projects and not only follow along coding what others are coding. Pause the videos, attempt the solution yourself and if you get stuck, only then play the video to see how they did it.