7 Common Web Development problems which every developer from Beginners to Experts should know [with multiple solutions]

Web Development can be a complex task because it involves working in many technologies and languages like HTML, JavaScript and PHP, ASP.NET, My SQL and AJAX. There can be some problem where you can get stuck from a few hours to a few days. It may be very frustrating since there happens to be no place to go, and find your solution. In my web development career I happened to stuck on many problems but fortunately I got their solutions on time.

I therefore decided to write this tutorial to point out 5 Common Web Development problems which every Beginner, intermediate or Expert developer should know to solve. So without wasting any further time let us start with them one by one.

Problem 1: Apply CSS to half of a Character

Most of us can think that CSS can be applied to any character but never to half of a character. But you are wrong as there is a way to apply CSS to half of any character.

You can use the Plugin called HalfStyle which can be downloaded from GitHub

Using this plugin you can style style each half or third of a character (and even full paragraph of text), vertically or horizontally, in a very simple manner.

Installation

Download the plugin zip file from GitHub and extract the folder to your website.

Next add the reference to HalfStyle CSS an JS, and jQuery to your webpage’s head section like:

<link href="HalfStyle-master/css/halfstyle.css" rel="stylesheet" />
<script type="text/javascript" src="HalfStyle-master/js/jquery.min.js"></script>
<script type="text/javascript" src="HalfStyle-master/js/halfstyle.js"></script>

Now you are ready to use it.

For a single character

Add the classe ‘.halfStyle’ to the element containing the character you want to be half-styled. And give attribute data-content="character" to it (replace character with the character you want to style like ‘X’ or ‘Y’).

Example 1: Character X is styled horizontally half

<span class="halfStyle hs-horizontal-half" data-content="X">X</span>

Horizontal Half

Example 2: Character Y is styled horizontally third

<span class="halfStyle hs-horizontal-third" data-content="Y">Y</span>

Horizontal Third

Example 3: Character X is styled vertically third

<span class="halfStyle hs-vertical-third" data-content="X">X</span>

Vertical Third

Example 4: Character Y is styled vertically half

<span class="halfStyle hs-vertical-half" data-content="Y">Y</span>

Vertical Half

The CSS Classes — ‘hs-horizontal-half’, ‘hs-horizontal-third’, ‘hs-vertical-half’, ‘hs-vertical-third’ are custom CSS class which are defined in HalfStyle.css file.

You can change their properties like color, font, etc inside the ‘: before’ and ‘:after’ classes accordingly to your needs.

For a Text

Add .textToHalfStyle class and data attribute data-halfstyle=“[-CustomClassName-]” to the element containing the text.

Example 1: Text styled vertically half

<span class="textToHalfStyle" data-halfstyle="hs-vertical-half">Half-style, please.</span>

Text Styled Vertical Half

Example 2: Text styled vertically third

<span class="textToHalfStyle" data-halfstyle="hs-vertical-third">Half-style, please.</span>

Text Styled vertical third

Example 3: Text styled horizontally third

<span class="textToHalfStyle" data-halfstyle="hs-horizontal-half">Half-style, please.</span>

Text Styled Horizontal Third

Example 4: Text styled horizontally half

<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>

Text Styled Horizontal Half

Problem 2: How to modify the URL without reloading the page

As every beginner JavaScript programmer knows that ‘window.location.href’ reloads the page. So in order to change the URL of the page without reloading it, you should use the the ‘pushState()’ method.

Example: Create a button which on click will change the URL:

<button onclick="changeURL()">Click here</button>
<script>
function changeURL() {
    window.history.pushState('page2', 'Title', '/about.html');
}
</script>

I used the pushState() method to change the URL to about.html. This method has 3 parameters:

1. state — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry’s state object.

title — A short title for the state to which you’re moving.

URL — The new URL is given by this parameter. Note that the browser won’t attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser.

Note that you can reload the contents of the new URL by using the jQuery Load method - load(). The .load() method is an AJAX method that is so powerful that it can not only fetch full HTML contents of another page but also contents of elements based on their CSS class and Ids.

Problem 3: Give text a transparent background

There are 2 ways to solve this problem, which are:

1. Make a transparent background image

Here you create a small 1px*1px transparent dot image in .png format. I have this image created in Photoshop and it’s size is just 95 bytes. This image is in light grey color and is shown below:

Transparent Image

Now, to use this image as a background, I have to use the URL value of background property of CSS like this:

background: url("Content/Images/translucent.png") repeat;

Let us see an example for this.

Create 2 divs like this:

<div class="containerDiv">
    <div class="transparentDiv">
        How is the weather in your city?
    </div>
</div>

Now add the CSS for these divs to your stylesheet as shown below:

.containerDiv {
  height: 200px;
  width: 500px;
  background-color: blue;
  position: relative;
}
.transparentDiv {  
  color: orange;
  font-size: 38px;
  padding: 30px;
  background: url("Content/Images/translucent.png") repeat;
  position: absolute; 
  left: -25px;
  width: 100%;
  top: 40px;
}

Note that the ‘transparentDiv’ is situated over the ‘containerDiv’ by providing it with position: absolute property. Also note the background property where I have set the image as the background for the ‘transparentDiv’.

When you run this code in your web page then it will look like:

Transparent background using transparent background image

2. Use CSS 3 Background Color property

Instead of using the background transparent image (explained above), you can use CSS 3 backgound-color property. All you have to do is add this property to the ‘.transparentDiv’ CSS and comment out the previous background property like shown below:

