Scrimba-Front-End-Path

Scrimba Front-End Developer Path Assignments and Projects

Course Info

This course teaches Front-End development with separate 14 modules.
Course Site.

I will share my code while taking this course.
I mostly do coding before instructors.

First two modules are introduction and basic HTML and CSS.
I finished HTML and CSS modules deeply in this repo. You can check it there.
Scrimba-Responsive-Design

This is why I start with Module 3.

---

Module 3 - Making Websites Interactive

This module teach JavaScript basics.

• Blackjack Game - Live Demo - Source Code
  A basic Blackjack game.
• Chrome Extension - Live Demo - Source Code
  An extension for HR. Not has fully functionality in browser. Should be in active extensions.
• Personality in Emojis - Live Demo - Source Code
  An array training. Add remove elements into end or begin.

---

Module 4 - CSS & JavaScript fundamentals

CSS Challenges Part
This three example taken from my other repo that I completed Responsive Design Course.

• Practice Time - Live Demo - Source Code
• Compound Practice - Live Demo - Source Code
• Putting It All Together - Live Demo - Source Code

JavaScript Challenges Part

• Modal - Live Demo - Source Code
• Search Bar - Live Demo - Source Code
• Carousel - Live Demo - Source Code
• Dice Game - Live Demo - Source Code
• Snake Game - Live Demo - Source Code

---

Module 5 - Responsive Design

This module aims to think responsively and adapt responsive design to web projects.
Also part of the this repo.

• More Fancy - Live Demo - Source Code
• Living the Simple Life - Live Demo - Source Code
  A complete responsive blog site.
• BBQ Splash Page - Live Demo - Source Code

---

Module 6 - Next-level JavaScript

This module teaches modern JavaScript patterns. ES6+.

• PacMan Game - Source Code
  Not completed 🥺

---

Module 7 - Working with APIs

This module teaches APIs with showing different APIs and introduces Asynchronous JavaScript.

• Bored Bot - Live Demo - Source Code
  Generate random image and random idea to solve your boringness.
  Use random dog image API and random idea API.
• BlogSpace - Live Demo - Source Code
  Get some random blog posts from an Blog API.
  Send request to API with adding new blog post and render it.
• War Card Game - Live Demo - Source Code
  A basic playing card War Game. Use Playing Card API.
• Dashboard Extension - Live Demo - Source Code
  A chrome extension that shows current currency, weather and time in every new page opened.
  Use weather api, geolocation api and an open source currency api.

---

Module 8 - Building apps with Flexbox and Grid

This module teaches flexbox and grid. How to adapt those designs to web projects.
Also part of the this repo.

• Card Component - Live Demo - Source Code
• Marketing Agency (with Flexbox) - Live Demo - Source Code
  Instructor creates this page with CSS Grid but I created this page with Flexbox.

Flexbox challenges with APIs.

• Color Map - Live Demo - Source Code
• Photo Gallery - Live Demo - Source Code
• Online Users - Live Demo - Source Code
• User Profile - Live Demo - Source Code

Grid challenges with APIs.

• Jeopardy (True or False Game) - Live Demo - Source Code
• Pokedex - Live Demo - Source Code
• Library - Live Demo - Source Code

---

Module 9 - Learn UI Design

This module teaches UI Design fundamentals and how to apply those with CSS. For better learning and gaining more UI design skills, I completed UI Design Bootcamp that has more modules than the one in front-end path.

UI Design Bootcamp

This module covers those areas of UI Design: White Space

Color

Contrast

Scale

Alignment

Typography

Visual Hierarchy

• Simple Layout - Live Demo - Source Code
• Responsive Layout - Live Demo - Source Code

---

Module 11 - React Basics

This module teaches react basics.