Intro

Have you ever wanted to change your career and figure out Front-end? If you are the one who didn’t have a chance to study in this field, or haven’t got any reliable friends who could provide you with simple answers to your beginner’s questions, then this guide is probably for you. Here, I will share my personal findings and try to explain them as simple as possible. Most of these topics will also come in handy if you are going to prepare for an interview.

Please keep in mind, that I’m not a professional IT tech guy who know everything! Here, I’m only documenting my progress in the Frontend field. This information has helped me a lot in creating my pet projects and commercial websites.

Code Editors

Every project starts with a code editor. They are designed to write, edit code and boost your productivity. These editors can support multiple programming languages and are usually equipped with a range of features such as syntax highlighting, code completion, and debugging tools.

One of the main benefits of using a code editor is the ability to work with multiple programming languages. If you are interested in data analysis, artificial intelligence or scientific computing, then Python is the right choice. If you need to create a good-looking and responsive page with dynamic elements inside a browser, then it is JavaScript. Maybe you want to create enterprise-level applications, or servers, take a look at Java. Or maybe you want to create high-performance apps for Windows or Linux? It’s probably a job for C++ and C#. The list of programming languages is huge and there are no limits.

Code editors open many possibilities for developers to create a wide range of different projects for small businesses or large companies. But choosing the right tool for a job can be overwhelming for the newcomers. Look no further! Below, I’ll mention the three most popular code editors for new and skilled developers.

Vim

Vim is a highly configurable text editor that is widely used in the programming community. It was initially released back in 1991! It is known for its efficiency and speed, as well as its ability to be fully controlled using only a keyboard.

Vim also has many plugins (Vim Awesome) and extensions available, allowing users to customize and extend its functionality. This makes it a popular choice for experienced developers who want a high level of control over their text editor.

Overall, Vim is a powerful and efficient text editor that is popular among experienced developers. While it may have a steep learning curve, it can greatly improve productivity once mastered.

Atom

Atom is another popular open-source code editor developed by GitHub in 2014. It is known for its modern and intuitive interface, as well as its wide range of features and customization options. However, it should be noted that GitHub announced its end-of-life on December 15, 2022, to prioritize other projects instead.

One of the main benefits of Atom is its cross-platform compatibility, allowing it to be used on Windows, macOS, and Linux operating systems. It also has numerous plugins and themes available, allowing users to customize and extend its functionality.

Some of the key features of Atom include a file system browser, multiple panes for editing and comparing code, and support for over 80 programming languages. It also has built-in integration with Git and GitHub, making it a great choice for developers who work with version control systems.

VSCode

Visual Studio Code or shortly VSCode (not to be confused with Visual Studio) is a free and open-source code editor developed by Microsoft. It is known for its fast performance, intelligent code completion, and wide range of features and extensions. It is by far the most popular code editor nowadays and for a reason.

One of the main benefits of VSCode is its highly customizable interface, allowing users to tailor the layout and appearance to their personal preferences. It also has numerous extensions available, which can be used to add new features or support for additional programming languages.

VSCode is also designed to be used with version control systems such as Git, allowing developers to easily track and manage changes to their code. It also includes built-in debugging tools and support for many popular programming languages, making it a powerful and versatile tool for developers.

In any case, if you are still looking for the best code editor with many extensions, then pick VSCode, you won’t regret it.

Best Extensions (for VSCode)

Assume you have picked a code editor, and it is VSCode, which extensions are a must for this tool? Well, you can of course open the extensions tab in the app and see all the recommendations for yourself, but here’s my personal list of extensions that I use daily as a junior frontend developer:

Auto Close Tag + Auto Rename Tag – the name says it all. VSCode by default doesn’t allow renaming both, open and closing tags. This extension changes this, making the coding process more efficient.

Color Highlight – highlights which hex colors are used from CSS in a human form.

ChatGPT – helps you generate and debug code. It is connected to GPT-3.5 directly using API key.

Azure Repos – allows interacting with the repository remotely without even downloading it to your device.

Vscode-icons – a simple extension to add colorful icons for each different language and framework.

GitHub Pull Request + GitHub Repositories – lets you interact with any GitHub repository without leaving your code editor.

GitLens + Git History – simplifies version control for your projects. It shows who, when and what was edited over time. It will be especially useful if you plan to work in a team.

HTML CSS Support – validates tags and attributes, plus it adds auto-completion and suggestions to your code.

HTMLHint – analyzes and reports warnings or errors in an HTML document in the status bar. Useful for new web programmers, who are not familiar with HTML.

