Web Development can be a complex task because it involves working in many technologies and languages like . 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. HTML, JavaScript and PHP, ASP.NET, My SQL and AJAX 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 can be applied to any character but never to half of a character. But you are wrong as there is a way to apply to half of any character. CSS CSS You can use the called which can be downloaded from Plugin HalfStyle GitHub Using this plugin you can style style each half or third of a character (and even full paragraph of text), , in a very simple manner. vertically or horizontally Installation Download the plugin zip file from GitHub and extract the folder to your website. Next add the reference to to your webpage’s head section like: HalfStyle CSS an JS, and jQuery <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 to it (replace character with the character you want to style like ‘X’ or ‘Y’). data-content="character" 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 — ‘ ’, ‘ ’, ‘ ’, ‘ ’ are custom CSS class which are defined in file. hs-horizontal-half hs-horizontal-third hs-vertical-half hs-vertical-third HalfStyle.css You can change their properties like color, font, etc inside the ‘ ’ and ‘ ’ classes accordingly to your needs. : before :after For a Text Add class and data attribute to the element containing the text. .textToHalfStyle data-halfstyle=“[-CustomClassName-]” 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 ‘ ’ reloads the page. So in order to change the URL of the page without reloading it, you should use the the ‘ ’ method. window.location.href pushState() 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 method to change the URL to . This method has 3 parameters: pushState() about.html — The state object is a JavaScript object which is associated with the new history entry created by . Whenever the user navigates to the new state, a event is fired, and the state property of the event contains a copy of the history entry’s state object. 1. state pushState() popstate — A short title for the state to which you’re moving. title — The new URL is given by this parameter. Note that the browser won’t attempt to load this URL after a call to , but it might attempt to load the URL later, for instance after the user restarts the browser. URL pushState() Note that you can reload the contents of the new URL by using the . The 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 class and . jQuery Load method - load() .load() CSS 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 transparent dot image in format. I have this image created in Photoshop and it’s size is just . This image is in light grey color and is shown below: 1px*1px .png 95 bytes Transparent Image Now, to use this image as a background, I have to use the URL value of background property of like this: CSS 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 property. Also note the background property where I have set the image as the background for the ‘transparentDiv’. position: absolute 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 r property. All you have to do is add this property to the ‘.transparentDiv’ CSS and comment out the previous background property like shown below: backgound-colo background-color: rgba(240, 240, 240, 0.5);/*background: url("Content/Images/translucent.png") repeat;*/ I have specified the light grey background in color format as 240, 240, 240 and also used 0.5 as opacity to bring the desired transparent look. rgba 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 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: line-height 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 that will vertically align the text contained in the div. CSS .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 property while the child elements are provided with 2 properties which are: display: table 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 while the 3 children are given the following 2 important properties: display: table 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 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. viewport-percentage These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length). We can make use of is equal to 1% of the viewport’s height. That is to say, is equal to the height of the browser window. vh: 1vh 100vh 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 for the p element, as shown below: 100vh <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 tutorial is the place where you can learn all the ways to work with checkbox’s checking or un-checking. jQuery Checkbox Checked Problem 7: Align Text and Elements in Horizontally Middle manner Use to place the text in the horizontally middle in the element. For example add the following div in your web page: text-align: center <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 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. clap for a few times And as always, to get notified whenever I publish a new article on Medium. follow me Also check my other article in HACKERNOON— ASP.NET Core — How to use Dependency Injection in Entity Framework Core

Fetch

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@yogihosting

RELATED STORIES