DEV Community: Codeitdoc7

What Awesome Personal Projects are you working on?🔥

Codeitdoc7 — Mon, 29 Aug 2022 15:36:34 +0000

Hello there!👋

Right now I'm working on 2048 clone(almost done) and a bookmark extension. I would love to know what projects you guys are working on?

Lets discuss it!

11 Open Source projects for you to contribute👨‍💻

Codeitdoc7 — Fri, 05 Aug 2022 07:24:00 +0000

Hello there 👋

It's Codeitdoc7 this side! So you want to contribute to open source projects but don't know where to find one, worry not I got you covered here's a list of projects to contribute.

Awesome🔥

Edit - Udacity is now deprecated.

[All suggestions are welcome 💞]

You are Awesome where can I Connect with you😎?

🚀Github

🌱Instagram

📨[Email] - loficode777@gmail.com

🐦[Twitter]- Soon

Build these projects to be an Advanced Web Developer 🚀

Codeitdoc7 — Thu, 04 Aug 2022 09:20:37 +0000

I have watched hours of videos, read hundreds of articles, and come up with these awesome projects that will take you from beginner to advanced web developer in just a few weeks.

Hello there👋

It's Codeitdoc7 here. I know how confusing it can be for beginners when deciding which projects to make. In most cases, we just end up creating a bunch of unfinished projects. But that ends today. Yes, you're going to make these super fun projects that will make your swag level go from 1 to 3000 (yes, I love Ironman).

