rsschool-cv

Kirill Leogky

Technologies

Atom
React
Bootstrap
Git
CSS
HTML
jQuery
JavaScript

Summary

I want to become a web developer and create useful and innovative products.

In development, I like to look for the optimal solution to various problems because often there are many options—this is a kind of challenge for me. I am inspired by the fact how I quickly can see the result of my work. You can change some parameters and clearly see the result of their work.

Also, I’m improving my soft skills:

team work. Adopting the team experience and constant self-improvement and development as a web developer helps me in getting extra knowledge on real projects, which cannot be compared with examples from Internet resources.
english. English is vital because all modern documentation and articles is written in English and to have up-to-date knowledge I have been studying the language.

I try to understand the topics in which I have certain questions on my own and thoroughly with the study of examples, specifications, and not just by reading the solution of the problem somehow.

Education

HTML Academy

With these courses started my acquaintance with web development. After completing the course, I learned the basics of working with HTML, CSS and JavaScript.

Skyeng

More than 12 months studying English in Skyeng. During my studies, I improved my English quite well, but I continue to study and improve it.

Gosha Dudarev’s channel

This channel introduced me to the basics of GitHub, helped me get acquainted with the text editor Atom, which I use regularly and more.

Examples

My html/css project

HTML code example

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>
 <meta charset="utf-8">
 <meta name="viewport">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Quick Chat</title>
</head>

<body>

 <div id="appContainer" class="flex-column">
  <header>
   <div class="container flex-column flex-center">
    <h1>Quick Chat</h1>
    <p class="light-text">The easiest way to get your message across.</p>
    </div>
  </header>

 <div id="mainContent" class="container flex-grow-1 flex-column">
  <section id="login">
   <h2 class="text-center">Get Started</h2>
    <form id="loginForm" class="flex">
     <input type="text" name="username " id="usernameInput" placeholder="username" class="flex-grow-1">
     <button id="loginBtn">Chat!</button>
    </form>
  </section>
 </div>
</div>

</body>

</html>

CSS code example

/_ Resets _/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica, sans-serif;
    color: var(--primary-text);
}

/_ Helper Functions _/

.container {
    max-width: 600px;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-grow-1 {
    flex-grow: 1;
}

.mb-2 {
    margin-bottom: 20px;
}

/_ Text Classes _/

.primary-text {
    color: var(--primary-text);
}

.secondary-text {
    color: var(--secondary-text);
}

.light-text {
    color: var(--light-blue);
}

.text-center {
    text-align: center;
}

h1 {
    font-size: 48px;
    font-weight: 300;
}

#appContainer {
    height: 100vh;
    width: 100vw;
    background-color: var(--primary-blue);
}

#mainContent {
    width: 100%;
    justify-content: center;
}

/_ Header _/

header {
    height: 150px;
    background-color: var(--dark-blue);
    width: 100%;
    color: white;
}

header .container {
    height: 100%;
    align-items: flex-start;
}

/_ Login _/

#login {
    background: white;
    padding: 40px 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: -100px;
}

#loginForm {
    margin-top: 20px;
}

/_ Form Elements _/

input {
    height: 40px;
    padding: 10px;
    background-color: var(--light-blue);
    border: none;
    color: var(--secondary-text);
}

button {
    height: 40px;
    padding: 0 15px;
    background-color: var(--primary-blue);
    color: white;
    border: none;
}