Indent-rainbow – visualizes your code, making it more colorful and readable.

IntelliCode – AI assistant which suggests you a code based on its context. Useful for JavaScript / TypeScript developers.

JavaScript (ES6) Snippets – implements new code snippets to work with ES6 syntax such as: promises, arrow functions, declarations and modules.

Live Server – creates a virtual (localhost) server on a local machine to test your web applications or pages. It also supports auto-reload, whenever new changes in the code occur.

NPM – useful extension to work with Node.js scripts, packages and builds.

Prettier – reprints (aka. formats) your code with its own rules, wrapping and making it more readable for you or other developers.

Tabnine AI – another AI assistant which supports more programming languages than IntelliCode. It has integrations with other code editors, and it also has a premium paid plan.

Settings Sync – stores your configuration (key bindings, snippets and settings) in the cloud which you can retrieve and sync on any other PC.

HTML Basics

HTML5 is the latest version of the Hypertext Markup Language used to create and design web pages. It is an improvement over its predecessor, HTML4, and provides web developers with a set of new and powerful features. HTML5 has improved accessibility features, including support for ARIA (Accessible Rich Internet Applications), which makes it easier for people with disabilities to navigate and interact with web pages.

Another significant feature of HTML5 is its support for responsive web design. With the increasing use of mobile devices for web browsing, it is essential for websites to be responsive to different screen sizes. HTML5 provides developers with tools to create responsive web pages that adjust to different screen sizes, ensuring that users have a consistent browsing experience regardless of the device they are using.

How the browser renders a page

There is no secret that you’re reading this page by using a browser. No matter what browser you use, they all follow the same procedure to load all the code and create the final, good-looking page. How?

First things first, all web assets are stored on a remote server, which usually has a static IP address (something like 16.121.90.244), but you won’t see that address for sure, as they are hidden behind domain names. Basically, your browser requests a DNS lookup that is tied to that IP Address and then establishes a connection (if it is available).

Once the connection between a browser and a server was established, the browser sends an HTML (GET) request (to server-side) and the server will respond and return specific data to you (client-side). Once all the data is received, the browser turns that data into the DOM – Document Object model, which represents HTML markup (meta, scripts, head, body, footer and other tags).

DOM represents all that chunk of received code in the visual form – as a document or node tree which can be later modified. Once the initial loading of DOM is complete, the browser then applies predetermined styles for that page by requesting CSS stylesheets. The final result is usually rendered, once the DOM and all styles have been loaded correctly. They can also be later enhanced by using JavaScript or other frameworks to make the page more interactable.

HTML Features

HTML, or Hypertext Markup Language, is the standard language used to create web pages. It is a markup language, which means that it uses a series of tags to describe the structure and layout of a document. These tags are enclosed in angle brackets, and they typically come in pairs, with an opening tag and a closing tag.

The Purpose of this HTML is to create the structure and layout of a webpage, while CSS (Cascading Style Sheets) is used to control the presentation of a webpage and JavaScript is used to control the behavior of a webpage. Together, these three technologies form the foundation of web development. I’ll take more about CSS and JavaScript later.

Semantic elements

Semantic elements have a pretty simple and straightforward purpose – to represent, organize and distinguish the code with the right tags and make it more readable. They usually help to define the piece of text, style, media or features. This includes: contact forms with <form> tag; adding scripts <script>; indicating quotation <blockquote>; highlighting text <mark>; images <img>; input data <input> and many more. The complete list of these elements can be found at the official MDN Web Docs.

Why semantics are important? Semantic elements are the key to optimizing your page for viewers, as well as for developers. It will make your code more readable, and it will positively affect your SEO score.

Opening links in a new tab

Sometimes it is necessary to let users open certain links in a new tab without doing extra work. You can apply this rule to any link you add inside your HTML <a> tag. Simply add this new attribute inside brackets: target="_blank"

e.g. <a href="https://google.com" target="_blank">Open Google</a>

Connecting external files

Connecting external files is an important step in every project. Even if it’s a small pet-project, you’ll definitely need to connect favicon (the icon that shows in your tab), add CSS Stylesheets or some JavaScript files to enhance your web UI.

This can be done by using <link> tag inside <head> tag of HTML file. Most commonly, it is used to link to an external stylesheet file, as shown in the example below.

<link href="/style.css" rel="stylesheet">
<link href="/style-mobile.css"="stylesheet" media="screen and (max-width: 600px)"
<link rel="icon" href="favicon.ico">