[As a disclaimer I am aware there are probably much better projects one can make — and I'd love to hear them in the comments! — but this article was made using the knowledge I had at the time]

Let's dive strait into it🏊

A Personal portfolio website 💻

It has to be number one on the list. Not only is it super fun to make, but it's also a place to showcase your awesome projects. Additionally, it allows you to showcase your skills in the framework/library that you used to create the website, not to mention the creativity.

A stopwatch⏱️

It's a simple beginner friendly project which you can make in a day. Play with some CSS to show your creativity.

A Website that uses 3rd party API📨

Every company uses 3rd party API whether its payment API or framework API. So its very important to know how to use them. Find a API that interests you no matter Game API or Weather API and make a website that uses 3rd party API. Or make one API yourself and become a billionaire.

A calculator📱

I'm not taking about a simple calculator no, but a fully responsive GUI calculator with light/dark mode switch.
It will showcase your DOM manipulating skills.

A Search Bar🔍

Every website has a search bar, so its a good idea to build one yourself it will help you understand how data is stored and how to access it.

A Game🎮

I'm not saying you should make a game like COD but a simple board game will be enough [2048 will be awesome]. It will be a fun way to test your logical skills, which is the most important part of web developing and hey its super fun to have a game of your own.

Website clone👨‍💻

Making a website clone help you with learning more things as I also did while cloning google incognito mode, I learned about margin-inline.

[All suggestions are welcome 💞]

You are Awesome where can I Connect with you😎?

🚀Github

🌱Instagram

📨[Email] - loficode777@gmail.com

🐦[Twitter]- Soon

Let's play with CSS measurements 🐱

Codeitdoc7 — Mon, 25 Jul 2022 06:39:00 +0000

We missed you

Hello there! My apologies for being so late, but I have been not well lately. Doc told me, "You're taking on too much stress:" Nonsense. I am following everything this great blog says.

Anyways getting back to units(CSS units), what there are more units then px, % ?🤯.

I know it might sound surprising but there's an abyss out there. Don't worry, we're just scratching the surface today, but rest assured it's more than enough.

Before we start I would like to thank @matthias for this amazing post which inspired me for this post.

Blow my mind🎉

vmin

1vmin = 1% of viewport's smaller dimension

Imagine a box, an honest box made using vmin property(100vmin) placed inside a container and that container can grow as much as it wants. And when we feed food to that container the box eats all the food so what does the container do? It grows more, but the box cannot grow larger than the initial size. Finally, the container gets to eat the food, and once the container is full, it decides to shrink below its initial size, and so does the honest box.

A vmin unit shrinks with the device viewport, but cannot grow beyond the initial size of the viewport.

Browser support- only Opera Mini doesn't support it.

Note- Don't forgot to take margin and padding into account as they also affects the final size.

Play here

vmax

1vmax = 1% of viewport's larger dimension

Imagine a box, very greedy box made using vmax property(100vmax) placed inside a container and it can grow anytime it wants. And when we feed food to that container that greedy box eat all the food, so the container grows in hope of getting some food but the greedy box also expands with it. Now the container is very hungry so what does it do? It shrinks below its initial size, but the greedy box can't shrink below container's initial size and breaks, finally container gets to eat the food.

A vmax unit expands with the device viewport expands but cannot shrink below the initial device viewport size.

Browser support- only Opera Mini doesn't support it.

Note- Don't forgot to take margin and padding into account as
they will affect final size.

Play here

Percentage

Imagine a box, a magical box made using percentage property(100%) placed inside a container and that container can grow/shrinks anytime it wants. And when we feed food to that container that magic box eat all the food what does the container do it grows more and so does the box. Now the container is very hungry so now it shrinks below its initial size, and the box also shrink below container's initial size, and the container dies of hunger end of story.

A percentage(%) unit can expands as the device viewport expands and can also shrink as the initial device viewport window shrinks. But be careful if you decide to use it.

Why?

The results will differ from browser to browser as they all uses different approach calculating units.

Try setting the height of parent div with (%) and see what happens.

Play here

Tell me more

This will be a series, more blogs are coming with some great stuff, make sure you're follow me.

Hey you got something wrong🐱

Please let me know if there's anything I can improve, I am always eager to learn more.

You are Awesome where can I Connect with you😎?

🚀Github

🌱Instagram

📨[Email] - loficode777@gmail.com

🐦[Twitter]- Soon

How can I show my appreciation for your work✨

You can share your love below in the comments, connect with me on other platforms and you can also buy me a coffee😻.

Thanks.

How to choose a coding course for beginners ✨

Codeitdoc7 — Wed, 13 Jul 2022 09:41:36 +0000

Coding is fun and if you disagree you're doing it wrong.

Hello there👋
It's natural to feel demotivated once in a while but if it's more than once then there's something wrong. And 9 times out of 10 the cause is you're not learning from the right platform.

The question I have been receiving a lot since I started writing here on dev.to is where should we learn coding? What is the best language to learn first? And like wise.

In fact, I have gone through this myself when I first started with coding, I found myself on w3schools which was fine until I was polishing HTML and CSS (yes, I have a CS degree) but once I started with JavaScript, I couldn't concentrate or retain what I had learned. I thought JS must be difficult, so I forced myself to keep learning and due to that I lost all the motivation and given up learning. However, because of my obsession with coding, I tried to solve CSS problems on stack overflow and I came across a lot of comments why one should not be learning from w3schools. so I decided to give it one more shot and started searching for js courses and was overwhelmed at first but eventually found one and haven't feel demotivated since. So you can be sure I know what I'm talking about.

What to look for

You learn when you write

We watch YouTube videos and think we have understood everything, but once we actually decide to write our first line of code reality hits and we realize we know nothing😿, at one point or another we all have been there.
You have to practice what you learn.

Don't learn alone

It's fun when you have peers to learn coding with.

Learning curve📈

It's always hard to decide what to learn next and it's good thing if you don't have to put a list yourself.

Staying in zone🌌

There is no point in wasting your time and energy on doing things you already know, nor do you want to get stuck on problems which are too hard for your skills level.
Find a course that challenges you but doesn't throw impossible challenges, will be beneficial.

Solving real life problems

If you don't know how to implement your coding skills in real life, it doesn't matter how good you are at it. Making project/assignments will help you apply your coding skills to real-world situations.

Logic(Most important)

"First, solve the problem. Then, write the code." - John J.
Writing code is easy, you have to know how to solve a problem i.e. to work on your logic skills.

Help me find the perfect platform

It's hard to find a good coding course especially for a beginner, but I am here to give some suggestions.

Boot.dev

You can check the awesome website here

While they provide paid courses, all of the content is available for free too. What's so great about boot.dev well I asked this myself when I first found out about them, but believe me they know what they are doing. I enjoyed many things about boot.dev, such as the fact that there is no need to sign up to access their courses, the learning path, a great discord community. But the best part is they made all the content available to everyone, so those can't support the project can still have access.

freecodecamp

You can check the awesome website here

This is a non-profit open-source organization that offers many courses and a learning path. Have a great community and you can complete assignments for earning a certificate. They also have a YouTube channel where you can watch and learn (make sure you practice what you learn).

Got suggestions😻

Please let me know if there's anything I can improve, grammar nazis are welcome too😹.

You are Awesome where can I Connect with you😎?

🚀Github

🌱Instagram

📨[Email] - loficode777@gmail.com

🐦[Twitter]- Soon

Deploy/Host your website for free

Codeitdoc7 — Sat, 09 Jul 2022 10:10:55 +0000

Hey there, so you have a awesome website ready to be shared with the whole world or just looking to flex in front of friends/family🔥, but don't know how to do it. No worries I am here to help. Well there are many websites for it, but today we will be talking about Github Pages.

Why GitHub Pages?
TBH I have deployed my first website using GitHub pages, so I will able to explain it better, and it's very easy and fast too⚡.

Enough chitchat tell me how to deploy🙄
Fair enough, let's get the website up in no time-

Go to the repository (If you don't know how to create one this will help).
Click on settings

Pages

Under Source select the branch which you want to deploy.

Select root folder if not preselected.

Click on save.
Wait few seconds for it to complete the build process(You can check it in the action tab).

And Your awesome website is up on internet.

Deployed website is just showing readme page

Just change the xyz.html file name to index.html.
Problem not solved add index.md file and it will definitely fix the issue.

Note- Make sure to wait few more minutes for it to complete the build process then refresh the website.

I Got some suggestions✨
That's great I'm always looking to improve, please comment below your suggestion (s).

You are Awesome where can I Connect with you😎?
🚀Github

🌱Instagram

📨[Email] - loficode777@gmail.com

🐦[Twitter]- Soon

Open Source Website to Contribute as a Beginner🐱

Codeitdoc7 — Sun, 12 Jun 2022 08:17:23 +0000

Firstly I would like to thanks @isabelcmdcosta for the post idea.

As a beginner we all want to contribute to open-source projects. and as a beginner myself I know how hard it's to find one to contribute especially to frontend projects.
One day while completing my first freecodecamp project, I thought to myself why shouldn't I create one, so after sometime I finally able to create oneRepo link.

Website🔥
Here is the Deployed website. This project need lot of improvement.

Who can contribute✍️
This project is created for Beginners only.

Don't want to contribute but have suggestions💕-
You see something which can be improved or have a suggestion. Please do suggest how this website can be improved. I would love to hear from you guys.
Go easy on me guys, this is me first time posting 🙌.

Thank you.