In 2016 Alexander Kallaway created a 100daysOfCode challenge to help him to achieve his goal as a software developer. Since then thousands of developers have undertaking the challenge and it even has become a trend in social media.
The purpose of the challenge is simple – to build a strong and consistent coding habit. Thats why the challenge follows one simple rule – you need to code for at least 1 hour each day for the next 100 days. There is a guideline and set of rules you need to follow during the challenge and they are mostly to keep you focused on your goal. And I am going to try it 🙂
Here are my goals for this challenge:
- to get more practice and learn new things
- to improve my discipline and set myself up for success
- to build coding habit
- to create a strong portfolio
Each day I am going to make changes to this blog with a progress I made. I will post links to my projects on CodePen or Github and i would really appreciate your feedback about what can be improved or done in another way, what looks good and what looks bad. Good luck to me! 🙂
html and css
day 1 – feb 27 2020
Today I decided to finishing Tribute page for freeCodeCamp assignment
Today’s Progress: Finished CSS for Tribute page and sent assignment for review
Thoughts: I´m really getting better with HTML and CSS the more i practice, this assigment went smooth and easy.
Link to work: https://codepen.io/OlenaDrugalya/pen/xxGxXWW
DAY 2 – FEB 28 2020
Today I started to work on Survey Form for freeCodeCamp assignment
Today’s Progress: Wrote HTML for the form including different types of inputs (text, email, number) and dropdown selector.
Link to work: https://codepen.io/OlenaDrugalya/pen/LYVyrWy
Day 3 – feb 29 2020
Today I continued to work on Survey Form for FCC assignment
Today’s Progress: I’ve finished selectors with dropdown options and radio button group. Left checkboxes for tomorrow 🙂
Link to work: https://codepen.io/OlenaDrugalya/pen/LYVyrWy
day 4 – march 2 2020
Continue to work on Survey Form for FCC assigment
Today’s Progress: Finished writing HTML for the page – completed checkboxes and teaxtarea elements, created Submit button.
Thoughts: Had difficulty to understand Value attribute for radio buttons and checkboxes, still not sure how often and where it is used? In which cases you really need to change the Value attribute as it is never seen by the client side? Probably this understanding will come later with practice 🙂
Link to work: https://codepen.io/OlenaDrugalya/pen/LYVyrWy
day 5-6 – march 4 2020
Continue to work on Survey Form for FCC assignment
Today’s Progress: Added Bootsrap to HTML, started to work on CSS
Thoughts: Re-wrote some of HTML to make it responsive and started to write CSS – looks like a lot of work ahead 🙂
Link(s) to work: https://codepen.io/OlenaDrugalya/full/LYVyrWy
Day 7: March 5, 2020
Continue to work on Survey Form for FCC assigment
Today’s Progress: Added Bootsrap to HTML
Thoughts: Re-wrote whole HTML and form now uses Form class from Bootstrap – groups, controls etc. Survey form looks now much more prettier and I learned how to make forms with Bootstrap!
Link to work: https://codepen.io/OlenaDrugalya/full/LYVyrWy
Day 8 and 9: March 7, 2020
Finished Survey Form for FCC assigment
Today’s Progress: Finished CSS – yay!
Thoughts: Wrote CSS for the form and job is official done! So happy and its time to reward myself 😉
Link to work: https://codepen.io/OlenaDrugalya/full/LYVyrWy
Day 10: March 8, 2020
Started Product Landing page for freeCodeCamp assigment
Today’s Progress: Finished half of HTML for the page
Thoughts: Started to write HTML for page – finished header, form and 2 sections with features and video.
Link to work: https://codepen.io/OlenaDrugalya/full/wvaPRZM
Day 11: March 9, 2020
Product Landing page for freeCodeCamp assigment
Today’s Progress: Finished whole HTML for the page and started CSS
Thoughts: Finished HTML for all sections and footer, started to write CSS for global classes and elements. Had difficulty with Flexbox understanding, guess it comes with practice.
Link to work: https://codepen.io/OlenaDrugalya/full/wvaPRZM
Day 12: March 10, 2020
Product Landing page for freeCodeCamp assigment
Today’s Progress: Continue to work under CSS
Thoughts: Watched a video about CSS Flexbox display with @learnwebcode, finished CSS for header and form, started features section. Looks prettier now 🙂
Link to work: https://codepen.io/OlenaDrugalya/full/wvaPRZM
Day 13: March 11, 2020
Product Landing page for freeCodeCamp assigment
Today’s Progress: Project finished
Thoughts: Finished CSS for the page and understood how it is easy with Flexbox to style elements!
Link to work: https://codepen.io/OlenaDrugalya/full/wvaPRZM
Day 14: March 12, 2020
Blog page for yan drugalya
Today’s Progress: Worked under blog page for my husband, so now almost finished new look 🙂 really was difficult to find time to code because of the quarantine in Denmark 😦
Link to work: http://drugalya.com
Day 15: March 13, 2020
Technical Product Page for freeCodeCamp assignment
Today’s Progress: Started HTML for the page
Thoughts: Almost half of the main page is done, boring stuff 🙂 Cannot wait to have fun with CSS!
Link to work: https://codepen.io/OlenaDrugalya/full/VwLXrvo
Day 16,17 AND 18: March 16, 2020
WordPress blog page
Today’s Progress: For the last 3 days I was working on the blog page for Yan Drugalya. I did code everyday between taking care of kids and housework because of the carantene 🙂 The page is pretty much done
Link to work: https://drugalya.com
Day 19: March 17, 2020
WordPress blog page
Today’s Progress: Finished sections Talks and Blogs and made new Contact page. Officially done! This day was pretty much productive – i also finished Technical Product page for freeCodeCamp assignment – yes!
Links to work: https://drugalya.com, https://codepen.io/OlenaDrugalya/full/VwLXrvo
Day 20: March 18, 2020
Personal Portfolio page for freeCodeCamp
Today’s Progress: Started the 5th and the last project for Responsive Web Design certification – Personal Portfolio page. Finished HTML today – it does look not fancy for now 🙂
Link to work: https://codepen.io/OlenaDrugalya/full/rNVKprE
Day 21: March 19, 2020
Personal Portfolio page for freeCodeCamp
Today’s Progress: Finished all CSS today – this time project took me only 2 days 🙂 Finally I not scared of FlexBox anymore!
Link to work: https://codepen.io/OlenaDrugalya/full/rNVKprE
Also I have received certificate from freeCodeCamp for finishing a course on Responsive Web Design – such a productive day!
introduction to react
React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with rendering data to the DOM, and so creating React applications usually requires the use of additional libraries for state management and routing.
So my next coding experience would cover this topic.
Day 22: March 20, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Started a course about React at udemy.com, made first application using React
Link to work: https://codepen.io/OlenaDrugalya/pen/xxGJYQq
Day 23-24: March 22, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Week-ends are alwasy tought for study 😦 But I started 2nd module of the React course about the Next Generation JavaScript. I should say I was impressed about arrow functions sintax – its very unusual to see it shortened so much! Not sure I could get used to that??
Day 25: March 23, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Finished 3rd module of the course – refreshed JavaScript knowledge and learned new things like Spread and Rest operators and destructuring. Did some coding practice on https://jsbin.com/
Day 26: March 24, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Started a module about creating React project. Did some installing of npm package manager and Create React App tool. At the end of installation you get ready-to-use React application 🙂
Day 27: March 25, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Continued to watch Udemy tutorial and learned about JSX, how to create a functional component, work and re-use it, how to output dynamic content and how to work with props. That was a lot of new info to today 🙂
Day 28: March 26, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Continued to watch Udemy tutorial and learned about state and its usage, about methods for handling events and how methods can manipulate the state. Decided to re-fresh JavaScript a bit….may be go for another freeCode Camp certificate.
Day 29: March 27, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Continued to watch Udemy tutorial and learned about using the useState() Hook for state manipulation.
With using hooks you dont need to create class components, but create component as const arrow function. Also learned about statefull and stateless components.
Day 30: March 28, 2020
JavaScript
Today’s Progress: Today I spent time to refresh JavaScript before I dig deep into React. Also finished challenge for FrontendMentor in between.
Day 31-31: March 30, 2020
JavaScript
Today’s Progress: These past 2 days I was studing JavaScript on Freecodecamp for JavaScript certification. I was able to finish with basic JavaScript and ES6 part so far.
Day 32: March 31, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Continued to watch Udemy tutorial and learned about passing method reference between components, 2-way binding and ways of adding styles into JavaScript files. Now its time to practice with that!
Day 33: April 1, 2020
React – The Complete Guide (incl Hooks, React Router, Redux)
Today’s Progress: Worked under assigment given in Udemy course and successfully finished it 🙂 And its NOT a joke on Aprils Fool Day! Below is the code and actually what is on the page
Day 34: April 2, 2020
React and JavaScript
Today’s Progress: Was learning about regular expressions in JavaScript. Started a new module in Udemy React course – Working with Lists and Conditionals. Learned about rendering content conditionally by using ternary operator or simply using IF statement before returning value. This blows my mind:
Day 35: April 3, 2020
React and JavaScript
Today’s Progress: Continued with regular expressions in JavaScript. In React – learned about outputting lists, updating lists, removing items from list by using state and how to update state without mutation.
Day 36-37: April 4-5, 2020
Frontend Mentor challenge
Today’s Progress: Weekends without JavaScript 🙂 I spent them coding FrontendMentor challenge – Coming Soon page. I did desktop version so far, mobile version on the way.
Day 38: April 6, 2020
JavaScript, React
Today’s Progress: Today I went through debugging part of JavaScript tutorial and started Basic Data Structure – and first was good old array 🙂 As for React, iI dug deeper into Lists and how to make them flexible with index (if you want to delete item) and key property while rendering list. Next is to finish an assignment.
Day 39: April 7, 2020
JavaScript
Today’s Progress: Today I went through Array data structure JavaScript tutorial and refreshed some methods which mutate array – shift, unshift, pop, push. Did a quick easy webpage to store the knowledge about Data Structures. To be continued…
Day 40: April 8, 2020
JavaScript, React
Today’s Progress: Today I went through Array data structure JavaScript tutorial and refreshed such methods as Splice(), Slice() and Spread Operator. Also started an assignment from react Udemy course – practice to render list. Did a half of it so far.
Day 41-42: April 9-10, 2020
JavaScript, React
Today’s Progress: I finished 2nd assignment in Udemy course about React. Also I started to watch React Crash course by TraversyMedia because I feel like its not quite getting to me yet 😦 I have theory but when it comes to practice, I feel stuck…
Day 43: April 11, 2020
React
Today’s Progress: Today I continued to watch React Crash course by TraversyMedia and created different components. To manipulate State in functional component for example I used useState hook to be able to use setState function.
Day 44: April 12, 2020
React
Today’s Progress: Today I continued to watch React Crash course by TraversyMedia and continued the project. Spent most of the day outside though as the weather is awesome and we all need some rest on holidays at least :)))
Day 45: April 13, 2020
React
Today’s Progress: Today I finished to watch React Crash course by TraversyMedia and finished the project. I didn’t watch Redux part though cause I don’t think its time yet. Started new course at Pluralsight
Day 46: April 14, 2020
Product Landing Page
Today’s Progress: Got an idea of web shop so I spent my time writing html and working under page layout.
Day 47: April 15, 2020
Product Landing Page
Today’s Progress: Was working under web shop and was improving my skills with FlexBox and positioning, started making products gallery, it was a productive day 🙂
Day 48: April 16, 2020
Product Landing Page, React
Today’s Progress: Tried some cool CSS effects on web shop page Im creating currently 🙂 Did gallery with images which resize and rotate oh hover. Continued to watch React tutorial at Pluralsight
Day 49: April 17, 2020
JavaScript, React
Today’s Progress: Continued to watch React course at Pluralsight. Continued to refresh knowledge about Object data structure in JavaScript and worked under web page.
Day 50: April 18, 2020
React
Today’s Progress: Continued to watch React course at Pluralsight and was working with data by making a small app. But the most exciting is that today is 50 DAYS out of 100! that I am coding for at least 1 hour!!!!! YAY me – halfway through 🙂
Day 51: April 19, 2020
React
Today’s Progress: Continued to watch React course at Pluralsight and understood better now how to take input from the user and interact with it. Also I learned how to work with Ajax calls. This React course is the best in explanation so far 🙂
Day 52: April 20, 2020
React
Today’s Progress: Today I started to build Star Match Game from react course at Pluralsight. First I wrote static markup in JSX and logic in JavaScript (all functions for the game). Then I had to extract reusable components from that. So instead of one main component I ended up with 3 components. After that I worked with view functions – to reflect state on the UI. Such an exercise is truly teaches you a lot! https://codesandbox.io/s/the-star-match-game-ezl6d?file=/src/StarMatch.js
Day 53: April 21, 2020
React
Today’s Progress: Continued to build Star Match Game from react course at Pluralsight. I worked with behaviour functions which behaves differently depending on which number used clicked and changed state accordingly. After that I worked under Game Over implementation – after game is over, player clicks on the button and state re-sets. https://codesandbox.io/s/the-star-match-game-ezl6d?file=/src/StarMatch.js
Day 54: April 22, 2020
React
Today’s Progress: Continued to build Star Match Game from react course at Pluralsight. I learned about using side-effects hooks such as useEffect() – it helped to interact with the timer in the game. And also I learned about un-mounting and re-mounting components using KEY property of the component.
Day 55: April 23, 2020
React
Today’s Progress: Continued to build Star Match Game from react course at Pluralsight. I learned how to create customs hook to include all state interactions and computations and then used that hook in main game component. The game component became smaller and more neat. All what game component do is extracting data from custom hook.
Day 56: April 24, 2020
React
Today’s Progress: Today I watched the last video from PluralSight react course and it was about setting up environment for React project. Next I’m going to learn about styles components
Day 57: April 25, 2020
React, JavaScript
Today’s Progress: today I was going through Object Oriented and Functional programming on #freeCodeCamp and I also started a project where I need to render a data tree with React components
Day 58-59: April 26-27, 2020
React
Today’s Progress: Over the past 2 days I was working under data tree implementation using React. Not an easy task for the beginner, but I slowly getting there 🙂 Also I learned about Prop Types in React
Day 60: April 28, 2020
React
Today’s Progress: today I was really struggling with data tree 😦 I have got a component Tree which renders TreeNode. So Tree shows parent nodes from data, but refuse to show children nodes 😦 and I cannot really figure out how to implement that…..makes me sad
Day 61: April 29, 2020
React
Today’s Progress: Today I continued to work under implementation of data tree with React. With the help of @MrDarrenV I fixed few issues and now my tree renders both parent and children 🙂 – happy dance – styling for tomorrow!
Day 62: April 30, 2020
React
Today’s Progress: Today I watched video tutorial on PluralSight about building quiz with React components. It had different approach of adding props. Instead of adding all props to the component (f.ex const Author =(props)=>{}), the guy added specified props (f.ex const Author =({title, books})=>{})….to me passing just props is more convenient Example here: https://codesandbox.io/s/authorquiz-z39pz?file=/src/AuthorQuiz.js
Day 63: May 1, 2020
React
Today’s Progress: Today I created a small online game – Author Quiz using React to practice the knowledge I already have. Link to project here: https://codesandbox.io/s/authorquiz-z39pz?file=/src/AuthorQuiz.js
Day 64: May 2, 2020
React
Today’s Progress: Today I learned about styling React components. I learned how to set styles and classes dynamically. I was introduced to Radium and learned hot to use pseudo-classes and media-queries with Radium.
Day 65: May 3, 2020
React
Today’s Progress: Today I learned about styled components in React. In order to use them, you need to import styled-components library first, then you create a component with CSS styles in it and use that component in your main app file like this:
Day 66: May 4, 2020
JavaScript, React
Today’s Progress: Today I finished Functional Programming section in JavaScript on freeCodeCamp and started Intermediate Algorithm Scripting challenges. I continued to work under data tree in React, implemented tree with parents and children and added some styling to it.
Day 67: May 5, 2020
JavaScript, React
Today’s Progress: Today I finished a couple of Intermediate Algorithm Scripting challenges on freeCodeCamp. Also I learned about Forms in React – how to create, how to allow user input, how to validate. But before I will implement Form for Author Quiz, I added routing first.
Day 68: May 6, 2020
React
Today’s Progress: Today I was working under data tree project, mainly with styling. I added:
- caret class to the parent and implemented change of classes dynamically
- if parent has children, caret is pointing to the right
- if parent is open, caret is pointing down
- started implementation of showing JSON object when you click on tree node
Day 69: May 7, 2020
React
Today’s Progress: Today I learned how to create Form in React. I have added a simple form to the Author Quiz game and I learned:
- how to bind value of the input to component state
- how to handle onChange and onSubmit events
Day 70: May 9, 2020
React
Today’s Progress: Today I was working under data tree project. I learned how to pass data from one child component to another child component using parent as intermediate 🙂 I was really surprised I could implement that correct from first try.
Day 71-72: May 10-11, 2020
React
Today’s Progress: Continued to work under data tree project. Added some light styling, added some reusable components which Im planning to use in the future components – you can see them on the right side of page – its Path, Arguments, Errors and Artefacts. Now it is super easy to combine them and form new component to display a tree node.
Day 73: May 12 , 2020
JavaScript
Today’s Progress: Today I read about React props but was not coding anything. I was chilling with Java Script algorithms instead…..well, I would not call that real “chilling” as sometimes challenges were pretty difficult. Working my way to JS certificate on freeCodeCamp
Day 74: May 13 , 2020
JavaScript, React
Today’s Progress: Continued today solving Java Script algorithms and scripting challenges on freeCodeCamp. Started learning CSS modules in React.
Day 75: May 14 , 2020
JavaScript
Today’s Progress: Continued today solving Java Script algorithms and scripting challenges on freeCodeCamp. That took most of my time today.
Day 76-77: May 15-16, 2020
CSS, HTML
Today’s Progress: These 2 days I was working under FrontendMentor challenge. I realised I never used CSS Grid , so I spent some time reading material and than trying to implement it.
Day 78: May 17, 2020
CSS
Today’s Progress: Today i continued working with CSS Grid, I watched few episodes on Grid from WesBos and:
1/ I installed and felt in love with Emmet for Sublime
2/I understood basic concept of CSS Grid
Day 79: May 18, 2020
CSS
Today’s Progress: Today i continued working with CSS Grid, i learned so far:
- grid-auto-rows/columns – defines implicitly what size should be any extra added rows/columns
- grid-auto-flow – defines if new items should be placed as columns or as rows
- fractional units (fr) – grid-template-columns: 1fr – it defines how much free space the column would take
- repeat() – its repeats what size we want and how many times (grid-template-columns: repeat(4, 1fr);
Day 80: May 19, 2020
CSS
Today’s Progress: Today i continued working with CSS Grid, i learned so far:
- auto-fill prop – fills the items into grid implicitly
- minmax() – accepts min parameter and max parameter and creates area within given params
- grid-template-areas – you name specific parts of the grid depending on it’s content
Day 81: May 20, 2020
CSS
Today’s Progress: Today i continued working with CSS Grid, i have created Albums Gallery using nested grids and started to work under CodePen clone.
Day 82-83: May 21-22, 2020
CSS
Today’s Progress: These past 2 days I was working under CodePen clone and here is what I ended up with 🙂
Day 84: May 23, 2020
JavaScript
Today’s Progress: Was working hard under JavaScript certification from #freeCodeCamp and finally got it ! It was not easy and I spent lots of time learning and solving challenges.
Day 85: May 25, 2020
React
Today’s Progress: Today was not really code-related. I was learning some React and mainly checking LinkedIn job offers. Decided to do it on the daily basis to at least know the demand…not that much offers at my place though.
Day 86: May 26, 2020
React
Today’s Progress: I got back to my data tree project and today I learned how to render object to DOM with key-value pair:
Day 87: May 27, 2020
React
Today’s Progress: Continue work under Test report project. Was working mainly with rendering classes dynamically and changing style accordingly. Made panel with filter and search areas.
Day 88: May 28, 2020
React
Today’s Progress: Continue work under Test report project. Re-did Test Status filter section and now its checkbox instead of buttons. Background colour is being changed now dynamically according to test status – if test is failed, background turns to red, otherwise green. Looks much better now 🙂
Day 89: May 29, 2020
CSS
Today’s Progress: Today I was chilling with CSS Grid. I started a webpage for Taco restaurant. It’s not finished yet, but what I already did is fully responsive and I was using only Grid (well, one time i used FlexBox). No Bootstrap in that. Pretty amazing stuff.
Day 90: May 31, 2020
CSS
Today’s Progress: Finished Taco web site using CSS Grid only. Added media-queries to change the grid layout according to web page size. Added some javascript to create hamburger menu and expand it on button click. Learned a lot of new stuff. Here is the link to the project.
Day 91-92-93: May 1-2-3, 2020
CSS
Today’s Progress: Was working under #FrontendMentor challenge these weekends and was practicing CSS Grid mostly. Ended up with a quite nice page. Took me 3 days to complete desktop + mobile version. Here is link to project.
Day 94: May 4, 2020
CSS
Today’s Progress: Finished last project on practicing CSS Grid – blog page. No FlexBox used. Now I can cross out CSS Grid from my to-do list and continue with React project tomorrow. Here is link to blog page
Day 95: May 6, 2020
React
Today’s Progress: Continued to work under Test Report project.Added additional dynamic styling and few more reusable components.It’s nice to do what you like again.
Day 96: May 7, 2020
React
Today’s Progress: Continued with Test Report. Was mainly refactoring existing code – took almost more than a half of my time 😦 was reading about how to use Monentum.js because I need to show Test duration in appropriate format.
Day 97: May 8, 2020
React
Today’s Progress: Continued with Test Report. Added more reusable components to be able to compose complex components. Created Test Suite component in like 5 min because all what I did was adding existing small components to it.I love it 🙂
Day 98: May 10, 2020
React
Today’s Progress: Continued with Test Report. Finished rendering duration for each component. Learned how to shorten path links and rendered those as well. Finished styling of smaller components. Now project started to look like something decent.
Day 99: May 11, 2020
React
Today’s Progress: Continued with Test Report. Not much coding for today, was fixing minor issues. Learned how to pass props from child to child using parent as intermediate – some crazy stuff Face with tears of joy still overwhelmed with that….but I’m liking React more each day!
Day 100: May 12, 2020
–END OF 100DAYS– I have made it and survived and got much better in coding than I was before. I accomplished:
- Responsive Web Design certificate (+ 5 diff web pages)
- JavaScript Algorithms and Data Structure certification (+ 20 challenges solved)
- WordPress personal portfolio site
- FrontEnd Mentor challenges – 3 websites on GitHub
- CSS – FlexBox and Grid (+ 4websites to practice)
- React basics (+ 7 small finished react web-apps)
Plus tons of new connections and followers and really nice people 🙂
Looking forward to Round 2!
You’re so interesting! I do not believe I have read through something like this before.
So great to discover another person with
some original thoughts on this issue. Seriously.. many thanks for starting this up.
This web site is something that is required on the web, someone with some originality!
LikeLike