Did you know that you can use javascript to automatically scroll to the bottom or top of any webpage. All you need is the code below & firefox..
var scroll = setInterval(function(){ window.scrollBy(0,8000); }, 2000);
To use this piece of javascript I simply opened up the browsers inspector window by pressing “CTRL+SHIFT+C”, clicked on “CONSOLE” & then pasted in the javascript to the box at the bottom. With the code pasted into the box I then pressed enter & left the browser to do it thing. When finshed I closed the inspector & began looking for what it was I wanted to find.
With the above javascript you can change the numbers at the end to scroll further or less & up or down....
CSS Grid is a CSS layout which has a two-dimensional system and can handle both rows & columns. The basics are that you apply CSS rules to both the parent element and to the element's children. The parent elements become the grid containers, and the children become items within the grid. Though CSS Grid is two-dimensional it can still do pretty much do everything the same as Flexbox. Some people though may still try and say that CSS Grid is only good for multi-dimensional layouts. This is far from true as CSS Grid is just as great at one-dimensional layouts as it is with multi-dimensional. Below is a basic example showing you that all you need to get started is pretty minimal and easy to understand.
Every web browser uses what is known as a base stylesheet. This ensures that any HTML is rendered somewhat reasonably when you forget to include a piece of custom CSS. You know things like, blue for links that you've yet to visit, purple for links that you've already visited, bold for the likes of strong tags & different text sizes for heading. All those things and more are not always the same browser to browser. NO.. Not all browsers use the same base stylesheet, so that custom CSS you've just spent hours, maybe even days creating might be affected in some way by a default style that's implemented within your browsers base stylesheet. The easiest and most simplistic way to keep your CSS intact is to include a CSS reset. Sometimes though, people are happy with what their browser’s base stylesheet provides. Things such as font weights, line height, bullet points and other styles are often fine. If they’re not, then they can easily be adjusted.
What is a CSS reset :?
A CSS reset essentially provides a blank canvas so that any styles applied are sort of almost certain to be your own. Most CSS resets require you to re-style all your elements, which could make your CSS file much larger than you'd like. But at the same time it will also reduce browser compatibility issues.
Should I use a CSS reset :?
Should you use a CSS reset ?? Well that really depends. Like if you have a pretty small or basic website then creating and using a CSS reset might not be worth the time and effort. Though if you have a pretty large site or a site that just has tons of elements, then using a CSS reset might just the right thing. CSS resets may be appealing and work for you, but they'll not be for everyone. You'll need to weigh everything out and look at everything for yourself.
When coding a hamburger menu most developers or coders position the menu absolute, when in actual fact it should be the content that is positioned once the sidebar is opened. Instead of positioning the menu itself, simply position everything else that's in the menu. Below is some example code, followed up with explanatory comments....
HTML
<html>
<head></head>
<body>
<div class="sidebar">Hamburger menu links go here</div>
<div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">🍔</button></div>
</body>
</html>
CSS
/* Arbitrary CSS variable values for explanatory purposes */
:root {
--sidebar-width: 100px;
--sidebar-bg-colour: blue;
}
.sidebar {
display: none;
position: relative;
width: var(--sidebar-width);
}
@media (max-width: 767px) {
html.sidebar-is-open .sidebar {
display: block;
/*
The sidebar is just rendered in default position,
as it appears in the document flow
*/
}
html.sidebar-is-open .main-content {
position: fixed;
/*
It is the main content that is positioned.
This is the crux of the implementation. The rest is all sugar.
Cons: the body will scroll to the top, losing your user's scroll position
*/
/* prevents resizing from its original full-screen width */
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/* Optional enhancement:
make the overscroll on iPhone the same colour as the sidebar */
html.sidebar-is-open body {
background-color: var(--sidebar-bg-colour);
}
.sidebar {
background-color: var(--sidebar-bg-colour);
}
}
const documentElement = document.querySelector("html");
const contentElement = document.querySelector(".main-content");
const sidebarElement = document.querySelector(".sidebar");
const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");
const openSidebar = () => {
/* How you trigger the change is up to you */
documentElement.classList.add("sidebar-is-open");
};
const closeSidebar = () => {
documentElement.classList.remove("sidebar-is-open");
/* Sidebar is closed, so keeping event listener is just a waste of resources
and source of bugs if openSidebar() is run again */
contentElement.removeEventListener("click");
};
const toggleSidebar = () => {
sidebarIsOpen() ? closeSidebar() : openSidebar();
};
Here's a simple piece of CSS code that will help you add a background image to any web page and make it take up the full page width & height. Simply add the code below to your “.css” file and then change the path to the image.
CSS
html {
background: url(siteimages/whatever.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ever wanted to create one of those neat look search boxes that used to be found on apples website ?? Well here's the HTML & CSS code to create just the thing. Note that with search boxes you can change the action=“http://www.duckduckgo.com/search" to any search engine you like. I've chosen to use Duckduckgo because that's my search engine of choice.
[ NOTE THE “FORM” & “INPUT” HTML WAS NOT SHOWING CORRECTLY SO I HAD TO ENTER A SPACE AT THE START AFTER “<“. PLEASE REMOVE THIS SPACE BEFORE USING THIS CODE ]
You can style multiple html links differently on the same page simply by adding a class to the link & then some css. For example the two linsk below would be styled with the css that follows....
