Forem: Okere Chibuike

HNGi8:It all begins with a small step...

Okere Chibuike — Mon, 16 Aug 2021 17:43:44 +0000

Introduction

Hello, They say a journey of a thousand miles begins with a step. My name is Okere Chibuike and i am participating in the I4G x HNGi8 a remote tech internship which has officially kicked off and we have already been given our first task which is to write this article/blog.

They said this blog would act as my "accountability partner" and I have to do it to be able to move to stage 2.

I applied for the Frontend track which includes but not limited to HTML, CSS, Javascript and ReactJs. This article is going to be in 2 sections. Section 1 is for my goal and what i want to achieve from the I4G x HNGi8 and Section 2 is for beginner tutorials on various technologies.

Section 1

My Goals

My goal/aim is pretty simple which is to reach the final, get the famous HNG branded T-shirt and put the tag "HNG finalist" on all my bios. Lol funny right?

Achievements after 8 weeks.

Make meaningful connections because I deeply believe so much in networking.
Gain valuable work experience and become a better team player.
Develop and refine my present skills and the skills i would learn during the internship.
Gain confidence because i know how much of it that I'm lacking.
Be a better all round developer than I was at the beginning of this internship.

Section 2

click on the image to watch the video on YouTube

Beginners tutorial on Javascript

Beginners tutorial on Figma.

Beginners tutorial on GIT.

Beginners tutorial on HTML.

How to learn any language while building projects!

Okere Chibuike — Fri, 01 Jan 2021 20:11:58 +0000

Salut👋

Firstly, I would love to welcome you to a new year. I don't know if you are excited but i definitely am. I am very positive about 2021. I couldn't ask for a better time to release this article because you or someone you know might be struggling with tutorial hell/building projects.

I am going to walk you through 5 steps on how to build projects and grow your confidence while doing so.

The steps listed here have greatly worked for me, from doing rubbish to being confident with javascript(to an extent🙄). I have built 5 little to medium JS projects without following a tutorial. Might not seem cool to you but it means alot to me(learning to celebrate small wins😇).

INTRODUCTION

Are you aspiring to become a frontend/backend developer? Do you want to have confidence in yourself? Then you should start building a portfolio right away!

Whether you are new to programming or already an experienced developer. In this industry, continuous learning and building projects is compulsory if you want to stand out and keep up with the rapid changes.

This is a no nonsense guide geared towards absolute beginners and intermediates that still haven't found their footing. That’s why we’re not going to be discussing on WHAT to build but HOW to build.

Is it 100% foulproof?? I don't know, I can't say.

Would it help you and give you an edge in this industry? I totally believe so if you are willing to put in the work and effort.

For the sake of this article i want to assume that you have a project in mind and you want to build along with your favorite YouTuber right? OK allons-y!

Step 1

Watch the video

Calm down i know it seems vague. I will explain.

When i say watch the video, I strictly mean watch the creator build the project from the beginning to the end WITHOUT coding along.

