Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wojciechstaszewski4/intermediatefrontendbootcamp

A 15-day intensive bootcamp focused on mastering intermediate frontend development skills. This repository contains all the projects and exercises completed during the course, covering topics like HTML, CSS, JavaScript, and responsive design. Perfect for tracking progress and showcasing my work!
https://github.com/wojciechstaszewski4/intermediatefrontendbootcamp

bootcamp course css-animations css3 exercises flexbox-and-grid frontend html5 intermediate javascript jquery practice projects responsive-design saas scss

Last synced: about 11 hours ago
JSON representation

Host: GitHub
URL: https://github.com/wojciechstaszewski4/intermediatefrontendbootcamp
Owner: wojciechstaszewski4
Created: 2024-11-21T12:37:41.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2025-01-05T23:18:06.000Z (13 days ago)
Last Synced: 2025-01-06T00:25:59.154Z (13 days ago)
Topics: bootcamp, course, css-animations, css3, exercises, flexbox-and-grid, frontend, html5, intermediate, javascript, jquery, practice, projects, responsive-design, saas, scss
Language: CSS
Homepage:
Size: 3.95 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 🌟 Intermediate Frontend Bootcamp

Welcome to the **Intermediate Frontend Bootcamp** – a 15-day intensive course designed to take your frontend development skills to the next level! This repository contains all the projects, tasks, and resources needed to master **HTML**, **CSS**, **JavaScript**, **jQuery**, **Flexbox**, **CSS Grid**, **animations**, **Sass**, and responsive design.

---

## 🚀 Key Highlights

- **15 days of structured learning**: Combines theory and practical projects.
- **Over 120 tasks and projects**: Including animations, responsive layouts, and JavaScript interactivity.
- **Modern web development focus**: Learn essential tools and techniques to create interactive, responsive websites.

---

## 📅 Daily Breakdown

### Day 1: CSS Refresher Part 1
- Review CSS concepts: selectors, pseudo-classes, units, box model.

### Day 2: CSS Refresher Part 2
- Explore advanced CSS concepts: backgrounds, positioning, display, and variables.

### Day 3: Positioning and Layout Challenges
- Practice inline-block, float, and absolute positioning.

### Day 4: CSS Transitions and Transformations
- Add interactive animations with transitions and transformations.

### Day 5: CSS Animations and jQuery Introduction
- Work with keyframes and start using jQuery.

### Day 6: CSS Animation Projects
- Build animated buttons, shaking effects, and other interactive elements.

### Day 7: Flexbox Introduction
- Learn Flexbox principles and create responsive layouts.

### Day 8: Responsive Design with Flexbox and Grid
- Build layouts that adapt to screen sizes using Flexbox and CSS Grid.

### Day 9: JavaScript Basics
- Cover JavaScript essentials like variables, event handling, and debugging.

### Day 10: JavaScript in Action
- Develop interactive projects, such as buttons with dynamic styles.

### Day 11: jQuery in Practice
- Manipulate the DOM and add animations with jQuery.

### Day 12: Hamburger Menu Variations
- Create multiple hamburger menu styles using HTML, CSS, JavaScript, and jQuery.

### Day 13: Pop-Ups and Scroll Animations
- Build modals, scrolling effects, and progress bars.

### Day 14: Sliders and Galleries
- Create responsive sliders and galleries with CSS, JavaScript, and jQuery.

### Day 15: Introduction to Sass
- Learn to write modular, maintainable stylesheets with Sass.

---

## 💡 Example Projects

- Sticky navigation bars and responsive headers.
- Interactive buttons with hover effects and animations.
- Image sliders and responsive galleries.
- Flexbox-based calculator layouts.
- Hamburger menus with animations and scroll indicators.