“rel” stands for relationship, and it basically tells the browser how to treat this connection in the document. “href” is the actual link to an external file. “media” is the optional attribute that can be used to load custom conditions as shown in the example above (line 2) – it tells the browser to load this version of stylesheet, only if the screen size is lower or set to 600px (mobile-only).

Input element

There are many different types of <input> that can be used in HTML. With them, you can create interactive controls in the web-based form to accept a wide variety of data from a user. This data can be later sent to the back-end server to be interpreted and return specified results.

Most popular, but not limited <input> types include:

type="button" creates a push button that can be programmed to control custom functionality.

type="checkbox" creates a box (usually for multiple values) that can be selected for submission in a form.

type="email" adds a validation field to let users enter their email addresses. If the text is not formatted as email, it will return an error message.

type="file" allows users to upload one or more files from their devices to a server. This type requires client/server interpretation. It can be done with PHP, Nodejs (Express), Python (Django) or other server technologies. You will also need to take security measures to protect your server from possible attacks.

type="radio" similar to checkbox, but users can choose only one value at the same time for submission.

type="password" adds a field where users can enter their password with obscuring dots.

XML Sitemaps

XML sitemap is a file that contains every single link (from your posts, videos, images or files) in a structured form from your website. This file is usually located in the root directory of www, and it serves only one purpose – to provide information to crawlers and search engines.

Sitemap helps discover your website’s structure faster and makes it more appealing to search engines (SEO). It is recommended to create this file for large projects with many internal links.

Icon fonts or SVG?

Thinking to add your social network icons, but don’t know how? You can certainly do so, simply by adding font icons (like Font Awesome) or Raster images with <img> tag and scale them accordingly, but this actually requires plenty of work. You have to resize an image, make it in an appropriate format (ico, png, webp) to affect less performance and then make sure, that they look good on all devices. The downside is pretty obvious – these images have a fixed resolution, sometimes they are large in sizes, and it takes extra time for a browser to request each image from a server.

SVG or Scalable Vector Graphics is a block of code inside XML format, and it renders based on certain values, instead of the static image I mentioned above. This XML code is served directly to a browser. It offers relatively smaller sizes, higher performance, and it adds more scalability to your project. They can also be resized and still maintain sharpness and high quality for any screen sizes.

So long story short, font icons are much easier to deploy but harder to maintain, and your project may suffer due to poor optimization. SVG is clearly harder with all these values to draw the actual icon, but it is highly scalable and stable for larger projects that require high speed and stability.

CORS Standard

CORS or Cross-Origin Resource Sharing is an HTTP security standard that lets a server indicate which origins are permitted to request the information from a web server. In simpler terms, your web server can store and serve information locally, while also requesting resources from other external web servers (for example to embed images, stylesheets, videos or CDN scripts stored on the other domain). CORS basically defines whether it is safe to allow the cross-origin request or not.

Flash of unstyled content

Flash of unstyled content or FOUC is a problem that can occur when a web page is loading, where the page’s content appears briefly in plain HTML (without any CSS styles). This may happen when a browser builds a DOM from an HTML file and renders it before applying a stylesheet. FOUC is more noticeable when the responding server is not able to process user’s request fast enough to load the required resources. This may also happen when external scripts cause interruptions.

FOUC is generally considered a usability issue, as it can make the page appear broken or unfinished to the user. You can prevent this flash by including all critical styles in an HTML document or using server-side techniques with scripts to delay the initial rendering.

CSS Basics

CSS, or Cascading Style Sheets, is a stylesheet language used to apply “decorations” to an HTML document. This language allows you to control the layout, colors, and fonts of a webpage, as well as other visual elements such as backgrounds and borders. It also includes new and improved effects, such as animations, gradients, and shadows, which allow designers to create more engaging and dynamic web pages.

With CSS and media queries, you can also create complex styles for different devices (such as tablets, mobile or laptops) to create responsive elements. CSS is a 100% requirement nowadays for building professional and polished websites, so consider learning it deeper.

BEM – Component-based approach

BEM – Block, Element and Modifier is a component-based approach for web development. It can be useful to structure and store your code in separate parts for more flexibility.

A block is an independent and reusable component that can also consist of other blocks. It can be reused in other projects or pages. To make them look different, they can be changed with modifiers or class selectors to change their appearance, behavior, or structure.

Elements are stored inside a component. These are usually child elements, which should be styled and include a named class.

