100Days-of-Code-FullStack-Development 🚀💪

I'm publicly committing to the 100DaysOfCode Challenge in FullStack Development.

This repo contains mini project's final code for all sections and projects contained in JavaScript, and ReactJs.

I'll commit on a daily basis and provide weekly updates on the code with detailed explanations. Please keep in mind that all sections and the final code are included in a single folder.

Solo project using reactjs (week - 1) (What is the project?)

It's a bussiness digital card based on Scrimba React course. This is a first solo React project. I built the project based on their Figma file.

This project was bootstrapped with Create React App and have been made using HTML, CSS, JavaScript and Reactjs stacks.

Built with ⚡️

Semantic HTML5 markup
CSS Grid
Mobile-first workflow
React
modules.css - For stylesv

Screenshoot of the project

Problems and Solutions ⚡️

I got hard time to maintain the icon between on cta button. The Email button and LinkedIn button looks similar but it's not. The position between icons and texts are not align. Had try solutions out there yet, none of them work. This project took 3 full day's and I've used google to find a solution and it have helped me to do a lot.

Moreover part thanks, when I first started this challenge and endeavour, I received an excellent guidance from my Jain University professor, Assistant Professor Ashwini Mathur.

Another problem that I faced was icons for the footer. I used png file and it turn out it cannot changed the color. What I have was a black and white icon. When I try to change the color using color or filter in a css it didn't work.

The solution that I made was add some :hover and :focus to icons. So, every button and icons in this projects will change their colors when you hover to them. This is also important for the accessibility. I'm trying to make it inclusive as posibble so everyone can try it.

Lesson Learned 🧐

How icon and text can work together (considering about the accesibillity when people using screen reader.) Learn more about an image file type such as .svg, .png, and others. What are the distinguished between them. How and Why to choose what kind of image type file to use.

So, what's next?

I will commit every day on Github and will provide weekly coding updates on my Linkedin profile with full explanations of the project. I'm working on my second and subsequent solo projects and will post updates here as they're completed.

When did I start my 100-day full-stack development coding challenge? 😍

Monday, January 31, 2022

When is the 100-day full-stack development coding challenge going to end? 😎

Wednesday, May 11, 2022

Author

Gemechu Taye

gemechutaye / 100days-of-code-fullstack-development Goto Github PK