Hello,
This is my very first article and I want to talk about my project studies except courses. When I am learning HTML, CSS and JavaScript, I started my journey with a Udemy course by Sadık Turan in my native language. After that course, I continued with various courses by Brad Traversy, FreeCodeCamp, Scrimba etc... But if you really want to be a good developer, you have to make a lot of practices besides curriculums. At this article, I want to demonstrate my works.
First, I will write name of project or website and used technologies and after that, I will share YouTube links with you.
When I doing this projects, I did watch and coding same time, first watch-try coding chapter by chapter.
Let's Start!
Techs; HTML, CSS, JavaScript. With CSS, we used simple define variables and grid layout with responsive design.
https://www.youtube.com/watch?v=lvYnfMOUOJY&ab_channel=TraversyMedia
Techs; HTML, CSS
https://www.youtube.com/watch?v=Wm6CUkswsNw&ab_channel=TraversyMedia
Techs; HTML, CSS, Simple JavaScript With CSS, we used grid layout with responsive design.
https://www.youtube.com/watch?v=x_n2FGNsm0o&t=1506s&ab_channel=TraversyMedia
Techs; HTML, CSS/Sass
https://www.youtube.com/watch?v=X1dz0xRbSJc&t=43s&ab_channel=TraversyMedia
Techs; HTML, CSS/Sass, JavaScript
https://www.youtube.com/watch?v=2IjyqauKumE&ab_channel=DevEd
Techs; HTML, CSS/Sass, JavaScript With CSS, we used grid layout, define various variables and work with them.
https://www.youtube.com/watch?v=P7t13SGytRk&t=4646s&ab_channel=TraversyMedia
Techs; HTML, CSS, JavaScript With CSS we used Grid and Flexbox layouts for different sections.
https://www.youtube.com/watch?v=9OVLaEjY-Rc&ab_channel=TraversyMedia
Techs; HTML Very simple contact form and response from server.
https://www.youtube.com/watch?v=r4RQ38EoLds&t=3s
Techs; HTML, CSS, JavaScript
https://www.youtube.com/watch?v=rsd4FNGTRBw&ab_channel=FlorinPop
Techs; HTML, CSS, JavaScript
https://www.youtube.com/watch?v=Rz-rey4Q1bw&ab_channel=FlorinPop
Techs; HTML, CSS/Sass, JavaScript This project could be most detailed Landing Page project in whole web. Simple and very easy, understandable explanation
https://www.youtube.com/watch?v=aoQ6S1a32j8&t=6803s&ab_channel=freeCodeCamp.org
Techs; HTML, CSS, JavaScript With Js, we used window.innerWidth, window.innerHeight methods for give rotate effect when mousemove event. For mouseenter event we define different translateAxis for our elements style transforms and for mouseleave event we reseted our translateAxis
https://www.youtube.com/watch?v=XK7T3mY1V-w&ab_channel=DevEd
Techs; HTML, CSS, JavaScript
- Weather-app - we used fetch, async/await for get data from openweathermap API
- Todo-App - simple to-do App. Practice for else/if conditionals and array methods.
- Recipe App - Another practice for fetch, async/await.
- Quiz App - Else/if conditionals practice.
- Password Generator - We defined our charsets. with functions we create in different order values and after with else/if we check our required sets and push them to xs array we defined if our condition true.
- Notes-app - ternary operator, events and innerHTML property.
- Movie app - Used fetch, async,await. Also we defined a function for rating color.
- github-profiler-app - Used fetch, async,await.
- canvas-app
- countdown-timer - a simple project made with date and Math Object.
https://www.youtube.com/watch?v=dtKciwk_si4&t=23844s&ab_channel=FlorinPop
Techs; HTML, CSS, JavaScript
- Zoom Effect - We made a zoom effect depends to our mousemove.
- Toast Notification
- Sound-board
- Purple Heart Rain
- Popup Modal
- Hamburger Button
- Dark Mod Toggle
- Carousel
- Background Changer
- Auto Write Text
https://www.youtube.com/watch?v=8GPPJpiLqHk&ab_channel=FlorinPop
Techs; HTML, CSS, JavaScript. With this app we used DOMAudio methods.
https://www.youtube.com/watch?v=QTHRWGn_sJw&ab_channel=TraversyMedia
Techs; HTML, CSS/Sass, JavaScript With this app, we used Wikipedia API.
https://www.youtube.com/watch?v=Dk6Wopar10k&t=9s&ab_channel=TraversyMedia
Of course they are not the only practices I did, but these were most important projects for me improve my development skills.
Currently, I am learning ReactJS with Brad Traversy's React Front to Back 2022 course from Udemy.