100 days of code and me

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 workhttps://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 workhttps://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 workhttps://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 workhttps://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 workhttps://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 workhttp://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 workhttps://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 workhttps://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 workhttps://drugalya.com, https://codepen.io/OlenaDrugalya/full/VwLXrvo

My final work video on Twitter

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 workhttps://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 workhttps://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);
CSS code in Sublime
Output on the web page

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
CSS code in Sublime
Output on the web page

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!

One thought on “100 days of code and me

  1. 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!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s