Modifiers – or properties are usually classes (selectors) that are added to a certain element to apply (aka. augment) features or change values for a reusable block to make it unique.

CSS Frameworks

There are many different CSS frameworks nowadays that can do pretty much everything to build your websites with ease. Some are less or more popular, but they all aim to “mobile-first” and attempt to bring as many components as the developers can to simplify the workflow. Below, I’ll only describe the features of three well-known frameworks: Bootstrap, Tailwind and Foundation. Some frameworks that are also worth mentioning: Semantic UI, Pure CSS, Bulma and Material UI.

Tailwind CSS

Tailwind is a CSS framework designed to build modern websites with HTML classes. It comes with responsive modifiers and reusable blocks to create pages faster. Most of the job is done with convenient and logical classes that represent simple and more complex CSS attributes. Whenever you add a Tailwind class to your element, it will automatically rebuild the (output) stylesheet for you, and you will have to need to visit this file ever again. Another feature here is that your CSS stylesheet will only have the required attributes to run your elements. No more leftovers in your code and it will keep compact.

More importantly, Tailwind CSS supports most of back-end environments like Vite, Next.js, Laravel, or Svelte. It is easy to connect and start using it if you are already familiar with CSS.

There are of course downsides with this framework – Scaleability and code readability. While this framework certainly simplifies the process of building mobile-friendly websites without leaving an HTML file, over time you will generate a lot of different classes for all the elements that will pile up and reduce code readability. It also comes at the price of tweaking certain elements and debugging the stylesheet.

Bootstrap

Bootstrap is the most popular CSS framework nowadays. It was the first framework to start the “mobile-first” trend. It comes with many different grid-based components and Sass architecture. Even if you are not familiar with Bootstrap, you will be able to create quite a good-looking page with all the forms, hamburger menus, navigation bars, charts or progress bars.

For its advantages, Bootstrap has a large community backed by large companies that can provide answers to your questions and make your website look as planned. You will also find many different components to enhance your website and then customize them to your needs.

While Bootstrap has enough components and templates to build your first website, it comes at a price – speed and maintainability. If you plan to create just a small website for your personal needs or business, then prepare to deal with many unnecessary (unwanted) components which do nothing in your project. That’s because Bootstrap has most of its components built-in by default.

Foundation

Foundation is another CSS framework that provides a set of predefined styles and layout options for building websites. Just as Bootstrap, Foundation utilizes a 12-column grid system to arrange responsive elements.

While it offers pretty much the same functionality, the difference hides in complexity. Foundation has much more flexibility for creating unique designs and is intended for web designers, who want to tweak every single piece of an element. It is more like a do-it-yourself approach.

However, if you want to create a typical-styled website with basic components and without bothering much with the design, then Foundation is probably not for you.

CSS attributes

Inline and internal Styling

In most common practices, CSS attributes are stored in an external CSS file outside of HTML by using <link> tag. Inline on the other hand, stores all CSS styles inside an HTML file and inside an element – like <div style=color:red; font-size:46px;></div>. Inline styling is not very popular, as it is used mostly only for older websites, and it can be hard to maintain and scale in complex projects.

Internal CSS, similar to inline, is applied inside the HTML file. But instead of putting these properties inside an element, we create <style></style> tag. Inside this tag, you can put native CSS properties. It is useful only if you are styling a single-page project and want to store everything in one place. Keep in mind, that these styles don’t apply to multiple HTML files. It may also become challenging in the future to maintain this file, and it may also affect performance.

Display:

There are 6 important “display” properties that you can choose for a certain element:

None – Using this value will visually hide an element (while affecting its layout) from the page. It is commonly used with JavaScript to create interactive elements for mobile devices: hamburger menu, scroll to top button, or other features.

There is an alternative way to hide an element in CSS from the page – by adding visibility: hidden property. It acts differently compared to display: none. Adding this property will not affect the element’s layout, meaning that it will still occupy its determined place, and it will only become invisible. All these properties also become non-interactable to end-user.

There is one more property which can hide your element from the page – opacity: 0. As the name suggests, it makes an element completely transparent (with value set to 0). Although it becomes invisible, just as with visibility:hidden, it can still be interacted or clicked.

Block – This property will create a “block” element that starts on a new line (always vertically) and it takes up all the available screen space. You can specify its space by changing height and width values. Compared to inline-block, it creates a line-break on the page.

Inline – Forces all the elements to be displayed in one horizontal line. Its size is set by the content and cannot be changed.

