GithubHelp home page GithubHelp logo

vaibhavsingh8 / 100daysofcode Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 39 KB

This repository is made to serve as a tracker of my work which I will be doing in the 100DaysOfCode challenge.

License: MIT License

HTML 51.10% CSS 31.56% JavaScript 17.35%

100daysofcode's Introduction

100DaysOfCode #100DaysOfCodeLW3

This repository is made to serve as a tracker of my work which I will be doing in the 100DaysOfCode challenge.

Starting 9 Jan 2023, I will be coding for 100 days for minimum of 1 hour as apart of this challenge.

Goals:

  1. Get better at CSS and build projects.
  2. Build projects to practice basic JS with HTML and CSS.
  3. Learn React and build projects.

Overall it is all focused on learning Frontend development.

Day 1: Check the tweet here!

  1. Learnt about CSS Box-Model and Flex-box. Resource: MDN Web Docs
  2. Started a CSS challenge by frontend mentor to practice. QR Code Component - Frontend Mentor

Day 2: Check the tweet here!

  1. Learnt about more properties in CSS. Resource: MDN Web Docs
  2. Completed a basic CSS challenge by Frontend mentor to practice.

Day 3: Check the tweet here!

  1. Learnt more about CSS layout from MDN.
  2. Configured GitHub repo for documenting these 100 days and challenges too.
  3. Revised git. Resource: https://youtu.be/apGV9Kg7ics

Day 4: Check the tweet here!

  1. Read few blogs on CSS.
  2. Started 2nd challenge by Frontend Mentor. Pretty much close to complete, hopefully tomorrow it will be done.

Day 5: Check the tweet here!

  1. Completed the nft-preview challenge. Just 1 functionality still couldn't figure out. Update: Finished completely on Day6. Link to the code: https://github.com/VaibhavSinghDev/Frontend-Mentor-Challenges/tree/main/nft-preview-card-component-main
  2. Took a simple CSS assessment on MDN.

Day 6: Check the tweet here!

  1. Didn't do much today.
  2. Just fixed the image hover on the nft card.
  3. Learning more about Flex and Grid.

Day 7: Check the tweet here!

  1. Started developing a simple CSS portfolio to practice CSS.
  2. Read more about The Box Model and Overflowing content on MDN web docs.

Day 8: Check the tweet here!

  1. Moved forward with the portfolio site: --> Added Contacts section. --> Added half of the navigation bar section.

Day 9: Check the tweet here!

  1. Moved forward with the portfolio site: -> Done with the navigation, contact and footer section. -> Made it responsive. -> Left with the projects section. Will hopefully complete it by tomorrow 🤟

Day 10: Check the tweet here!

  1. The portfolio site template is ready:

Tried to make it responsive. Understood more Flex and Grid.

PS: Followed a tutorial for this(about 40%). 🤟

Site live link: https://vaibhavsinghdev.github.io/Portfolio-template-css/

Day 11: Check the tweet here!

  1. Revised basic concepts of JavaScripts.
  2. Moving forward with some simple JS projects.

Day 12: Check the tweet here!

  1. Learnt about DOM manipulation and event listeners.
  2. Started a basic calculator project.

Day 13: Check the tweet here!

  1. Worked on UI of the calculator project.
  2. Working on the JavaScript logic.

Day 14: Check the tweet here!

  1. Completed the calculator project with basic functionality.
  2. Followed a tutorial for this to get started with understanding JS in projects.

Day 15: Check the tweet here!

  1. Started another challenge by Frontend Mentor,
  2. "Interactive Rating Component" to practice my basic JavaScript skills.

Day 16: Check the tweet here!

  1. Done with UI part of the "Interactive-rating-component" challenge by Frontend Mentor.
  2. Moving fwd with implementing required JS.

Day 17: Check the tweet here!

  1. Completed the "Interactive-rating-component" challenge by Frontend Mentor.
  2. Practiced basic DOM Manipulation.

Day 18: Check the tweet here!

  1. Started practicing JavaScript with #javascript30
  2. Working on JS Drumkit.

Day 19: Check the tweet here!

  1. Completed JS Drumkit from #javascript30.
  2. Used 'key' instead of 'keyCode' mentioned in the lecture as 'keyCode' is deprecated.
  3. It is not responsive, will make it. ✌️

Source code: Check here :)

Day 20: Check the tweet here!

  1. Started 'CSS + JS Clock' from #javascript30 .
  2. Couldn't do much, working on UI currently and playing with transform and transition properties.

Day 21: Check the tweet here!

  1. Built a simple 'CSS + JS Clock' from #javascript30.
  2. Need to add some basic if checks.

Source code: Check here :)

Day 22: Check the tweet here!

  1. Learnt about how the JavaScript code gets executed. The working of JavaScript. Learning more about it.

Day 23: Check the tweet here!

  1. Learnt about hoisting in JavaScript.
  2. Continuing with #javascript30

Day 24: Check the tweet here!

  1. Built a small project with #javascript30 .

  2. Learnt how to manipulate CSS variables with JavaScript in that.

  3. Added "Border Radius" to try it.

    It is still just basic but will improve it.

    Source code: Check here :)

Day 25: Check the tweet here!

  1. A late tweet, I wrote a blog on "Understanding How JavaScript Code is Executed: A Behind-the-Scenes Overview" You can read the blog here: https://vaibhavsblog.hashnode.dev/understanding-how-javascript-code-is-executed-a-behind-the-scenes-overview ----------------------------------------------------------------------------------------------------------------------------------------------------------DDay 26: Check the tweet here!

  2. Learnt how functions work in js.

  3. Tried to explore more about the DOM ----------------------------------------------------------------------------------------------------------------------------------------------------------DDay 27: Check the tweet here!

  4. Explored call-back functions, closures etc.

  5. Just watched videos on different topics in JS today. ----------------------------------------------------------------------------------------------------------------------------------------------------------DDay 23: Check the tweet here!

  6. Learnt about hoisting in JavaScript.

  7. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------DDay 23: Check the tweet here!

  8. Learnt about hoisting in JavaScript.

  9. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------DDay 23: Check the tweet here!

  10. Learnt about hoisting in JavaScript.

  11. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------Day 23: Check the tweet here!

  12. Learnt about hoisting in JavaScript.

  13. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------Day 23: Check the tweet here!

  14. Learnt about hoisting in JavaScript.

  15. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------Day 23: Check the tweet here!

  16. Learnt about hoisting in JavaScript.

  17. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------Day 23: Check the tweet here!

  18. Learnt about hoisting in JavaScript.

  19. Continuing with #javascript30 ----------------------------------------------------------------------------------------------------------------------------------------------------------Day 23: Check the tweet here!

  20. Learnt about hoisting in JavaScript.

  21. Continuing with #javascript30

100daysofcode's People

Contributors

vaibhavsingh8 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.