CSS Position: Relative vs Position Absolute

The CSS position property defines, as the name says, how the element is positioned on the web page. There are several types of positioning: static, relative, absolute, fixed, sticky, initial, and inherit. First of all, let’s explain what all of these types mean.

Static – this is the default value, all elements are in order as they appear in the document.
Relative – the element is positioned relative to its normal position.
Absolute – the element is positioned absolutely to its first positioned parent.
Fixed – the element is positioned related to the browser window.
Sticky – the element is positioned based on the user’s scroll position.

Now that we have explained the basics, we will talk more about the two most commonly used position values – relative and absolute.

Link: https://dzone.com/articles/css-position-relative-vs-position-absolute?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

A Full-screen Bootstrap Carousel with Random Initial Image

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load.
But before digging into those extensions, let’s start by creating a carousel based on the default styles.
Building the Carousel
To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:
[code language=”html"]

<!– Indicators –>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!– Wrapper for slides –>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption d-none d-md-block">
<h5>First Image</h5>
</div>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<!– more slides –>
</div>
<!– Controls –>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
[/code]
Notice that each of our images contains the custom data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.
The next step is to initialize the carousel via JavaScript and modify the predefined values of the interval and pause configuration properties. Take note that we choose to set the value of the pause property to false because we always want the cycling to be active:
[code language="javascript"]
$(‘.carousel’).carousel({
interval: 6000,
pause: "false"
});
[/code]
Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:
See the Pen Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.

Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%

Link: https://www.sitepoint.com/full-screen-bootstrap-carousel-random-initial-image/

Basic HTML for Everyone

There are so many editors and plugins available that knowing the basics of HTML is no longer required to create a site.
The problem with this is that if you don’t know a few basics, you can easily get into real trouble and have to hire a pricey developer to fix what may be a minor problem. Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.

Link: https://dzone.com/articles/basic-html-for-everyone?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Get Your SVGs Out of Your HTML

After this holiday season, many of us would like to lose a little weight, page weight that is. In my app, CodeTriage, I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire" bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.
Here’s the raw SVG:

Link: https://dzone.com/articles/get-your-svgs-out-of-your-html?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Common Front-End Mistakes That Cause Layout Problems

Successful online services like marketing and e-commerce websites rely on exceptional customer experiences. As a front-end developer, it’s your job to create flawless layouts, so your customer can complete necessary actions (like submit a sign-up form or purchase a Christmas gift). As you probably know, layout issues can cause users to distrust your website, so you’ll want to fix them up ASAP. These are some of the most common front-end mistakes that cause layout problems on websites, using examples from our website, Raygun.com (in a test environment, of course!).

Link: https://dzone.com/articles/common-front-end-mistakes-that-cause-layout-proble?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Using CSS: An Introduction to the Basics

Want to know how to design cool web interfaces using CSS (Cascading Style Sheets)? Well, it’s super easy and this article will dig deep to show you how you can use CSS to design these interfaces.
For starters, the best way to define CSS is by showing you these two images from Twitter. The difference between the two images that meets the eye is CSS.

Link: https://dzone.com/articles/using-css-to-design-cool-web-interfaces?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev