Unlocking the Power of CSS Grid: Mastering Layouts for Stunning Web Designs

 

Welcome to the world of CSS Grid, where layout possibilities are limitless!** If you're ready to create sophisticated, responsive, and visually captivating web designs, this powerful CSS property is your key to success. Grab your toolkit and let's dive in!
 

What is CSS Grid?

Imagine a blank canvas divided into precise rows and columns, ready for you to arrange elements with unparalleled control. That's CSS Grid in a nutshell. It offers a two-dimensional layout system that empowers you to create intricate and adaptable web page structures with ease.

Key Concepts to Grasp:

- Grid Container: The parent element that defines the grid structure.
- Grid Items: The child elements positioned within the grid.
- Grid Lines: Horizontal and vertical lines that create grid tracks.
- Grid Tracks: The spaces between grid lines.
- Grid Cells: The individual units formed by grid tracks.
- Grid Areas: Named regions within the grid, combining multiple cells.
 

Harnessing the Grid Power: 

Basic Setup

1. Activate the Grid: Set the `display` property of the grid container to `grid`.
2. Define Rows and Columns: Use `grid-template-columns` and `grid-template-rows` to create the grid structure.
 

Example:

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* Three columns: fixed, flexible, fixed */
  grid-template-rows: repeat(4, 100px); /* Four rows of equal height */
}

Positioning Grid Items:

- Explicit Placement: Control item placement with properties like `grid-column-start`, `grid-column-end`, `grid-row-start`, and `grid-row-end`.
- Naming Grid Areas: Assign names to grid areas and use `grid-area` to position items.
 

Manipulating Grid Items:

- Alignment: Use `justify-items` and `align-items` for horizontal and vertical alignment within cells.
- Distribution: Use `justify-content` for horizontal distribution of items within the grid container.
- Spanning Multiple Cells: Use `grid-column-end`, `grid-row-end`, or the shorthand `grid-area`.

Ready to Flex Your Grid Muscles?

CSS Grid offers a vast range of possibilities for crafting dynamic and visually engaging layouts. Explore its features, experiment with different approaches, and unleash your creativity!
 

Additional Tips:

- Visualize your grid structure with tools like Firefox's Grid Inspector or Chrome's DevTools.
- Utilize grid-specific properties to fine-tune your layouts.
- Consider using grid templates for common patterns.
- Embrace responsiveness with grid media queries.

What is DOM?

 

The Power Javascript brings to the table is DOM manipulation. But what is DOM? DOM is read as Document Object Model. It is a hierarchical tree like structure which depicts the entire webpage. It has different Nodes as its branches and they have a parent-child relation. Modern web browsers are able to read this structure and make changes accordingly. With Javascript one basically has the power to manipulate this structure.

 

 

 

Here the window is the root of the tree. The window provides us with predefined objects and methods. For example, console is an object provided by the window element. One can use this object to log something to the console by typing,

window.console.log('your message') 

The document is the parent element of all your html content and the one you'll be working with the most as a web dev. This gives us access to the html using document.body [targets the body of html], document.head [targets the head of html] etc. Some of you may also be familiar with the methods this provides such as Document.queryselector() and Document.getElementById().

In conclusion, DOM is a tree-like structure that is present on every webpage. Javascript gives is the ability to access with by targeting different objects and by utilizing various methods.

Vim basics

 

Vim is a highly configurable text editor that is known for its efficiency and power. It was designed as a more advanced version of the vi editor, which was included in Unix systems. Vim is available on a wide variety of platforms, including Linux, MacOS, and Windows. It is known for its modal editing, which allows users to switch between different modes for different tasks, such as inserting text, navigating the document, and executing commands. Vim also has a large number of built-in features and can be extended with plugins to add even more functionality.

I recently started learning vim and I think it has made writing code more enjoyable for me. So I'm sharing with you all so you can give it a try.

The most important thing to know is that vim has three modes

1. Normal mode - Usually used to move around in a file
2. Insert mode - Used when editing and writing code
3. Visual mode - Used for selecting and manipulating code

Here are some basic vim commands:

1. Cursor Movement

• Use the h, j, k, and l keys to move the cursor left, down, up, and right, respectively. [ like using arrow keys]

• Use the 0 (zero) key to move the cursor to the beginning of the line.

• Use the $ key to move the cursor to the end of the line.

• Use the G key to move the cursor to the end of the file.

• Use the gg key to move the cursor to the beginning of the file.

• Use the % key to jump to matching brackets or parentheses.

• Use the f key followed by a character to jump to the next occurrence of that character.

• Use the F key followed by a character to jump to the previous occurrence of that character.