background-color: rgba(240, 240, 240, 0.5);
/*background: url("Content/Images/translucent.png") repeat;*/

I have specified the light grey background in rgba color format as 240, 240, 240 and also used 0.5 as opacity to bring the desired transparent look.

Transparent background using CSS3 background-color property

Problem 4: Vertically center text with CSS

There are many ways to vertically align text. You can do it using line-height property of CSS or by using absolute positioning. In my opinion you can do this very easily by using only the ‘display’ property. The 2 ways for doing this are:

1. Using the display: flex property

Here I will use the Flexbox and give the element the following CSS properties:

display: flex;
align-items: center;

Example: Add the following div in your web page

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Also add the CSS that will vertically align the text contained in the div.

.box {
    height: 150px;
    width: 300px;
    background: #CCC; 
    color: #000;
    font-size: 24px;
    font-style: oblique;
    text-align: center;
    display: flex;
    align-items: center;
}

Note: The last 2 properties does the vertically alignment of the texts.

Now run the code in your web page and you will see the texts aligned vertically center as shown below:

Vertically Center Alignment of text using display flex

2. Using the display: table property

In this approach, using CSS I simulate table behavior since tables support vertically center alignment. Here the parent div is provided with display: table property while the child elements are provided with 2 properties which are:

display: table-cell;
vertical-align: middle;

Example: Let me show an example that contains 3 div (aligned side by side). Each div have different lengths of text which are all aligned in vertically center manner.

Add the following code to your page:

<div class="verticallyCenter">
    <div>First</div> 
    <div>This is the Second div</div>
    <div>Third div</div>
</div>

There is one parent div having CSS class called ‘verticallyCenter’. This div contains 3 child div.

Next add the following CSS to your page:

.verticallyCenter {
    background-color: red;
    display: table;
    height: 100px;
}
.verticallyCenter div {
    font-size: 25px;
    display: table-cell;
    vertical-align: middle;
    width: 33%;
    padding: 5px;
}

Notice that the ‘verticallyCenter’ div contains is display: table while the 3 children are given the following 2 important properties:

display: table-cell;
vertical-align: middle;

Now run your web page in your browser and it will look like:

Vertically Center Alignment using display table

Problem 5: How to make a div 100% height of the browser window

You can do this by using the viewport-percentage lengths which are relative to the size of the initial containing block (i.e body tag). When the height or width of the window changes, they are scaled accordingly.

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

We can make use of vh: 1vh is equal to 1% of the viewport’s height. That is to say, 100vh is equal to the height of the browser window.

So the follow div (given below) is equal to the height of the browser window, regardless of where it is situated in the DOM tree:

<div style="height: 100vh">Some content</div>

How is 100vh different to 100%?

Consider the below example:

<div style="height:200px">
  <p style="height:100%;">Hello, world!</p>
</div>

Here the ‘Hello world’ paragraph element gets the height of 200px because of the parent div has been provided with the height of 200px.

Now change height to 100vh for the p element, as shown below:

<div style="height:200px">
  <p style="height:100vh;">Hello, world!</p>
</div>

Now the paragraph element will be 100% height of the body regardless of the div height.

Problem 6: How to know which radio button is selected

For finding out which radio button is selected you can use either jQuery or JavaScript. Suppose there are 3 radio buttons for selecting the sex of a person. All of these radio buttons have a common name called ‘sex’.

<input type="radio" name="sex" value="Male" />Male
<input type="radio" name="sex" value="Female" />Female
<input type="radio" name="sex" value="Unspecified" />Unspecified

Now in your jQuery code create the click event of these radio buttons. Then use the .val() method to find out the value of the selected radio button. This code is given below:

$("input[name='sex']").click(function () {
  alert($(this).val());
});

The checkbox is a similar control like radio button except that you can select more than one checkbox for an option. The jQuery Checkbox Checked tutorial is the place where you can learn all the ways to work with checkbox’s checking or un-checking.

Problem 7: Align Text and Elements in Horizontally Middle manner

Use text-align: center to place the text in the horizontally middle in the element. For example add the following div in your web page:

<div class="container">
    Lorem ipsum dolor sit amet
</div>

Also add the below CSS to the stylesheet:

.container {
  width: 500px;
  background-color: brown;
  color: orange;
  font-size: 38px;
  text-align: center;
}

Notice that I have given text-align as center in the CSS. When you run this in your browser the text will be placed in the center of the div. This is shown by the below image:

Using text-align: center

When you want to align a whole element to the center of its parent then you use the ‘margin: auto’ in the CSS. This approach is used to align whole of the websites content to the middle of the page.

Now update the above div to include a child div which will be placed in the center. The code is given below:

<div class="container">
  <div class="centerDiv">
    Lorem ipsum dolor sit amet
  </div>
</div>

Add the following CSS for the centerDiv:

.centerDiv {
  background: #67b91e;
  width: 200px;
  margin: auto;
}

Notice the margin: auto given to the centerDiv.

Now run the web page in your browser and you will see the centerDiv aligned at the center of it’s parent. Check the below image:

Align Child in the middle of the parent

Conclusion

I hope you found something new to add to your web development knowledge in this tutorial. If it is so then don’t forget to clap for a few times to show your like. It will not only bring a smile to my bad face but also motivate me to write more and more good articles to web developers.

And as always, follow me to get notified whenever I publish a new article on Medium.

Also check my other article in HACKERNOON— ASP.NET Core — How to use Dependency Injection in Entity Framework Core