kottans-frontend

About me

Hello Kottans! 🙋‍♀️ My name is Alyona and I've decided to learn frontend-development with this amazing course "Kottans frontend"👩‍💻 📚 I will do my best to achieve results. Thanks for opportunity.

Stage 0. Self-Study

📌 GENERAL

1. Git Basics

• 1.1. Course: Version Control with Git

Screenshots

• 1.2. Course: LearnGitBranching

Screenshots

My conclusions:

I would like to share my thoughts, impressions about learning material about git, Github.

I’ve learned following new commands for me: git reset and git revert. I understood the differences between them, I understood that git reset is designed to actually rewrite history, it actually deletes the committed commit and takes us to the last commit. In turn, git revert essentially creates a new commit with the reversed changes.

Also new was the command git commit –amend – for editing a comment in a commit; git checkout -b new branch – to create a new branch, assign it a name and switch to it; git branch -d new branch – delete a branch.

New for me were - the ways of moving along the branch with ^ - carriage, ~ - tilde.

The most surprising (I can say I fell in love with it 😍) were git rebase❤️, git rebase -i💛 and git cherry-pick💕. I will definitely use them at work. I enjoyed working with these commands on the learnGitBranching course.

The git fetch and git pull commands were also new. I learned that actually git pull is a combination of git fetch and git merge commands. In addition, a new for me was git fakeTeamWork.

Thank you for the opportunity to practice well, even in game form. I made a workbook with conspectus :pencil:, described the commands I had passed and studied. I will try to use them all in my work.

In addition, I am learning Markdown for myself, since I have not worked with such a markup language before.

And, I advise to go through additional materials together with the main material, and not postpone it for later, because you can also find something useful for yourself.

Thank you, I will continue...:woman_technologist:

---

2. Linux CLI and, HTTP

• 2.1. Course: Linux Survival

Screenshots

I want to say a few words about the course Linux Survival (4 modules) 👍

I’ve got knowledge of basic commands in Linux such as: «ls», «mkdir», «rmdir», «cd», «more», «pwd», «mv», «rm», «cp».

New for me was that the «rmdir» command can only remove an empty directory. The commands: «more», «pwd», «cp» were unknown for me before

In module 2, I've learned about how provided the access with some actions in files of directory. I’ve learned the «chmod» command. I’ve learned about the possibility to select all files in a directory using «*» or e.g. files with -ing ending - «ls *ing» and so on.

The third module was the most difficult.:disappointed_relieved: I got knowledges about moving between files in the directory. How to get to the home folder, how to indicate that you are in the current folder. The «find» command was surprising. Quite useful and convenient thing, I will definitely use it at work.:+1:

The command «cat» and «>» and «>>» were new to me. Separately, I enjoyed the commands related to printing files. It was quite clear for me such as: «lpr» (send to print), «lpq» (show the print queue), «lprm» (delete a file from printing). I’ve learned how to bind with some printer through the command line.

In module 4, the «kill» command and the tougher «kill -9» - for forced removal were the most surprising.

In addition, the «df» command was new to get understanding how much space is left in the directory. I learned how to copy files from someone else's directory to my own using «cp -r», and how to delete a directory with files using «rm -r». New to me was the command called «ps» that checks the status of the program and the technical mark «|». In addition, the «grep» command for finding every repetition of a word in a file was interesting for me.:+1::+1:

I believe that knowledge of Linux system commands will be quite necessary and useful in work 👩‍💻

---

• 2.2. Article: HTTP: The Protocol Every Web Developer Must Know - Part 1

In Article №1, I’ve learned that HTTP is a special protocol for delivering a document to a Web browser by a Web server. 💻🌐 Also TCP (Transmission Control Protocol) is used as the transport protocol.

What was new to me and what surprised me that the HTTP protocol is considered as stateless protocol, that why, it does not store information about the user's session; each data transfer is considered as a new session.

I also learned about the current version of this protocol, which is used nowadays, namely HTTP/1.1

I’ve studied the structure of a URL, which consists of 1️⃣protocol, 2️⃣host, 3️⃣port, 4️⃣resource path, and 5️⃣request.

