Scrimba-Front-End-Path

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

Scrimba-Front-End-Path

★ 9 Open GitHub ↗

Scrimba Front-End Developer Path Assignments and Projects

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://scrimba.com/learn/frontend).

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](https://github.com/muhammedogz/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](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-3/Blackjack/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-3/Blackjack) \
    A basic Blackjack game.
- Chrome Extension -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-3/Chrome-Extension/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-3/Chrome-Extension/) \
    An extension for HR. Not has fully functionality in browser. Should be in active extensions.
- Personality in Emojis -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-3/Personality-Emojis/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-3/Personality-Emojis) \
    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](https://github.com/muhammedogz/Scrimba-Responsive-Design) that I completed Responsive Design Course.

- Practice Time -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/CSS-Fundamentals/Practice-Time/) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/CSS-Fundamentals/Practice-Time)
- Compound Practice -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/CSS-Fundamentals/Compound-Practice/) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/CSS-Fundamentals/Compound-Practice)
- Putting It All Together -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/CSS-Fundamentals/Putting-It-All-Together) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/CSS-Fundamentals/Putting-It-All-Together)
  
JavaScript Challenges Part

- Modal -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-4/Modal/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-4/Modal)
- Search Bar -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-4/Search-Bar/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-4/Search-Bar)
- Carousel -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-4/Carousel/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-4/Carousel)
- Dice Game -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-4/Dice-Game/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-4/Dice-Game)
- Snake Game -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-4/Snake-Game/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-4/Snake-Game)

----

### Module 5 - Responsive Design

This module aims to think responsively and adapt responsive design to web projects.\
Also part of the this [repo](https://github.com/muhammedogz/Scrimba-Responsive-Design).

- More Fancy -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/Starting-to-think-responsively/More-Fancy/) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/Starting-to-think-responsively/More-Fancy)
- Living the Simple Life -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/Starting-to-think-responsively/Living-The-Simple-Life/) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/Starting-to-think-responsively/Living-The-Simple-Life)\
    A complete responsive blog site.
- BBQ Splash Page -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/Stepping-up-our-style/BBQ-Splash/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/Stepping-up-our-style/BBQ-Splash)

----

### Module 6 - Next-level JavaScript

This module teaches modern JavaScript patterns. ES6+.

- PacMan Game -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-6/Pacman-Game)\
  Not completed 🥺

----

### Module 7 - Working with APIs

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

- Bored Bot -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-7/BoredBot/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-7/BoredBot)\
    Generate random image and random idea to solve your boringness.\
    Use random dog image API and random idea API.
- BlogSpace -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-7/BlogSpace/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-7/BlogSpace)\
  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](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-7/War-Game/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-7/War-Game)\
  A basic playing card War Game. Use Playing Card API.
- Dashboard Extension -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-7/Dashboard-Extension/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-7/Dashboard-Extension)\
  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](https://github.com/muhammedogz/Scrimba-Responsive-Design).

- Card Component -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/Taking-Flexbox-to-Next-Level/) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/Taking-Flexbox-to-Next-Level)
- Marketing Agency (with Flexbox) -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Responsive-Design/Taking-It-Next-Level/Flexbox/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Responsive-Design/tree/master/Taking-It-Next-Level/Flexbox)\
  Instructor creates this page with CSS Grid but I created this page with Flexbox.

Flexbox challenges with APIs.

- Color Map -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/Color-Map/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/Color-Map)
- Photo Gallery -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/Photo-Gallery/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/Photo-Gallery)
- Online Users -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/Online-Users/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/Online-Users)
- User Profile -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/User-Profile/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/User-Profile)

Grid challenges with APIs.

- Jeopardy (True or False Game) -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/Jeopardy/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/Jeopardy)
- Pokedex -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/Pokedex/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/Pokedex)
- Library -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-8/Library/index.html) -
  [Source Code](https://github.com/muhammedogz/Scrimba-Front-End-Path/tree/master/Module-8/Library)

----

### 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](https://scrimba.com/learn/designbootcamp)

- Simple Layout -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-9/Simple-Layout/index.html) -
  [Source Code](Module-9/Simple-Layout/index.html)
- Responsive Layout -
  [Live Demo](https://muhammedogz.github.io/Scrimba-Front-End-Path/Module-9/Responsive-Layout/index.html) -
  [Source Code](Module-9/Responsive-Layout/index.html)

----

### Module 11 - React Basics

This module teaches react basics.

Scrimba-Front-End-Path

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README