Week 1 of #100DaysOfCode Challenge | Our experience & Projects
Tags: 100daysofcode, challenge, webdev, javascript
Published: 2021-02-25 05:55:17

# We finished the Week 1

Me & my brother [Suraj](https://dev.to/surajsrv11) have just finished Week 1 of the **#100DaysOfCode** challenge and now we are ready and excited to move forward. This week we focused on building a strong foundation by covering up the basics so that we can prepare ourselves for what's coming ahead.

Coming week we are gonna take things to a next level and really get our hands dirty with some advanced topics like DOM & Advanced JS. Can't wait to learn all of it.

Just in case if you're not, please do follow both [Me](https://twitter.com/mindninjaX) & [Suraj](https://twitter.com/surajondev) on Twitter as we are posting about our journeys every day so that we can keep you motivated in your own journeys.

# We have created Projects

While we were learning, we also wanted to apply everything we have learnt. To do that, we have been creating projects every single day and applying what we have learnt on that particular day. We have created a [GitHub Repository](https://github.com/mindninjaX/100DaysOfCode) for that as well. Check out the repo, give it a star and [follow us on GitHub](https://github.com/mindninjaX) so that you can stay updated as we add new projects to the repo.

{% github mindninjaX/100DaysOfCode no-readme %}

# Challenges we faced

Uff! It wasn't easy, to be honest, but we did it. Once we get used to it, hopefully, things will become easier for us. Somedays we were not able to finish the material we initially aimed at so we just had to work on it, the next day and this is how we were able to cover everything!

I won't say it was very difficult, but neither will say that it was easy! All you need is the determination & focus to continue and keep going! Even if you fail a particular day you can easily cover it up on the next day.

# Any advice?

Yes! I believe that one of the reasons I got enough confidence in myself to even take this challenge was probably because I had an amazing study mate like Suraj. Studying with friends makes things easier and you have someone to back you up when you are lagging behind.

**So I highly recommended you to get a study mate, it could be anyone but someone you feel comfortable & encouraged with.**

# Join Us

If you are really passionate about coding and would like to join us on our journey and learn with us then please go ahead and send us a DM on Twitter and we will guide you so that you can start your own **#100DaysOfCode** journey.

# Journal: Week 1

## Day 1

### What I learned?

I learned the following topics :

- How the Internet Works?
- History of Web Development
- HTML

### What I develop?

I created a very basic portfolio using nothing but simple HTML tags. It felt very unprofessional at first, but then as we went through it, everything just became a lot easier and fun.

### **Check out the live website [here](https://100daysofcode-day1.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108106129-8f443180-70b3-11eb-94ac-5bf742db59c9.png](https://user-images.githubusercontent.com/59148052/108106129-8f443180-70b3-11eb-94ac-5bf742db59c9.png)

## Day 2 of 100DaysOfCode

### What I learned?

I learned the following topics :

- CSS Properties
- CSS Selectors
- Box Model
- Difference between px, em & rem

### What I develop?

I created a simple Spotify Dashboard which displays the favourite songs, playlists & podcast using HTML & CSS. It was a bit challenging again but at the same time, we had a lot of fun building it.

### **Check out the live website [here](https://100daysofcode-day2.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108236486-f8d44680-716c-11eb-9820-d5351439421b.png](https://user-images.githubusercontent.com/59148052/108236486-f8d44680-716c-11eb-9820-d5351439421b.png)

## Day 3

### What I learned?

I learned the following topics :

- Building Responsive Websites
- CSS Flexbox
- CSS Transition & Transform Property

### What I develop?

I created a simple Meme Gallery website that is completely responsive and has a CSS Transition effect whenever we hover on any image.

### **Check out the live website [here](https://100daysofcode-day3.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108395682-0dcbdb00-723c-11eb-8b97-1085dfb734be.png](https://user-images.githubusercontent.com/59148052/108395682-0dcbdb00-723c-11eb-8b97-1085dfb734be.png)

## Day 4

### What I learned?

I learned the following topics :

- Introduction to Bootstrap
- How to use website templates
- Mailchimp Implementation
- Deploying on GitHub Pages

### What I develop?

I created a simple Adventure Blog using Bootstrap & some CSS with Flexbox. I personally think that Bootstrap is a great tool but I enjoyed making websites more with HTML & CSS. I am only gonna use it occasionally.

### **Check out the live website [here](https://100daysofcode-day4.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108628260-e5ccb980-747f-11eb-8225-d0c7aa7d424e.png](https://user-images.githubusercontent.com/59148052/108628260-e5ccb980-747f-11eb-8225-d0c7aa7d424e.png)

## Day 5

### What I learned?

I learned the following topics :

- CSS Grid
- CSS Layout

### What I develop?

I created a simple Emoji Grid using CSS Grid & Layout.

### **Check out the live website [here](https://100daysofcode-day5.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108755555-6d442680-756d-11eb-9fa3-68e10c43a53a.png](https://user-images.githubusercontent.com/59148052/108755555-6d442680-756d-11eb-9fa3-68e10c43a53a.png)

## Day 6

### What I learned?

I learned the following topics :

- Developer Fundamentals
- Basics of JavaScript

### What I develop?

I created a Temperature converter app that can convert any temperature into Fahrenheit & Celsius. I used HTML, CSS & JS to make this project. It was really fun to build.

### **Check out the live website [here](https://100daysofcode-day6.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108754468-f9554e80-756b-11eb-9b92-d38d529c79ab.png](https://user-images.githubusercontent.com/59148052/108754468-f9554e80-756b-11eb-9b92-d38d529c79ab.png)

## Day 7

### What I learned?

I learned the following topics :

- More JavaScript

### What I develop?

I have built a random quote generator that will generate a predefined quote on every button click. I have used JavaScript Objects for creating the quote database & used CSS Flexbox for UI.

### **Check out the live website [here](https://100daysofcode-day7.netlify.app/)**

---

![https://user-images.githubusercontent.com/59148052/108812068-72888c00-75d4-11eb-9f2f-511e266d4e9f.png](https://user-images.githubusercontent.com/59148052/108812068-72888c00-75d4-11eb-9f2f-511e266d4e9f.png)

# Last Note

**So make sure to come back next week for the Week 2 Post! Once again make sure to follow [Me](https://twitter.com/mindninjaX) & [Suraj](https://twitter.com/surajondev) on our socials to stay updated on our journey.**