Image for post
Image for post

📄 Table of contents

  • Responsive Images
  • Grid Layout

◉ Why css ‘reset’ is important for the web developer?

As a web developer, you can have zero lines of code in your stylesheet and your HTML will look slightly different depending on which browser you view it in.

That’s why we reset it. On reset-ting, we override any styling that you would otherwise inherit.

To ensure that any website will look the same across different browsers, everyone must reset or start about every project with a few lines of code in their top-level CSS file that look something like this:

By default, an element’s height and width are determined in the following…


Image for post
Image for post

📄 Table of Contents

Control Flow: conditional statements

Looping / Iterator


Image for post
Image for post

📄 Table of Contents

Introduction / History

Ruby is a “dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.” created by Matz.

Why Ruby ?

For me the first reason to learn Ruby was that it is, in fact, a beautiful programming language. It is really natural to code it and always express my thoughts.

The second main reason was Rails. The well known framework that Twitter, Basecamp, Airbnb, Github, and so many companies use.

How do I run a Ruby file?

It’s easy — just create a file with the extension . rb , navigate to that file’s directory from the command line, and run it using $ ruby filename. rb (the dollar sign is just the command prompt). You’ll be able to gets from and puts to the command line now! …


Image for post
Image for post

📄 Table of contents

  • Global CSS Reset

px, em, rem

em

An em is equal to the computed font-size of that element’s parent. For example, If there is a div element defined with font-size: 16px then for that div and for its children 1em = 16px.

Default font-size of the root element is provided by browser.

<div id="parent" class="parent">
Parent
<div id="outerChild" class="child">
Outer child
<div id="innerChild" class="child">
Inner child
</div>
</div>
</div>
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}

Here, you can see we gave font-size: 20px to.parent and font-size: 1.5em to.child. Computed font sizes of both .child(#outerChild


Alternatives to vanilla HTML

Image for post
Image for post

HTML is the first language that many developers learn. While learners of CSS and JavaScript soon encounter tools to augment these languages — such as Sass (for CSS) or Babel (for JavaScript) — the same is rarely true of HTML.

So, in this article, we’ll explore four of the most popular templating engines for HTML. We’ll look into why you might choose to use them, and where you’re likely to encounter them in other tech-stacks.

We have HTML in other languages

There are several technology-specific solutions to writing HTML.

  • React.js has JSX,
  • Ruby has eRuby (or ERB),
  • PHP has, well, “HTML in PHP”.
  • Java has JSP (JavaServer Pages)…

Image for post
Image for post

📄 Table of contents

  • Get Started with Bootstrap
  • Bootstrap CSS
  • Bootstrap v3.0 vs v4.0
  • Rules of the Grid

Bootstrap

Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web by using HTML, CSS and JS framework.

It contains mobile first styles throughout the entire library, instead of using them in the separate files.

The last stable release of Bootstrap v3.3.7 was in July 2016 and in August 2017, Bootstrap 4.0.0 beta version released.

How to Get Started with Bootstrap.

Some people will ask or explain “How to install Bootstrap”. Well, you don’t really “install” it.


Image for post
Image for post

Why should I switch my website to RWD?

Your website looks great of the desktop screen but it may not be true when your site is viewed on a smartphone or a tablet. Once you make the design responsive, the website will look good (and readable) on all screens.

With Responsive Design you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:

  • It saves time and money as you don’t have to maintain separate websites for desktops and mobile phones.
  • Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while others link to your desktop site. …


Image for post
Image for post

📄 Table of contents:

1. What is DOM?

2. Shadow DOM

3. Virtual DOM

4. Differences between Shadow DOM and Virtual DOM

5. Conclusion

DOM (Document Object Model) is a fundamental concept in front-end, and for sure, everyone who tried to learn programming has heard about it more than once. For beginners, it’s not so easy to understand what it exactly is and how to manipulate it. DOM manipulation isn’t so easy and comfortable, and the most important, it brings a lot of issues with performance. Nowadays, there are two essential concepts of DOM came with progressive web frameworks like Angular, React.js or Vue.js, Shadow DOM and Virtual DOM. …


Image for post
Image for post

Server Based Authentication (The Traditional Method)

Since the HTTP protocol is stateless, this means that if we authenticate a user with a username and password, then on the next request, our application won’t know who we are. We would have to authenticate again.

The traditional way of having our applications remember who we are is to store the user logged in information on the server. This can be done in a few different ways on the session, usually in memory or stored on the disk.

As the web, applications, and the rise of the mobile application have come about, this method of authentication has shown problems, especially in scalability. …

About

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store