I want this to be a substitute for your Netflix, we can call ours programmingFlix(that doesn't sound cool in anyway😂)well this time it won't be all fun and laughter. You're going to be doing something for me while watching the video.

• Take out your note pad and write out concepts/syntax used in the video that you didn't understand. Don't assume you know it. PLEASE write it down.

See as example below 👇

Step 2:

Read on those "foreign syntax".

At this point, i want to believe that you have watched the video from beginning to the end and you have also written down everything you didn't understand or syntaxes that seemed new to you.

Now you are going to read up on each and everyone of them. One by one. If you don't know where to read up don't worry i have an article on free web developer learning resources.

Step 3

Watch the video AGAIN

I know at this point monotony and boredom starts to creep in. Even for me doing this step 3 can seem stressful but please don't think of skipping it. Do you know why?

You aren't just going to be watching it the same way you did the first time. This time around you have a sound understanding of every syntax and concept used.

This step 3 is like a confidence booster for you. At this point you would be able to explain every single line of code. Why this was used instead of that. You probably would even see a better approach compared to the one used by the tutor. Qui sait?🤷(who knows).

Step 4

Drum rolls please....🥁🥁🥁

Building the project!

I am sure you would be dying to get to this part. Don't worry with time the first three steps can be modified by you.

At a point you could be looking up on the explanation of the syntax as you're watching the video. That is step 1 and 2 together.

After this step(building the project) your confidence level increases. Apart from having a project to add to your portfolio, you understand every single thing. How cool is that?? Pretty cool if you ask me.

Step 5

Practice Practice Practice

You wouldn't want to just relax after building the project. Nothing beats practice.

For example let's say you built a to-do app so when I say practice, i don't mean you should keep building a to-do app over and over again.

I see people giving this advice and to me it doesn't make sense. This time try to add a little feature on your own. The first to-do app i made was a basic one without being able to delete an individual to-do. I challenged myself to add a trash can that onclick of the trash can it deletes that individual to-do. Very simple and it increases your confidence level.

At a higher point you wouldn't even need any tutorial video to build LITTLE projects anymore. If I can do it, you can do it too.

But please don't over estimate your level of experience(it can hurt your confidence level really bad). It's not because you built a to-do app then you would rush to build whatsapp😂. I know we all want to build that "Next big thing" but just calm down and take one step at a time while increasing the difficulty of the project with each step.

Wrap up

Building projects and understanding what you are doing can be the gateway to what we all desire as developers/programmers. The steps mentioned above can get stressful but with time it gets better.

Someone asked me on twitter how much would it cost him to learn how to code. Guess what I told him. Simply time and dedication. If you put in the work and effort the result should show.

A dev on twitter @usmahm got a job as a frontend developer because someone saw his "low budget" YouTube app. wow! For the record the app is really nice. That's another motivation for me to keep building projects.

@Favourite would say don't just follow tutorials but actually make sure you grasp the concepts and take a break to understand what you are following.

I would love to know your experience with the steps listed above. Do well to tell me on twitter @d_realmaster or the comment section below. Don't forget to like and share(you wouldn't know who you are helping).

As usual I'm always rooting for you if nobody believes in you just know that i do. 💓&💡

Beginners guide to building projects: My Story!

Okere Chibuike — Fri, 25 Dec 2020 19:57:54 +0000

Salut👋

Before i start i would love to wish you guys Merry Christmas!🎄🎉

Introduction

If I were to ask every developer(beginner devs especially) What building projects means to each and everyone of them the probability that I would get the same answer from all of them would be very close to 1(for those of us that skipped math class😉 probability of an event happening ranges from 0-1, 1 being that the event is absolutely going to happen).

Please Permit me to share with you my little story. I believe it would help a lot of beginner developers avoid making the same mistake I made. Want to hear it?? OK cool allons-y🕺

When I started learning to code and joined techtwitter, i kept hearing one particular thing from our wonderful tech influencers which was "building projects is the best way to learn!" and plus you could add those projects you built to your portfolio which you would probably show to your potential employers/recruiters.

That was the "Aha moment" for me. It occurred to me that I had found the "Holy Grail". Obviously so I thought

Please don't get me wrong I believe that building projects is the best way to learn but I feel there is a missing piece which is not usually addressed. Please just continue my story with me.🙏

So guess what i did next I downloaded several Javascript project videos and started "building projects".🤡🤡 Two weeks in I had 4 projects already.😍😍 I felt very excited super pumped up too.

One week later i decided to do something i had never done before. Explain my project/code to myself. I found out that I didn't understand any of the code. Why i used const instead of let or Map() instead of Filter() Nothing!!

Sounds funny/crazy right? Do you know what i was doing wrong? If yes tell me on twitter @d_realmaster. In my next article I would be writing extensively to you what i did wrong and how i approach building projects now. It might not be 100% foul proof but it has really helped me and i believe it might help you especially if you are just starting out.

Once again i would love to wish you a happy Christmas and i hope you enjoy the rest of the year. ❤&💡

5 free resources to kick-start your career as a web developer!

Okere Chibuike — Fri, 18 Dec 2020 20:42:08 +0000

Salut👋😇