Inline-block – Similar to Inline, it creates a block where you can manually set the element’s height and width values.

Flex – This popular attribute will dynamically arrange items in rows and columns to create complex layouts. It introduces several new properties in CSS to work with display: flex. For example: flex-direction; flex-wrap; align-items; justify-content; align-self; gap; and others.

Grid – it is a two-dimensional (horizontal & vertical) system to place elements into specified column tracks or cells (like in table). This attribute uses different properties to create an entire and complex web layout or some specific elements like Gallery. Online Store or News. Compared to Flex, Grid is more customizable, and it has more control over different elements.

Position:

Static – is a default value for an element. Most properties like top, left, right, bottom, or z-index have no effect on this property.

Relative – an element will be positioned relative to its (self) position. You can also apply top, left, right, bottom, or z-index to adjust its position.

Absolute – Makes an element “absolute” removing it from the normal flow and forcing it to overlap other elements (on top of each other). Other elements will occupy the position of that element. Its default position is based on the ancestor’s (.parent) position. It is usually related to HTML <body> or <div> tags.

Fixed – Forces an element to remain in the same place even if the page is scrolled. This will also remove an element from the normal flow, leaving its initial space. It has a similar effect to Sticky, but it keeps in the desired position indefinitely, and it is always relative to the browser’s viewport. Can be useful for creating pop-up windows, navigation bars or other blocks, which must always stay in sight.

Sticky – Same as Fixed, but a sticky element will stay in the normal flow, saving its initial space, and it will only “stick” once an offset was reached (scrolled). If you scroll back, this sticky element will “un-stick” back to its original position. Best used for scrollable elements – navigation bars, blog posts, or dropdown menus.

Z-index

Z-index is a property that creates an order for positioned elements. Elements with a higher z-index value can overlap other elements. Simply put, z-index acts like a layer in Photoshop or Premiere Pro. Each “layer” can stack on each other, and you can arrange them in a logical order. The layer with the highest value will appear in front of other elements.

This property works only with positioned elements (absolute, fixed, sticky, relative or flex). Its value can also be set to negative.

Z-index will also come in handy if you want to create multi-layer UI with stackable effects or make a sticky navigation bar that must always stay above all other elements.

Border vs Outline

Border – is a line drawn around an element. It can impact surrounding elements and change the size or position of the initial element. Some useful attributes include – border-color; border-width; border-radius.

Outline – is a line drawn around an element (outside the borders). This line, unlike Border, doesn’t take up space nor change the size or position of the element. You can style this property by using outline-style or outline-color. This feature can be useful for changing the states of different elements like buttons, form fields or links.

Padding vs Margin

Padding – Controls a space inside an element. It is a space between an element’s borders and the element’s content. Padding is mostly used to change the size of an element, such as buttons, or widgets.

Margin – Controls a space outside an element. It can create gaps between other elements. This can be used to change an element’s position with margin-left; margin-bottom; margin-right; margin-top, center it with margin:auto, overlap neighbors, or add space.

Box-sizing:border-box

Box-sizing is a property that calculates width and height of an element depending on which properties apply (borders or padding). If you create a 100×100 px box and add a padding:20px, it will increase to 140×140 px (this is the default behavior of CSS with the property box-sizing:content-box). Box-sizing can change its calculations if needed. By adding box-sizing:border-box property, the 100px box will remain at 100px and the padding effect will instead apply to the inside.

Overflow:

Overflow is a property that can change an element’s behavior when the content cannot fit inside the element. Usually, when it happens, an overflowed element can unpredictably break surrounding styles and make the text appear outside the box. To prevent this from happening, we can use different values: overflow-auto; overflow-scroll; overflow-hidden. You can also specify overflow direction with overflow-x or overflow-y.

Vh & Vw values

View Height (Vh) is the unit that is relative to 1% of the height of the viewport (browser window).

View Width (Vw) is the unit that is relative to 1% of the width of the viewport (browser window).

This means, that if you set, let’s say height:100vh; the element with this property will fit an entire visible browser window (100%). These units are especially useful when creating responsive and adaptive elements. More on that below.

Justify-content & Align-items

These two attributes are used when you apply display: flex to an element, and they are used for positioning. There are two axes to consider – Main axis (horizontal) and Cross axis (vertical).

You can align flex items along the main axis by using justify-content attribute.

