/my-front-end-path

Primary LanguageHTML

My Frontend Path

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!

1 - Agency Website - Brad Traversy

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

2 - Responsive Website - Brad Traversy Acme Web Design

Techs; HTML, CSS

https://www.youtube.com/watch?v=Wm6CUkswsNw&ab_channel=TraversyMedia

3 - Starbucks Webpage - Brad Traversy

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

4 - Landing Page - Kevin Powell

Techs; HTML, CSS/Sass

https://www.youtube.com/watch?v=X1dz0xRbSJc&t=43s&ab_channel=TraversyMedia

5 - One Color UI - DevEd (Leica Project)

Techs; HTML, CSS/Sass, JavaScript

https://www.youtube.com/watch?v=2IjyqauKumE&ab_channel=DevEd

6 - Netflix Clone - Brad Traversy

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

7 - Hulu Clone

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

8 - Contact Form - Ania Kubow

Techs; HTML Very simple contact form and response from server.

https://www.youtube.com/watch?v=r4RQ38EoLds&t=3s

9 - JS Client-Side Form Validation

Techs; HTML, CSS, JavaScript

https://www.youtube.com/watch?v=rsd4FNGTRBw&ab_channel=FlorinPop

10 - 10 Website Projects in 10 Hours - Florin Pop

Techs; HTML, CSS, JavaScript

https://www.youtube.com/watch?v=Rz-rey4Q1bw&ab_channel=FlorinPop

11 - Landing Page - Jessica Chan (FreeCodeCamp)

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

12 – 3D Animation - Dev Ed

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

13 – 10 JavaScript Projects in 10 Hours - Florin Pop

Techs; HTML, CSS, JavaScript

  1. Weather-app - we used fetch, async/await for get data from openweathermap API
  2. Todo-App - simple to-do App. Practice for else/if conditionals and array methods.
  3. Recipe App - Another practice for fetch, async/await.
  4. Quiz App - Else/if conditionals practice.
  5. 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.
  6. Notes-app - ternary operator, events and innerHTML property.
  7. Movie app - Used fetch, async,await. Also we defined a function for rating color.
  8. github-profiler-app - Used fetch, async,await.
  9. canvas-app
  10. countdown-timer - a simple project made with date and Math Object.

https://www.youtube.com/watch?v=dtKciwk_si4&t=23844s&ab_channel=FlorinPop

14 – 10 JavaScript Projects in 1 Hour - Florin Pop

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

15 - Music Player App-Brad Traversy

Techs; HTML, CSS, JavaScript. With this app we used DOMAudio methods.

https://www.youtube.com/watch?v=QTHRWGn_sJw&ab_channel=TraversyMedia

16 - Search App

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.