Javascript can do alot, but it's really over-used. HTML and CSS are surprisingly
powerful on their own, so let's have a look at some of the things you can achieve without javascript
(or a backend ) - such as animated diagrams etc.
it's much slower to do alot with Javascript, it can as well cause content to jump around the page after loading, and breaks your site for people with crappy browsers.
As a matter of fact, I have discovered just how much CSS and HTML has to offer, and I'd love to share some of that with you today. I know a lot of people are a bit scared of CSS, and see it as black magic, so I won't be showing you anything too complicated. Instead, I'm just going to focus on simple techniques and overlooked features - things you could easily incorporate into your own sites/project.
1. Animating SVGs
You probably know that you can animate HTML elements with CSS. However, did you know that you can also animate SVGs, in exactly the same way? One of my favourite techniques is setting the stroke-dasharray property to a high value, then animating stroke-dashoffset. That results in the path being 'drawn' over time, or a line moving along a path, like in this animation of some fireworks:
If you want to learn more about CSS animations, I can recommend starting with the MDN guide. To create the SVGs, either use a visual editor like Inkscape, or a more dev-oriented tool like this one. Often it's easier to just write the SVG markup by hand, in which case MDN has a great reference page.
2. Sidebars
You want a side navigation bar that hides when it's not in use. Put away that script file, it can be done with CSS. We'll use transform to move it off-screen by default, then override that when the user hovers over the element. Importantly, we should also show the menu when you use the Tab key to select one of the links in the menu - an important step towards keeping our site accessible:
3. Sticky Positioning
PSA: position: sticky; exists now. Please stop reimplementing it with Javascript. Some of you are confused why I'm mentioning such a basic feature. If that's you, skip to the next section.
Some of you have no idea what I'm talking about, and are feeling pretty self-concious. When you want an HTML element to move down the page as you scroll, you can do that with plain CSS! Not only that, it actually works way better than a Javascript version:
Scroll down the page
And watch the blue square 🡖
The blue square follows you
As you scroll past it
And if you scroll back up
It goes back where it was
Notice how when you scroll down, the blue square is always in exactly the same position. It's easy to tell when someone has tried to DIY their sticky positioning, because the element always lags one frame behind when scrolling. The faster you scroll down, the higher up the screen it would be. Then, when you stop scrolling, it jumps to the correct position.
Sticky positioning is a combination of relative and fixed positioning. It's mostly used for navigation menus that should follow you as you scroll down the page. It's used on this page too, if you are viewing it on a large landscape screen. The panel to the right with face on it uses sticky positioning, meaning it will always be staring at you as you read the content.
To use sticky positioning, first you need to set position: sticky and provide distances for some (usually only one) of top, right, bottom, and left. When the element is scrolled past that position on the screen, it swaps to fixed positioning, and starts following you. If you scroll back, it returns to its original position and stays there. They don't follow you forever though - a sticky element will never move outside of its containing element.
It's a little difficult to wrap your head around, but I'd recommend reading through the MDN article on the position attribute. I use position all the time, so I think it's worth having a good understanding of all the possible values and what they do.
4. Accordion Menus
Accordion Menus are commonly used for FAQs, where you have a list of headers and each one can be expanded to show the content inside. This is another case of me telling you about a fairly basic feature of HTML+CSS, but <details> exists:
FAQ
Why is it called an accordion menu?
Because each part of it can expand and contract, like in an accordion. If you don't know what an accordion is, just imagine a cute fluffy cat. You still won't know what it is, but at least you'll feel better about not knowing.
Huh?
Huh.
If I use an accordion menu will it make me cool?
No, not unless you're designing a MySpace profile. The {"
"} element is cool though, and you can use that for a lot of things. I'm using
it on this page right below here, to show the code for each example!
The need for a top business owner or organization to have a professional, scalable, Fast, Optimized,Efficient, Very Secured web application (website) can never be over emphasized.
However, With this great tool (Web Application) Business Owners will definitely and Undoubtedly solidify their online presence, improve their Search Engine ranking, eliminate the likelihood of Missing out on search engine queries / results by prospective clients whom may search for a business like theirs on search engines like Bing and google, stay toe to toe with Compititors who already have a web application etc.
Thanks for reading
However, With this great tool (Web Application) Business Owners will definitely and Undoubtedly solidify their online presence, improve their Search Engine ranking, eliminate the likelihood of Missing out on search engine queries / results by prospective clients whom may search for a business like theirs on search engines like Bing and google, stay toe to toe with Compititors who already have a web application etc.
Read Now Top 15 Reasosns why you need a website for your BusinessYou don’t need to do all of these alone, We got you covered!! Contact us now your satisfaction is always our priority. price definitely won't be a problem.
Thanks for reading
| « Previous Meaning of Cache Memory | The Benefits and Importance of Cache Memory |
Next » What is Web Hosting | Types of Website Hosting| Different Web Hosting Service Providers |
Share This Article
Written by: DESTINY IDIKA
Reading time:
Published 2 Years Ago On Thursday, March 17, 2022
612 Views