As for the cross-axis alignment, you can use three different attributes: align-self, align-items or align-content. Each of them allows positioning your element vertically in a different way. What’s the difference between them? Align-self is usually applied only to a single item – other elements will be unchanged; Align-items works the same way as align-self, but it controls alignment to all children (all items) within the container; Align-content will move all elements along the cross axis and determine the spacing between each element.

Pseudo-classes

Pseudo-classes are intended to specify a state for the selected element. They are used to enhance your page and make it more appealing to users. The most popular pseudo-classes are: :hover (for cursor effects), :focus (to visually highlight a selected element or field), :visited (for links), :checked (for forms), :required (for highlighting required fields) and more. You can find all CSS pseudo-classes on MDN Web Docs.

Pseudo-elements

Pseudo-elements have a different purpose in comparison with pseudo-classes. These elements allow styling a specific part of an element. While pseudo-classes are indicated with a single : colon, pseudo-elements must be used with :: double colons. The most popular pseudo-elements are: ::after (adding styling after the element’s content), ::before (adding styling before the element’s content), ::first-letter (to apply style only to the first letter) and others.

Attribute Selectors

With this feature, you can apply different styling to an element that has a specific attribute inside HTML <tag>. It can be anything – a class, value, data, specific word or specified attribute.

In the example below, you can see, that we have two <input> tags with different types. Let’s say that you want to change text color only for one input (with the password), so for that, we add a selector and include the attribute inside [ ] – In the final results, only one input with the password will change its color.

<input type="password">
<input type="email">
<style>
input[type=password] {color: red}
</style>

Understanding CSS Specificity (priority)

Different CSS selectors like id, class, or inline basically have their own “weight” which can affect your page style. This may happen when you apply rules to a single element, but with different selectors. Selectors that have the highest weight / priority will apply that rule, while other rules will be ignored completely.
Why is this important? Because you can accidentally pile your project with unnecessary selectors and attributes that do not modify the page in any way, but take up space and decrease page loading speed. Stability and speed always come first!

Here are some “weight” values for a better understanding of this Specificity (more weight means higher priority):

