Javascript, HTML5, CSS3 – fresh articles, tutorials, news
This post introduces Web Demystified, a new video series targeting web makers — everyone who builds things for the web: designers, developers, project and team managers, students, hobbyists, and experts. Our goal is to provide basic information for beginners, with subject matter that will also serve as a refresher on web fundamentals – beginning with episodes that describe the web itself, and HTML, its first language.
Link: https://hacks.mozilla.org/2018/04/a-new-video-series-web-demystified/
So where do we begin? All the way at the beginning of time! 13.8 billion years ago, the universe was created in what is known as The Big Bang.
Well, maybe we don’t have to go that far back. Let’s just start with where this HTML thing came from.
The Significance of a Universal Design Approach
Inclusive or universal design ensures that the content of an application is easily recognized by screen readers (SR) upon which visually impaired people usually rely. Also, one can navigate through the content of a website using a keyboard alone, in a logical order. This is particularly helpful for people with mobility issues who may not be able to use a mouse. This is also useful for people who prefer to use a keyboard over a mouse. Similarly, providing closed captioning for video content is extremely useful for people with hearing-impairment. Again, this is also helpful for users who would prefer to view a video without sound, for example, while in a public place. This is especially helpful in creating social media content, where videos can be viewed in mute mode.
IMAGE 1: Snapshot of a video with closed captioning (CC), which helps people with hearing impairment to watch and understand video content.
Choosing color contrast and text ratios will help people with color blindness and would also offer better readability for other users.
Web developers today speak of frameworks, cores, web apps, and integrations but they hardly spare a word for the language all these are built upon: HTML. The HyperText Markup Language has been with us since the very beginning of the World Wide Web and has evolved together with the internet to offer an easy and incredibly usable way to create web pages. Without them, no website could exist – even those built entirely in Flash (there were quite a few back in the day) needed it to embed their interactive animations. HTML is everywhere, from the search results of Google to mobile web apps. Now, 25 years after its first implementation, let’s take a brief look at its history.
HTML
HyperText Markup Language was first proposed by the famed inventor of the World Wide Web, Sir Timothy John “Tim" Berners-Lee. He built this simple markup language based on SGMLguid, the standard documentation format used internally at CERN. The first publicly available description of the language only contained 18 elements, all of them inspired by SGMLguid with the exception of the hyperlink tag.
One of the biggest confusions in web design is caused by none other than the font-size property.
In CSS, there are multiple units that can be used which can only cause the designer additional headache. In this article, we will clarify the usage of those units and any misconceptions.
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.
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"]
Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%
Link: https://www.sitepoint.com/full-screen-bootstrap-carousel-random-initial-image/
If an image on your page isn’t really there for any purpose, you might struggle to come up with meaningful alt text for it, so it’s quite common to leave the alt attribute out of the image tag:
![](background.jpg" /><br />
Apart from this technically being invalid HTML, this isn’t useful to those who benefit from the alt text.</p>
<p><img class=)
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.
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: