portfolio

Karlygash Yakiyayeva's personal portfolio

Table of contents

1. About me
2. Completed courses
3. My personal projects
4. Open Source contributions
5. Tools that I use
6. Certificates

About me

Aspiring DevOps | Systems Engineer with experience in frontend web development

Contacts:

1. Linkedin profile
2. Github profile

Completed courses

1. Jest Crash Course - Unit Testing in JS by Traversy Media

2. 100 Days Of Code - 2022 Web Development Bootcamp

   Covered topics:

   • How the web works and how to get started as a web developer ✅
   • Learn web development in 100 days (optional - you can also pick a different pace) ✅
   • Build websites, web apps and web services (and understand what these "things" are) ✅
   • Build frontend user interfaces with HTML, CSS & JavaScript ✅
   • Build backend processes with NodeJS, Express & SQL + NoSQL databases ✅
   • Add advanced features like user authentication, file upload or database queries to websites ✅

3. DOM Crash Course 2020 - How Does JavaScript DOM Work? What I learned:

   • Browser's engine is able to read html, css and js files;
   • If an error occurs with HTML code, the browser tries to handle it and there is no way of showing the error on the browser;
   • If an arror occurs with CSS or JS code, then JS will let the developer know about it;
   • There is a special variable called window, which is injected by the browser into the JS world. This window acts as a bridge for JS to communicate with a lot of DOM APIs.

4. JavaScript DOM Crash Course - Part 1
   What I learned:

   • DOM is a structured representation of the HTML document. It is a tree of nodes created by the browser and JS can be used to manipulate the DOM and its elements;
   • DOM is object-oriented meaning that each node has its own properties and methods;

5. JavaScript DOM Crash Course - Part 2
   What I learned:

   • parentNode and parentElement are used interchangeably;
   • childNode is not recommended to use as it takes into account all the line breaks, instead children is preferred.
   • Similarly, firstChild, lastChild, nextSibling, previousSibling also return line-breaks, while firstElementChild, lastElementChild, nextElementSibling, previousElementSibling point to the elements;
   • We can create HTML elements from inside JS, add classess, ids, attributes, textNodes to it and insert all of them into the DOM using insertBefore(), insertAfter() methods;

6. The Modern Angular Crash Course 2022
   What I learned:

   • Angular Components;
   • Angular States;
   • Strucutral Directives;
   • Attribute Directives;
   • Event Handling;
   • Angular Pipes

7. What is NPM NPM Crash Course What I learned:

   • NPM is a software registry that contains over 800 000 codes;
   • All npm packages are defined in files called package.json;
   • npm init command initializes the package.json file;

My personal projects

1. Building a city skyline with css variables.
2. Tic Tac Toe Game with JS.
3. Waving Penguin with CSS transform.
4. Image carousel with Bootstrap.
5. Ferris Wheel via CSS animation
6. Magazine via CSS Grid
7. QR code component
8. Project "I'm a web developer"
   • Heroku deployment
   • MongoDB Atlas database connection
   • NodeJS
9. Project: NFT preview card component
   • Repository: https://github.com/karlakz/nft-preview-card-component
10. Guess Number Game
    Website URL
    • DOM Web API
    • How to refactor code
11. Pig Game
    Website URL
    • DOM Web API
    • How to refactor code
    • How to add and remove classes from the classlist method with toggle();
12. Testimonials Grid Section
    Website URL
    • Flexbox is one-dimensional;
    • Grid is two-dimensional;
    • Flexbox works from the content out;
    • Grid works from the layout in;
13. Interactive Rating Component
    Website URL
    • Use CSS Custom Properties;
    • DOM Web API;
14. Bankist App
    Website URL
    • JacaScript Internationalization;
    • DOM Web API;
    • Array Methods;
15. Expense Tracker
    Website URL
    • React Components;
    • React Hook "useState()";
    • Parent to Child communication via Props;
    • Child to Parent communication via callback function as a props;
16. Add User Info Page
    Website URL
    • React Fragments;
    • React Portals;
    • React Refs ({useRef} Hook);
17. Angular Teams Generator App
    Website URL
    • Angular Components;
    • Angular States;
    • Angular Directives;
    • Angular Pipes
18. Bear
    Website URL
    • Canvas element for creating graphics programmatically;
    • Canvas Context - a logical surface that contains objects and methods used to draw graphics, images, and text onto the canvas element in an HTML document;
    • arc() method;
19. Igloo
    Website URL
    • Canvas Element;
    • Canvas Context;
    • rect() method;
    • arc() method;
    • Linear Gradients;
    • Radial Gradients;
20. Landing Page Design
    Website URL
    • CSS Animations;
    • Using keyframes and simplifying them;
    • Background property;
    • CSS Positioning (relative and absolute);
    • Pseudo-elements (::before and ::after);
21. Meet the Team with SCSS
    Website URL
    • SCSS preprocessor;
    • SCSS @each loop;
    • SCSS variables;
    • SCSS nesting;
    • SCSS partials;
    • CSS animation and keyframes;
22. Profile with HTML Templates
    Website URL
    • Custom elements;
    • Custom Elements Life Cycle;
    • Shadow DOM;
    • HTML Templates

Open Source contributions

1. The-TypeScript-Workshop: Error during compilation #6

My toolset

1. Git - for version control;
2. VSCode:
   • prettier
   • vimextension
   • nodemon
3. fnm - Node version manager
4. Databases:
   • MongoDB
   • MySQL
5. Unit Testing:
   • JEST
6. CSS Preprocessors:
   • SCSS
7. Password Managers:
   • KeePassXC

Certificates

1. CompTIA Network+ (N10-007) Cert Prep: 1 Understanding Networks
2. CompTIA Network+ (N10-007) Cert Prep: 2 The Physical Network
3. CompTIA Network+ (N10-007) Cert Prep: 3 The World of TCP/IP
4. CompTIA Network+ (N10-007) Cert Prep: 4 Making TCP/IP Work
5. CompTIA Network+ (N10-007) Cert Prep: 5 Securing TCP/IP
6. CompTIA Network+ (N10-007) Cert Prep: 6 Advanced IP Networking
7. CompTIA Network+ (N10-007) Cert Prep: 7 Wireless, Virtual, Cloud, and Mobile Networking
8. CompTIA Network+ (N10-007) Cert Prep: 8 Building a Real-World Network
9. CompTIA Network+ (N10-007) Cert Prep: 9 Managing the Network
10. AWS Cloud Quest: Cloud Practitioner
11. AWS Well-Architected Proficient