I learned about the most frequently used «GET» request method and about other methods such as POST, PUT, DELETE etc.

Totally new to me were the numerical responses from the server, some of them were known, like 200 OK and 404 Not Found. But the group of 301, 303 about moving the address, 401 about the need for authentication, 403 (denied access to the resource), 500 (internal server error), 503 about the impossibility of processing requests by the server for technical reasons or overload, and others - were completely new to me.

Having gained knowledge about these types of responses, I can now easily apply them in my future work.

I learned about the availability of libraries and frameworks such as ExpressJS (for Node), Ruby on Rails and jQuery Ajax.

---

• 2.3. Article: HTTP: The Protocol Every Web Developer Must Know - Part 2

In Article №2, interesting and new to me was that a frontend developer must have knowledge about server client identification and authentication. This goal is to track site or app traffic and regular user behavior patterns. I will use the acquired knowledge in the future.

In addition, it was new to me that there are several ways to get information about the user from the server, through IP address, request headers, cookies:cookie: etc. I’ve learned that cookies are the most popular and unobtrusive files, because it is necessary to get the user's prior approval for their use.

What surprised me was that HTTP with a secure connection is currently being used, namely HTTPS - HTTP Secure. I checked my browser's own address bar and found HTTPS protocol there.:+1:

---

3. VCS (hello gitty), GitHub and Collaboration

• 3.1. Course: GitHub & Collaboration

Screenshots

After listening to Weeks 3 and 4 of the Coursera: Introduction to Git and GitHub course, I've got knowledge about Squash and Fixup when rebasing. I’ve learned that squash merges commit messages into one. Fixup discards the new commit message. The fixup operation will preserve the original message and discard the messages from the fixup commit, while squash will merge them.

What really turned out to be interesting and really surprised is the topic about Reviewing the code and taking into account the comments of other developers. I will definitely communicate with other developers in my future work and always appreciate their comments.

I've learned about common code issues that might be addressed in a code review such as:

• Using unclear names;
• Forgetting to add tests;
• Forgetting to handle a specific condition.

I've learned that the goals of code review are:

1️⃣ Make sure that contents are easy to understand;

2️⃣ Ensure consistent styles;

3️⃣ Ensure we don't forget any important cases.

• 3.2. Course: Learn Git branching (last levels)

Screenshots

About learnGitBranching course topics: Basics: Moving work back and forth and Remote repositories: Through origin - to the stars. Progressive use of Git Remotes

I want to say that when I was learning Git Basic, I was so fascinated by learning with the learnGitBranching-course so I passed through all the topics of this course. Therefore, I will simply duplicate the screenshots here (..Ohh..And I think: Why almost everything is super clear to me in 3 and 4 weeks of Coursera 😅)

---

📌 FRONT-END BASICS

1. Intro to HTML & CSS

• 1.1. Course: Intro to HTML & CSS (Coursera)

Screenshots

⭐ My impressions: ⭐

Throughout this course I've learned that the core purpose of HTML is to Communicate the structure of the content, because HTML defines content structure. I've learned about the new for me site https://caniuse.com/ that explains which HTML-attribute can be used in a specific browser version. I will use it in my future work. I've learned about meta tags, why they are needed(e.g. to communicate information TO THE BROWSER); learned about new for me Quirks Mode.

In CSS-course I've learned a new for me information about how reset default values of the browser (to set margin: 0; padding: 0 in body section in style.css file). The most interesting and surprizing topic for me was «relative and absolute position». I will definitely use this knowledge in work.

Really enjoyed the lectures about Media queries, Bootstrap and Grids 🔥🔥

• 1.2. Course:Learn HTML + CSS(Codeacademy)

Screenshots

This course was also interesting and enjoying. The Codeacademy-sandbox was a little buggy and dangling, but OK! New for me was «forms-topic» and that the value of id-attribute (identificator) in input must match with label for-attribute. And when we want to limit usernames-form to only letters and numbers (and not special characters like ! or @) we can add a pattern attribute and set it to: «[a-zA-Z0-9]+». Thanks!:+1:

---

2. Responsive Web Design

• 2.1. Course: Responsive Web Design Fundamentals. Games: Flexbox Frogy, Grid Garden

80% of the material about responsive web design was new for me ✅

From the Responsive Web Design article, I gained new knowledge about what «initial-scale=1» is (allowing browsers to set a 1:1 ratio between CSS pixels and hardware-independent pixels, regardless of device orientation , which allows the page to use the entire width of landscape orientation) The value of the viewport meta tag «width=device-width» tells the page to match the width of the screen. The «viewport» meta tag gives the browser instructions for controlling the dimensions and scaling of the page.

Now I understand what these values created for, I can easily use them at work. What surprised me in the article was that, apart from the meaning initial-scale , you can also set the following viewport attributes:
🟢 minimum-scale
🔵 maximum-scale
🟡 user-scalable

When used these attributes, the user may not be able to change the scale of the viewing area, which may cause accessibility problems. Therefore, the authors do not recommend using these attributes.

In addition, what was new was that, as a rule, the Image has fixed dimensions, and if they exceed the dimensions of the viewing area, then this leads to the appearance of a scroll bar. A common way to solve this problem is to set the max-width property to 100% for all images. I will use this in my future work.

I really liked Zheka's videos. I taught layout on my own several times based on his videos. He tells a lot of convenient and useful features at work. He spoke in more detail about the properties of flexbox, flex items, grid, etc.I will repeatedly return to him in my work.

Really liked the Flexbox Froggy 🐸 and Grid Garden games🥕

These games helped to learn the properties of flexbox and grid, to understand how they work in practice. The Grid Garden game from level 24 was difficult for me, I was surprised by the unit of measurement «fr» and the fact that it can be combined with «%» and «px».

Screenshots

Thank you for offering to study only relevant, necessary and really useful material:+1::+1:

---

3. HTML & CSS Practice

• 3.1. Hooli-style Popup... in the process of checking

Demo | Code base

It was a novelty to work with grids and flexes and media queries. I will use this knowledge in my work. Improved the skills of using the console in Google Chrome.

I learned new properties of flex, previously unknown.
It was amazing how wonderfully the blocks of code cooperated with each other.

---

4. JS Basics

• Coursera - Introduction to Javascript:

  Screenshots

  

In Courser's course of JS, I learned that the value «Undefined» in JavaScript has a specific meaning, and its meaning is that it was declared or defined, but it was not set to any value.
In turn, «null» is the absence of any value at all.

I was surprised by the topic of copying primitives and objects. I didn't know that if we change the value of the object in the copy, the value in the original value will also change.
In turn, if we change the original value in the primitive, the copy of the primitive will remain the previous one. It is really interesting and will be useful for me in my work.

The themes of prototypes and closure were generally new. I think it will be 100% useful at work.

• freeCodeCamp:

  Screenshots

  

About freeCodeCamp tasks. It is difficult to say exactly what was new, because 95% of the material was new.
The first three topics namely Basic JavaScript, ES6 Challenges, Basic Data Structures were not particularly difficult for me.
However, the last three, and especially the Algorithm Scripting Challenges, were quite challenging. I believe that learning programming with the freeCodeCamp resource is quite difficult, because there is little information, but the tasks require a fairly high level of complexity for junior, like me. As soon as I get more practice especially with array iteration methods and others, I will definitely use this knowledge in my work. In my opinion, I would not recommend beginners to learn JS on the freeCodeCamp resource, although the skill of Googling and searching for a solution is definitely pumped up.

---

5. [Document Object Model]

• 5.1. Frontend basic about DOM API

Screenshots

The DOM topic was completely new to me. Surprised that DOM, can change the HTML document, add new data there. I will use DOM method, which I learned in this course, in my future projects

- [ ] 5.2. DOM task 

📌 ADVANCED TOPICS

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

- [ ] 1.1. Building a Tiny JS World - завдання

2. Object oriented JS - practice

3. OOP exercise - practice

4. Offline Web Applications

5. Memory pair game — real project!

6. Website Performance Optimization

7. Friends App - real project!