This was definitely not what I planned writing on this week but after my last article on the detailed roadmap to getting started as a frontend developer I got several dms from you guys on twitter @d_realmaster and to be honest I haven't gotten that much dms since I joined twitter(it felt really good😂) and most of you kept asking the same thing "free places/website to learn" and I can't blame any of you at all.🙅🙅

Paid courses are very good but the least amount you can get a good course is $15 to $20. That might not seem much to some of you guys in "advanced" countries but for some people (using Nigeria as an example) that is 30% of a workers minimum wage. So for unemployed people or students(like me) free resources is a complete no brainer.

The term “free resources” might make some people skeptical but some of the most fundamental resources for web development come without a price tag.🏷

The following resources are essential tools if you really want to kick start your career as a web developer. Are you ready? OK Allons-y🕺

Disclaimer: I am not in anyway affiliated with any of the listed resource/company. Every view stated below is based on my individual bias.

1) W3schools (Visit)

W3schools claims to be the largest web developer site on the internet (I don't really know how true that is😅). That aside it's a fantastic place to be if you're into web development.

W3Schools uses simple code examples and simple illustrations of how to use it. It focuses on simplicity.
The tutorials start from basic level and move all the way up to professional references.

As an intermediate their "how to" section is my go-to if I am stocked when building a project or if I just need inspiration. Long story short I love w3schools. Next is...

2) Sololearn (Visit)

I can't over stress how beginner friendly sololearn is. Everything from html to css to Js are all explained well. So regardless of where you are coming from whether you have a CS degree or not you should perfectly understand sololearn. (The name says it all sololearn).

The only "bad thing" that I can say about sololearn is that it is somehow "limited". My advice is pick up the basics with sololearn and move to another resource.

3) FreeCodeCamp (Visit)

Freecodecamp is a basically one of the best things that has happened to us as web developers and programmers.

Freecodecamp is ideal if you already know bit about code, because you can simple skim through it and still understand it. For new comers it can be a little bit difficult to understand. Therefore I might not really recommend it to an absolute beginner.

I tried using Freecodecamp during my beginner days but I basically wasn't understanding anything. I couldn't even pass their practice test.

As an intermediate Freecodecamp is my go-to for everything like refreshing my memory or learning something new.

4) MDN Web Docs (Visit)

MDN basically has everything that it ought to have. I love it because it is a little bit advanced. I don't think there is anything related to javascript or web development in a whole that isn't on MDN. It's simply awesome.

I came across Immediately Invoked Function Expression(IIFE) just yesterday for the first time and for the record i have "completed" the JS course in one of the above resources.

All I can say is MDN might not be really beginners friendly. Some people will disagree with me but like i said earlier i am just stating my take on each of them.😊 I am definitely going to write on IIFE in one of my future articles(look at for it👀). The last but definitely not the least is...

5) YouTube (Visit)

I feel YouTube is a must use for everyone. I don't think I am supposed to stress over how important YouTube would be in our journey. You practically get to see awesome developers like Brad Traversy of Traversy media or Ania Kubów of code with Ania kubów and the rest of them work on real life projects which can have a massive boost in your career.

My only advice is try to read about that language/topic of your choice either from the official documentation or from the above resources before running to watch a crash course or all those "understand Javascript in 10mins videos"😂only if life was that easy.

WRAP UP

As we all know peoples judgement on things can be subjective. Like I always say check out most of them and stick to anyone that resonates with you better.

One last thing I don't want it to seem like I was in anyway trying to undermine the effort put into these free resources. Being a content creator is not easy and making your content free can only be done by wonderful and good hearted people.

I am officially using this post to give a shout-out to every content creator out there. Y'all are all MVPs.🙌 Especially the ones that feel the aren't getting the kind of engagement the want(like me) Y'all are kings too.👑 Continue doing what you are doing. I am always rooting for you.❤&💡

How to start a career as a frontend developer??🚀Look no further.💁

Okere Chibuike — Sat, 12 Dec 2020 00:20:10 +0000

Salut(its hello in French😇)👋

To start a career you need to learn the skills of that career.
There are many ways and resources that can help you in picking up these skills but the path isn't always clear with so many options available for learning and for someone just starting out it can be really overwhelming.😑😭 Trust me i have been there.

