Skip to content

lalalilulu/kottans-frontend

Repository files navigation

Self-Study part of Front-End Course by kottans

Git Basics

  1. The course Version Control with Git finished
    The course gives a clear understanding of version control system, git's basic concepts and provides many exercises to understand the core git's commands.
  2. Levels 'Main: Introduction Sequence' and 'Remote: Push & Pull -- Git Remotes' at learngitbranching.js.org completed
    Great mix of theory and practice for beginners

Linux CLI, and HTTP

  1. The Linux tutorial introduction accomplished
  2. The articles HTTP: The Protocol Every Web Developer Must Know - Part 1 and HTTP: The Protocol Every Web Developer Must Know - Part 2 read
    The screenshots can be found here

Git Collaboration

The course GitHub & Collaboration finished
The Levels 'Main: Ramping Up, Moving Work Around' and 'Remote: To Origin and Beyond' at learngitbranching.js.org completed
The screenshots can be found here
what was new: cherry-pick command
what surprised: additional arguments source:destination for push/fetch/pull commands
what can be used in future: interactive mode for rebase, cherry-pick command

Intro to HTML and CSS

The courses Intro to HTML & CSS, Learn HTML and Learn CSS completed
The screenshots can be found here
what was new: layout with Flexbox, Grid Template
what surprised: relative units - fr, css transitions
what can be used in future: grid, of course :)

Responsive Web Design

The course Responsive Web Design Fundamentals finished
Flexbox Froggy Game accomplished
The screenshots can be found here
what was new: Common responsive patterns, picking breakpoints
what surprised: complex media queries, setting the viewport
what can be used in future: flexbox css properties and relative sizes

HTML & CSS practice: Hooli-style Popup

It was complicated to put together knowledge about HTML, CSS and their features and fit the task without using JS. The task on GitHub Pages: https://lalalilulu.github.io/html-css-popup/
A Code review for the task completed: kottans/frontend-2021-homeworks#146

JS Basics

The course Intro to JS finished
The FreeCodeCamp exercises completed
The screenshots can be found here
Most of the covered topics were not new for me, but a lot of FreeCodeCamp exercises made me feel more confident with JS Syntax. Special thanks for the section with algorithms - it took many hours, but it was incredibly helpful.

DOM

The course JavaScript and the DOM finished
The FreeCodeCamp exercises completed
The screenshots can be found here
A practical task/ interactive side-menu's site on GitHub Pages: https://lalalilulu.github.io/interactive-side-menu/
A Code review for the task completed: kottans/frontend-2021-homeworks#193

JS Pre OOP

Building a Tiny JS World task completed
A practical task on GitHub Pages: https://lalalilulu.github.io/a-tiny-JS-world/
A Code review for the task completed: kottans/frontend-2021-homeworks#200

Object Oriented JS

The course Object-Oriented Java Script finished
7 kyu on the codewars reached - my profile
The screenshots can be found here
what was new: The udacity course covers the basic OOP concepts in JS, the functional version, prototypical classes and pseudoclassical pattern are analyzed in detail
what surprised: Pseudoclassical pattern: the complexity of implementing subclasses
what can be used in future: Modern JavaScript has a new, "nicer" syntax for classes. The new class construct has a convenient syntax for specifying a constructor along with a prototype.

A practical task on GitHub Pages - my frogger game
A Code review for the task completed: kottans/frontend-2021-homeworks#209

OOP Exercise

A Tiny JS World task improved
A practical task on GitHub Pages
A Code review for the task completed: kottans/frontend-2021-homeworks#235

Offline Web Applications (optional)

The course Offline Web Applications finished
The screenshots can be found here
what was new: Offline-first pattern and its benefits, Lie Fi Mode, using a service worker
what surprised: How to simulate offline mode and inspect and debug a service worker with Chrome DevTools, offline caching strategy
what can be used in future: IDB library, offline caching strategy

Memory Pair Game

Memory Pair Game created
A practical task on GitHub Pages published
A Code review for the task completed: kottans/frontend-2021-homeworks#278

Website Performance Optimization (optional)

The courses Website Performance Optimization, Browser Rendering Optimization and Responsive Images finished
The screenshots can be found here
what was new: Recommendations how to measure the web sites performance with Chrome Dev Tools, settings for Android devices, CRP metrics and CRP Diagrams, unblocking CSS, Quantum CSS, memory management in JS, 60 frames pro second
what surprised: the box-shadow effect has the biggest impact on loading time, srcset and sizes image attributes
what can be used in future: defer and async attributes, media queires for css links, optimization strategies, async/await, css-property 'will-change: transform', vmax and vmin css units, Grunt for image compression, inline images to reduce an amount of requests

Friends App

Social friends' search page created
A practical task on GitHub Pages published
A Code review for the task completed: kottans/frontend-2021-homeworks#358

Additional info

➡️ Read course plan in Course Contents

About

Self-Study part of Front-End Course

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published