Type	Weight
Tag selector (<tag>)	1
Class selector (.class)	10
ID selector (#id)	100
Inline style (<tag style=””>	1000

But what about !important argument? Can it override priority in the stylesheet? Yes, it can override all the specificity rules, even the inline. However, it is not recommended to use it, because this argument can create even more chaos in your style, and it basically breaks the natural behavior of a stylesheet.

Adaptive vs Responsive Design

Responsive design is where the web elements respond to any browser size, and it reflows the layout accordingly. This can be achieved with display:flex properties, display:grid, viewport (vh, vw) units or JavaScript. No matter how wide or narrow the user’s browser is, the page can adapt to that resolution and still provide an identical experience and usability.

Adaptive design on the other hand uses media queries @media screen and (min-width: 900px). This is usually done, when you know, what specific devices your website must support. This way, the page will adapt only when a certain breakpoint is reached.

GitHub

GitHub is a hosting service which is used to store coding projects and to track changes (aka. version control) via web browser, git, or code editor. This platform helps developers collaborate and share their code with others. GitHub also provides a range of tools and features such as issue tracking, comments, project management, and code review, which help developers work more efficiently. It is widely used by individual developers, open-source projects, and companies of all sizes to manage their software development process.

How to start your first repository

GitHub Cheatsheet

$ git init {project name} – creates a new directory with the specified project name and initialize it as a new Git repository. This can be useful to start a new project and keep track of changes made to the project files over time.

$ git clone {url} – creates a new directory with the same name as the remote repository and copy all of the repository’s files and commit history to your local machine. This can be useful to work on an existing project with a local copy and keep track of changes made to the project files over time.

$ git status – shows you which files have been modified, which files are staged for the next commit, and which files are not yet tracked by Git. This can be useful to keep track of changes made to the repository and to decide which files to commit and push to the remote repository.

$ git giff – shows the differences between the working directory and the staging area, or between the staging area and a previous commit. This can be useful to see what changes have been made to files in the repository.

$ git diff --cached – shows the differences between the staging area and the most recent commit. This can be useful to see what changes have been staged and are ready to be committed to the repository.

$ git diff HEAD – shows the differences between the files in the working directory and the version of the files that were last committed to the repository. This can be useful to see what changes have been made to the files since the last commit.

$ git diff hash1 hash2 – shows the differences between the files at the two specified commit hashes. This can be useful to see what changes were made between two specific points in the repository history.

$ git blame {file name} – shows date of changes and authors who worked with that file.

$ git log – shows list of commits

$ git branch -av – shows list of all branches.

$ git branch -d testbranch – delete a branch called “testbranch”.

$ git checkout b && git merge a – merge both branches into one.

$ git commit -am "mesage" – stages all modified tracked files and commit the changes with the specified commit message in one step, without using extra commands.

$ git reset {file name} – removes the changes made to the specified file from the staging area, while keeping the changes made to the file in the working directory. This can be useful if you accidentally staged changes that you didn’t intend to include in the next commit.

$ git reset --hard – removes any changes made to tracked files since the specified commit and discard them permanently. This can be useful to revert to a previous commit and start fresh, but it should be used with caution since it can permanently delete unsaved changes.

$ git fetch – fetches the changes from the remote repository and store them in your local repository, but it will not merge them with your local repository. This can be useful to see what changes have been made in the remote repository before deciding whether or not to merge them into your local repository.

$ git pull – fetches the changes from the remote repository and attempt to merge them with your local repository. This can be useful to keep your local repository up-to-date with the changes made by others.

$ git pull --rebase – fetches the changes from the remote repository and then apply your local changes on top of the remote changes instead of creating a merge commit. This can be useful to keep a clean and linear history in your repository.

$ git push – sends the committed changes in your local repository to the remote repository specified by a named branch.

JavaScript Basics

JavaScript is a programming language which is commonly used to add interactivity and other dynamic features to your websites. It can run on the client side (in the user’s web browser) or on the server side (using Node.js). It is a versatile language that can be used for a wide range of tasks such as form validation, creating interactive maps, and building complex web applications.

This language is a must in today’s frontend development. Even if you plan to build the most basic landing page, you will still need it to create the essentials: a hamburger menu, dark mode functionality or basic image gallery.

Vanilla JavaScript

Vanilla JavaScript means that it runs without any additional libraries or frameworks. It is the standard and most basic implementation of the JavaScript programming language. This can include using the built-in JavaScript functions and objects, as well as using basic programming concepts like loops, variables, and functions.

Despite the fact, that there are many modern solutions (aka. JavaScript frameworks), Vanilla JavaScript still holds strong. It is a lightweight and flexible language that can be used to create a wide range of applications, from simple scripts to complex, large-scale web applications.

It is constantly evolving, and new features are being released regularly. Some of the latest features include the use of asynchronous programming with the async and await functions and the use of modules for better structuring of code.

Async / Defer scripts

“async” and “defer” can specify the behavior of scripts that are connected with the <script> tag inside HTML. These attributes tell the browser how to treat a script, and it can improve the performance of your page.

“async” attribute allows the script to be loaded asynchronously. It will be executed as soon as the browser reaches them, and without interruptions, no matter where they are located in the HTML document.

“defer” attribute is different. When the browser reads such script, it will be executed once the document has been fully loaded. Scripts with this attribute are executed in the order in which they appear in the document.

“let” vs “const” vs “var”

“let”, “const” and “var” can declare variables, but they all have some differences.

“var” is the oldest declare method which is still supported in JavaScript. It works similarly to “let”, but it can be re-declared later in any part of the script.

“let” is a more preferable method to declare variables. Instead of “var”, it is now block-scoped. It cannot be re-declared, but can be updated within the same block of code.

“const” – has the same functionality as “let”, but the variable which was declared with const is set to read-only. Once that value is set to constant, it cannot be re-declared. It is recommended to assign these values with const, only if you want to keep them static.

Object-Oriented Programming & Functional Programming

Object-Oriented Programming or OOP is a programming model that is based on the concept of “objects,” which represent real-world entities and can contain data and behavior. It can make your code more organized and easier to maintain, especially if it is a large project that requires a group of developers. The structure of OOP includes: classes (data), objects (defined data of a class), attributes (set of properties for a class), methods (behavior or functions defines inside a class).

Functional Programming on the other hand is a more traditional model that is based on functions. It is mostly used for mathematical computations. Writing code in pure functions can be difficult for programmers, as they don’t resemble a concept of real-world objects.

JavaScript Frameworks

There are three notable frameworks that utilize JavaScript and make things easier to create larger and more scalable projects. Angular – massive framework created and maintained by Google; React – created by Meta (Facebook) originally as a JavaScript library, which later grew into framework; and Vue.js – a “fan-made” framework that is not backed by any big company and is maintained only by the devoted developers around the world.

React

TBA

Vue

v-if – show or hide element from DOM

v-show – show or hide element, but it still remains in DOM, but display:none is applied

Node.js

Node.js is a run-time environment used for executing code and constructing fast and scalable applications. Sometimes Node is misunderstood only as a backend solution, but in reality, it can do both. Its functionality is not limited to building servers, but also complex web projects with many dynamic elements, dashboards, forums or user’s data.

NPM CLI

What is NPM? Node Package Manager is a package manager for JavaScript which is initiated from the Command Line Interface (CLI) in the Node.js environment. It’s used to install new packages (aka. plugins) on back-end server side. Depending on your needs, these packages can drastically enhance your server or frontend environment: add new features or improve its optimization.

Packages manipulation

NPM Packages are sort of extensions or collections of code and other assets that are published to the npm registry and can be installed into a project with a single command. They contain code, libraries, assets, and other resources that can be used by other developers in their own projects.

By using packages, developers can save time and effort by reusing existing code, rather than having to write everything from scratch. Packages can also help manage dependencies, as they specify which other packages they require to work properly, allowing npm to automatically download and install these dependencies when the package is installed. This helps to ensure that projects are using the correct versions of dependencies and reduces the risk of compatibility issues.

Installing and uninstalling packages

Once you initialize Node.js with the command: npm init -y you can install new packages by using CLI commands in VScode: npm install {package_name}

To uninstall your package and remove all dependencies from your project, you can use this command: npm uninstall {package_name}.

You can find the name of a package in your package.json file, or use this command instead: npm list.

Updating packages

Use command: npm update. It will detect all existing packages in your project and apply minor updates if available. If you want to update only one package, then add {package_name} after the npm update command.

If you want to prevent certain packages from updating, you can navigate to package.json file and remove “^” (caret) symbol from a package’s dependency. Removing “^” symbol basically means, that this version must match and shouldn’t be updated.

In case you need to update your package to a new Major (patch) version, you should replace “^” (caret) symbol to “~” tilde and then reapply npm update command.

Devdependencies vs Dependencies

Whenever you install a new package, Node.js creates a new “dependency” for that package inside package.json file. This package can go either in devdependencies or dependencies. What’s the difference between them?

“devdependencies” is where you are going to store your packages that are required only during your development phase. These packages mostly include some frameworks, debug tools or web interfaces that won’t be used in the final production. You can install any package into that dependency by adding a new argument at the end: --save-dev. If you are also going to work with other developers, this dependency will let them know, what version you use for a project.

“dependencies” is the “production” path for your installed packages which are going to be needed to run your code during the final (deployment) phase for the end-user. Whenever you install a package, it can automatically go there, but you can specify the dependency by adding a new argument similar to dev: --save-prod. Try to include only the necessary packages to optimize your code, make your application more maintainable and easier to deploy.

MySQL vs MongoDB Briefly

HTTP Methods

Mobile-Responsive Design

Flex, Grid layouts

Media queries

Page Optimization

Web Developer Tools

Lazy Loading, Resizing Images and WebP format

Useful resources

If you want to learn more about Frontend stuff, you can visit the links below. I’ve used most of them to find answers to my questions and get valuable knowledge.

Freecodecamp – is a free educational platform where you can learn about Frontend and actually code your projects side by side: HTML, CSS, JavaScript, Databases and more. Everything is available for free and you can track your progress right on their website.

StackOverflow – is a Q&A website where you can ask or get answers related to programming. There you can find pretty much anything, starting from basic questions and troubleshooting in Frontend, or asking/helping others with Machine Learning, AI, Backend, videogames or Software. Staying active and helping others will gain a reputation and perks to customize your profile and make it more visible to others.

MDN Web Docs – is a large Firefox Web documentation site that can help you understand all the values, attributes, and other related information for the Frontend. HTML, CSS, JS, API, HTTP – everything is here in one place.

PageSpeed Insights or GTmetrix – website performance analysis tools that help measure how fast a website loads and how well it performs for users.

CSS Tricks – community resource for designing and developing digital content. There you can find a lot of guides, tips and articles about CSS.

Pros and Cons of being a developer

Pros	Cons
High income potential Remote work opportunities Flexible schedule Global job market access Strong demand for skills Creative problem-solving Continuous learning Career growth opportunities Ability to build personal projects Option for freelancing or entrepreneurship	Constant need to learn Mental fatigue Risk of burnout Sedentary lifestyle Tight deadlines Repetitive or legacy work Impostor syndrome Market instability Isolation with remote jobs High responsibility for mistakes

• Twitter
• Telegram
• YouTube
• Instagram
• Reddit