Up next in 10
I coded 5 hrs everyday for 3 months and it changed my life!
1K views
Feb 6, 2024
"Embark on a transformative journey with our inspirational video: 'I Coded 5 Hours Every Day for 3 Months, and It Changed My Life!' Join us as we share a personal coding odyssey, exploring the impact of consistent effort and dedication in the world of programming. Whether you're a coding enthusiast seeking motivation or someone contemplating a coding challenge, this video offers insights into the profound changes that can result from a focused coding routine. Discover the power of discipline, growth, and skill enhancement as we reflect on the incredible journey that unfolded during this intensive coding experience. Watch, be inspired, and consider the possibilities for your coding journey!"
View Video Transcript
0:00
I coded 5 hours everyday for 3 months and it changed my life
0:27
I was absolutely a newbie to web development back in July. I did HTML code, CSS and JavaScript which kinda took me about a month to complete them
0:36
I started to code different projects but usually I would struggle with styling, positioning
0:40
and all that sort of stuff. But still I did not give up and managed to code for exactly 5 hours for 3 months straight
0:49
I started by building a calculator app which included lots of JavaScript
0:54
I began to complete more and more projects and finally the results are here
0:58
So without further ado, let's revisit each project one by one. As usual, this is my first project where I created a student registration form
1:10
So it contains different fields, different input fields. We have radio buttons and we also have 2 drop down menus where you can select your city
1:21
from and your department. And down below we can upload our picture
1:28
So this is basically a simple form and if you see at the very bottom we have a submit button
1:36
So it was a struggle cause it was my first time working with HTML and CSS but it contains
1:43
a little bit of CSS and yeah. That's pretty much of it
1:50
Let's move on. A web based calculator app which helps you perform basic math operations
1:58
It is basically a very common project when you are learning web development
2:03
And it was my first time working with JavaScript so I faced bunch of issues
2:08
I had no one to help me. I just had my internet connection
2:13
I was searching different websites and things like that but I simply didn't give up and
2:18
I came up with my own calculator. This is cool guys. You can create your own
2:25
Let's move on. Welcome to Animato. This is where I worked more with my JavaScript skills and basically styling
2:36
So it has lots of styling. This is usually called as a login in animated login form
2:44
So this is basically an animated login form. It is basically a simple form but it has a unique design and styling
2:53
Too much styling. Things like that. So this is my login form and there you go
2:58
You can enter your username, you can put your password, remember me and things like that
3:03
You can press the login button. And as you can see that when I hover on this button it changes
3:11
So things like that I worked with. It took me a while because it has so much designing that goes into this app
3:21
So if I click the sign up button, now notice the animations
3:26
See that? These are the animations and you can get that with the help of JavaScript combined with CSS
3:35
So this is usually an animated login form. If I click back on the login button I get back to the login page
3:46
So this is a login form. It's also a common project right
3:53
I'm sure you guys have worked on your own login form. Anyways this is the one
3:58
Let's move on to the next one guys and explore more projects
4:05
Oh my god it's getting better. It's basically my first project where I created multiple pages and combined them in order
4:14
to accomplish my goal and that was creating a personal portfolio website
4:20
So it basically consists of 5 different pages. You can see this cool animation, typing animation here
4:27
Yeah don't worry I copied it from somewhere in order to save my time but let's just not
4:32
discuss that. You can see some social icons here on the right
4:35
And the circle around the picture is also rotating but you might not notice that easily
4:43
There you can see a download CV button, contact me button. So if I scroll down a bit there you get to see my services section and it has a read
4:52
more button but of course they're not working because you know it's just a friend in
4:58
So let's move down here. My skills section. Oh my god it's awesome I guess
5:03
Let me know your comments, what are your thoughts about this one, my portfolio website
5:09
And there you get to see about me section. If you notice, if you notice carefully there, there's animation which is some sort of blinking
5:19
inside this picture so yeah it looks cool. Again it's not easily being noticeable but anyways
5:29
This is the last page in basically a contact form where you can contact me
5:35
And that's it. It also has a smooth scroll animation right. So if I click the skills tab it's going to move smoothly to the next section
5:50
And now you forgot one, the most important thing and that's the light theme
5:54
So if I click on this button, this crescent moon button, it will turn the theme into a
6:00
light one. If I click back here, yep. So it's basically a total theme changer you could say
6:09
So now this is the light theme. I hope it's also looking good but personally I like this website in the dark theme
6:18
It looks more cool, I don't know why but this is it
6:22
It depends but this is it guys. Let me know in the comments how do you feel about it
6:30
So Javascript comes into play again. And this is a to do list app so of course you need some Javascript in order to save
6:40
these tasks in this list. You know you can't do it without Javascript
6:45
You can't solely do it with HTML and CSS so it also includes Javascript
6:51
So this is a simple to do list app where you can add different tasks
6:58
So they work as reminders. So if I click the enter task, it's going to save and it's going to be stored in this list
7:08
And you can also edit these tasks if you want to. If I click here, you know it finally changed
7:18
You can also delete tasks from here but if you've completed a task you can just mark
7:23
it here. Yep, it says completed. So when there are no tasks you would see a message something like no tasks added
7:32
And there we have also multiple tabs. We basically have 5 tabs but 2 of them are not working because I didn't need to work
7:40
on them. So I have a completed task button, a tab so if I click on it there you get to see all
7:48
the completed tasks in this list. And pending tasks, let me add another task
7:57
Let's suppose it's just a task. So if I edit a task here but it's a pending task
8:04
So if I click the pending tasks, I'm going to see all the pending tasks, those tasks
8:09
that I didn't complete yet. So I guess it's also a nice app and you would like to use it
8:18
And play around guys, I'll leave a link to the source codes of all these projects
8:26
You can grab them absolutely for free. But this is a to-do list app that you would like to use
8:34
And it has a most important feature that is that even if you close the browser, even if
8:40
you restart your computer, you will still get to see all these tasks stored in your app
8:49
So let's move on. Look at these animations. The video in my background guys, this is getting interesting
9:00
Yeah, this is a quiz app where you can take a JavaScript quiz
9:05
You can customize it on your own, but I have chosen JavaScript for my quiz here
9:15
If you can read that, it consists of 20 multiple choice questions and each get equal marks
9:21
and so on and so forth. But we're interested in beginning the test
9:25
So this was my first time using a video as my background on the page
9:31
So let's begin the test. Here you can see, yep, I want to begin the test
9:38
So you can see that if I click next button, it will move on to the next question and you
9:45
can choose the correct answer. If I keep moving forward, I'll get my score as well, but it's just now taking time
9:55
If I click the score button, you can see some previous scores from here
10:00
And again, even if you close the browser, if you restart your computer, things will
10:04
still be there. Your score history will still remain there. You can also clear all the records by hitting this button at the top right corner
10:14
So as you can see now, I just cleared all the records and that's it
10:19
These two tabs basically are not working because we don't need them
10:24
How do you feel about it? Let me know in the comments
10:28
So I'll leave this one for you. This is a music player where you can play music from your local storage
10:37
It's a cool design, quite simple, but it looks cool. So here you can see that this cover is also missing
10:44
If I click the choose music, from there you can select a file chooser
10:51
And basically, what I mean to say is that you can select your music, a folder, a music
10:56
folder that contains music files, basically mp3 files or any other format
11:04
And then you can play them here. You can pause them and you can play the next music and so on and so forth
11:12
Play around with this one guys. I'll leave this one for you. Codeology
11:17
Well, this refers to our channel name. Yep, you're absolutely right. This is a landing page project where you basically advertise a product or a service
11:28
or anything. So in this one, I advertise our channel or our platform, you know, where we teach others
11:38
how to learn coding and how to code different apps and websites and things like that
11:45
But this is a landing page. And of course, if I scroll down, I get to see different courses here that we provide
11:54
And here you can see the pricing section. You can go for the free package, a pro package, or finally an enterprise package
12:00
You can see all these features being listed for each offer. Yep
12:06
And down here, this was my first time creating a footer. So I guess it looks cool
12:16
A simple footer. So this is something awesome. A weather app. I guess you guys were waiting for this one
12:26
A weather app. And yep, I can say that it was my first time working with an API
12:33
So basically it gets all these information, weather information using an API
12:40
So here you can search your city name. So if I search something like one of the other cities here in our country, that is
12:49
called Lahore. So if I search it, you're going to get all the associated information
12:55
You can see that there we have 14 centigrade. And this is how we have different information here
13:03
You can also see the current time, humidity, wind speed, and wind degrees
13:06
I guess it has some problems. That's why it turns to be zero
13:11
There could be some problem with the API. But before when I was like creating this one, I never had this problem
13:19
But this is a cool weather app and it's something like advanced, you know, bit advanced because
13:25
you're going to work with an API and then you're going to extract information from that
13:30
and simply show them on the page. So it's, you know, kind of tough one
13:38
But anyways, let's move on to the final project. So this is the last project
13:47
And this is where I use bootstrap for the first time. I learned some basics of bootstrap, watch some courses, and I came back and created
13:55
my own food delivery website. So and I also had to change his theme
14:01
So it was something I have never done before, but I finally did it
14:05
And there you can see this look. I guess it looks cool
14:10
I'm just praising myself, but this is how I feel, man. This is how I feel
14:16
So you can see a search bar here and you can see this cool hover effect
14:22
I mean, focus effect, of course. So if I move down a little bit, you can explore the menu
14:30
We have main courses. Oh my God. I'm sure you're going to have some water in your mouth, but let's just keep it that way
14:40
You can see you can have different salads. You can order anything you want from this menu
14:44
Of course, this is a front end, so it's not going to work
14:48
And then here we have our reviews. We almost have five star reviews
14:54
And yep, these are testimonials. And here we have about us section
14:59
And at the very end, we have a, of course, a footer
15:05
You can subscribe here as well. So this is it, guys. Now here's one interesting thing that I didn't mention in all other projects
15:15
Now let me tell you, all of my projects that I've mentioned in this video, the previous
15:21
projects, the previous nine projects, all of them are responsive designs. They are being customized for every device width
15:31
So don't worry about it. But once I started working with Bootstrap, it became way easier
15:39
So let me show you how it feels like. Let me show you its responsive design
15:45
So there you go. So this is in a thousand width multiplied by 700, something like that
15:52
So I'm going to reduce it, reduce its width. See it's changing
15:56
It's changing. Now we're going towards a small device width. See, now this is a mobile width
16:04
And this is how it's going to look like when you're viewing it on device
16:09
I mean a mobile device. So it changes. So I've done that in this one because this is one of the main feature for Bootstrap where
16:20
you can create responsive designs. And it made that thing a lot easier because, you know, in the previous projects I've done
16:27
that with CSS. It was quite frustrating. You have to take care of each and every element, but this makes it a whole lot easier
16:38
So there you go, my friend. If you want to start coding, I'm on your side
16:42
Consider subscribing our channel for absolutely free content. To get source codes to all of these projects, join our Telegram channel
16:51
Thanks for watching. Bye-bye
#Education
#Programming
#Web Design & Development
#Web Services