Giter VIP home page Giter VIP logo

kottans-frontend's Introduction

STAGE 0

General

0. Git Basics

I have never dealt with Git/Github before, the initial commands are quite understandable, but the juggling of commits and work with remote repositories are more complicated and require more time to understand, but I hope that with practice, my skills will become better.

In practice, everything turned out to be three times more complicated, especially when you solve conflicts through your irreverence, which as a result generates new conflicts, so it was a good lesson for me to recheck everything twice. Despite all the difficulties, I enjoyed working with Git and Github. ๐Ÿ™‚

Screenshots:

screenshot screenshot screenshot screenshot

1. Linux CLI, and HTTP

Linux Survival (4 modules):

In general, I was already familiar with the commands that were shown in the first 2 modules, but I did not use them often enough, so it was useful to practice them again. The commands, which were demonstrated in module 3/4 were new to me and and require more practice to use them comfortably.

I liked the visualization that was demonstrated in this resource, which allows you to better understand the result of each command. In the future, it will be useful to check it out again and refresh my knowledge.

HTTP: The Protocol Every Web Developer Must Know (Part 1,2):

A lot of new and already known to me theoretical material, which is unlikely to be 100% remains in your memory after reading, for better understanding I watched the additional videos and noted the main aspects. If it will be necessary in the future I will repeatedly return to the educational material and my notes as well.

Screenshots:

screenshot screenshot) screenshot) screenshot)

2. Git Collaboration

3/4 week was super informative, I have learned a lot of useful things. The "git rebase -i" very surprised me, it's really useful command, which allows you to do many things with the commits. In the future, I will repeatedly return to the educational material and my notes as well.

Screenshots:

screenshot screenshot screenshot screenshot

Front-End Basics

3. Intro to HTML & CSS

I was already familiar with the 90% material that was presented, but the first time I have met with the Bootstrap Library. All in all, it was a perfect material to refresh my knowledge and learn some new stuff.

Screenshots:

screenshot screenshot screenshot

4. Responsive Web Design

Previously, I was already familiar with Flexbox/Grid thanks to this YouTube channel, I like his clear explanation with practical examples, by the way, I often use his Flexbox/Grid cheat sheets. It was helpful for me to review this material again. Also on his channel, there is a good explanation about responsive web design.

Very cool games, they are a great addition to learning the Flexbox/Grid. I happily would return to them to refresh my knowledge.

Screenshots:

screenshot screenshot

5. HTML & CSS - Practice

At first glance, it seems to be a very simple task, but when you start to do it, you will realize that it is not. I didn't pay much attention to HTML/CSS, I was more into JS, but now I understand that it was a huge mistake. I like this one practice I will continue practicing and improving my HTML/CSS skills.

Demo | Code base

6. JavaScript Basics

I had repeated what I had learned before and learned enough new things, some things were easy, and some things were difficult and took more time to understand. I like working with Map, Filter, and Reduce so much, they make writing and reading code much more accessible.

Screenshots:

screenshot screenshot screenshot screenshot screenshot screenshot screenshot

7. Document Object Model - Practise

Algorithm Scripting Challenges 12-18: quite difficult tasks unlike the previous ones, some of them were relatively easy, and in some of them I used prompts to resolve them. There is something to work on to improve my knowledge and skills.

The practical task was not very difficult, I enjoyed using the knowledge I gained. Most of my time was taken up by the implementation of the architecture itself and the creation of at least some design.

It was also an amazing experience to work with a mentor, refactoring your own code and working with Git. I am satisfied with my work.

Demo | Code base

Screenshots:

screenshot screenshot

Advanced Topics

8. Building a Tiny JS World (pre-OOP) - practice

Demo | Code base

9. Object oriented JS - practice

Demo | Code base

Screenshots:

screenshot

10. OOP exercise - practice

Demo | Code base

12. Memory pair game โ€” real project

Demo | Code base

14. Friends App โ€” real project

Demo | Code base

kottans-frontend's People

Contributors

chernetskyi8704 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.