• Use the t key followed by a character to jump to the character before the next occurrence of that character.

• Use the T key followed by a character to jump to the character after the previous occurrence of that character.

2. Insert Mode actions

• i - insert before the cursor

• I - insert at the beginning of the line

• a - insert (append) after the cursor

• A - insert (append) at the end of the line

• o - append (open) a new line below the current line

• O - append (open) a new line above the current line

3. Editing

• dd - delete the current line

• D - delete from the cursor to the end of the line

• x - delete the character under the cursor

• X - delete the character before the cursor

• p - paste the clipboard after the cursor

• P - paste the clipboard before the cursor

• u - undo the last change

• U - undo all changes to the current line

• . - repeat the last change

• :w - write (save) the changes to the file

• :q - quit Vim

• :wq - write (save) the changes and quit Vim

• :q! - quit Vim and discard all changes

More vim resources:

Primeagen: https://www.youtube.com/playlist?list=PLm323Lc7iSW_wuxqmKx_xxNtJC_hJbQ7R

VimSchool: https://vimschool.netlify.app

Web Development Essential Concepts

1. Working principle of internet
2. What is Https
3. IP adress
4. World Wide Web
5. URL
6. Hardware
7. Software
8. Web Browsers
9. Web Servers
10. Domains and DNS
11. Html
12. Css (optionally css frameworks)
13. JavaScript (optionally js frontend frameworks and libraries)
14. Links
15. Accessibility
16. Browser Events and APIs
17. NodeJS
18. NPM
19. Error status codes
20. SEO
21. Website Optimization
22. Cloud Hosting
23. Web Security
24. Site Maintenance

Web Dev is a tricky skill to learn and one may never be able to fully learn it. But learning these concepts will at the very least get you started on the right track.

Virtualization (QEMU).

In their own words, "QEMU is a generic and open source machine emulator and virtualizer." 

QEMU can use other hypervisors like Xen or KVM to use CPU extensions (HVM) for virtualization. When used as a virtualizer, QEMU achieves near native performances by executing the guest code directly on the host CPU. 

In simple terms, one can use a different opearating system on top of another operating system whilst achieving real hardware performance.

Another way to use QEMU is User Mode Emulation, where QEMU can launch processes compiled for one CPU on another CPU. In this mode the CPU is always emulated.

 The awesome thing is QEMU is supported on both Windows and Linux (including macos). In my personal experience it works best in Linux rather than windows.

 

Required packages for QEMU on Linux :

Arch:

 

sudo pacman -S qemu virt-manager virt-viewer dnsmasq vde2 bridge-utils openbsd-netcat ebtables iptables libguestfs

Debian:

sudo apt install qemu-kvm qemu-system qemu-utils python3 python3-pip libvirt-clients  libvirt-daemon-system bridge-utils virtinst libvirt-daemon virt-manager

For full setup of QEMU refer to - 

1. https://wiki.archlinux.org/title/QEMU

2. https://christitus.com/vm-setup-in-linux/

Windows:

The windows installation is a bit tricky since it requires you 

to partition your drive and install it on that partition as you 

would an operation system.

A comprehensive guide for windows can be found at

 https://www.minitool.com/partition-disk/qemu-for-windows.html 

In conclusion QEMU allows you to run different OS's on a single host machine

 without any performance bumps so it is a great alternative to dual booting. 

The one thing to keep in mind is it uses large amount of system resources. 

So it may affect system with low specs negatively. 

 

What is Docker?

 

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. It basically bundles all your project as well as its dependencies so anyone can use it in any device. This basically solves any version incompatibility problems which is more prevalent than one thinks. 

How Docker works?

Docker uses containers under the hood. A container is a sandboxed process running on a host machine that is isolated from all other processes running on that host machine. 

Docker uses a client-server architecture. The Docker client talks to the Docker daemon, which does the heavy lifting of building, running, and distributing your Docker containers. The Docker client and daemon can run on the same system, or you can connect a Docker client to a remote Docker daemon.

To summarize, a container:

• Is a runnable instance of an image. You can create, start, stop, move, or delete a container using the Docker API or CLI.
• Can be run on local machines, virtual machines, or deployed to the cloud.
• Is portable (and can be run on any OS).
• Is isolated from other containers and runs its own software, binaries, configurations, etc.

 

Most used docker commands:

 1. docker run - Creates an image

 2. docker ps - Lists all active images

 3. docker images - Lists all local images

 4. docker rm - Deletes container

 5. docker build - Constructs new docker image (needs a dockerfile: https://docs.docker.com/engine/reference/builder/) 

In conclusion, docker has become essential for modern day development be it a personal project or group project. It makes life way easier in my opinion, especially for large scale projects.