My aim of writing this is to literally hold your hands🤝 and walk you through the process/path that would give you an edge over other newbies. Are you ready? OK Allons-y🕺(let's go)....

Who is a front-end developer

Have you ever looked at a website and wonder how/what made it worked? How the website layout looks different on different screen sizes or how a button acted when clicked? All these and more are done by a Frontend Developer.

Skills required

The internet
HTML
CSS3
CSS Framework
Javascript
Javascript Framework
Version Control System

The Internet

Learning about how the internet works can be boring🙊(please don't tell anyone I said that😂). I just narrowed it down for you to 3 important/neccessary aspect🤗.

Learn about HTTP.
Learn about DNS.
Learn about domain names(how to get a domain name,etc) and web hosting(both free & paid).⁣

HTML(Hypertext Markup Language)

I see HTML as the foundation of web development. I want you to see it as that too.😇

To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form,etc cool right?😎

Here is my learning path for you🤗

Learn the fundamentals(very important)
Conventions and best practices
Semantic HTML
- Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.
  Elements such as header , footer and article are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
Forms and validation
SEO basics as well as accessibility.⁣

CSS

CSS(Cascading Style Sheets), is a style sheet language. How HTML is responsible for the content and structure of the web page,CSS determines how this content should be presented visually.

You can use css to add colours, change fonts, insert background color and to some elements, as well as to style forms.

Once you know a good amount of HTML you should start learning these:

Learn the fundamentals
Css Grid
Positioning
Display
Box Model
Flexbox
Responsive design and Media Queries

CSS is also used to make web pages responsive(ie making the structure of the page fit perfectly into various screen sizes like smartphones, tablets,etc).

CSS Frameworks

CSS frameworks are tools used by developers to make their job easier.A framework contains ready-made components and tools that enable the developer to write code faster.

Frameworks give developers the tools to quickly spin-up user interfaces that can be tweaked and iterated on throughout a project instead of trying to reinvent the wheels everytime.

Some css frameworks🤗:

Bootstrap(my personal favorite)
Tailwind css
Bulma
Materialize Css
Foundation etc

I can't say which is the "best". I believe personal interest differs.
My suggestion is to check out all of them and know the one that resonates with you better.😜

JavaScript😈

I hope i didn't scare you with the emoji? Don't worry javascript is not hard(coughs😂)

What is JavaScript?

JavaScript is a programming language that adds interactivity to your website.

From my experience javascript is a very beautiful language. I am always intrigued by every new thing i learn.

However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. I hope you are still with me? Ok let's continue💯

Now that you know some CSS start learning some javascript. Learn the fundamentals before trying anything else.⁣

Learn the fundamentals
Syntax & constructs
DOM manipulation
Fetch API/AJAX
ES6 & Modular JS etc

Javascript Frameworks

JS frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks.

Same with css frameworks, js frameworks are used instead of trying to reinvent the wheels every time.

The Big 3 JavaScript Frameworks

The three JavaScript frameworks that currently dominate the market in terms of popularity and usage are:

• React

• Vue

• Angular

Again i can't tell you which to choose. Check all three out and stick to anyone that resonates with you better.

They each have large communities. When you want to start your new project on front-end technologies, these three are your best bets.

Version Control System

Now at this point, you could stop here and you'd have your first website, but when working with large teams on projects you want to know about version-control systems like git.

Git is a content tracker. So Git can be used to store content — it is mostly used to store code.

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. Version control helps in handling the codes in git.

You should learn these:

Learn basic git commands
Terminal
Repository hosting system

Git cheatsheet👇

Wrap Up

• I believe that with the detailed information above, nothing can stop you💪 from becoming a frontend developer except you

• Please don't make learning a framework a substitute for learning vanilla Css and/or Js. You really don't want to do that.

• Believe me when I say the path to becoming a developer isn't all red as roses. A period would come and you'd feel like giving up(i got those thoughts😪)

I believe you can do it. Feel free to share your struggles/progress with me on twitter.🐦

🙌I'm rooting for you❤&💡