CSS

Practicing CSS, below are links to pages where I attempt to master various aspects of CSS. Some of these links lead to pages where it is all my own code and some are pages where I copied snippets of code from somewhere else.


THIS PAGE

This page is practice

I edit the code on this page often. Simple css code. Practice, practice, practice, practice, practice, practice, Master.

SCROLL EFFECT

Working on scroll effect

While this code involves more that css. I discovered it while learning css. I got this code from a codepen promotional site where there were lots of other code snippets available. I bleive that you need a subscription to unlock the links needed to complete the code to display the scroll effect correctly. So, this was not pure code, the code had links to code in other places that were locked unless you had a subscription with code pen particularly, I believe.

PLAIN PRACTICE

A mix of anything

IN here I practice anything that comes to mind. I'm currently working on certifications, then on to more things from there. In order to get there, I practice, practice, practice.

HOVER EFFECTS

Hover effect practices.

Testing out different hover effects techniques.


CSS 5

More CSS

I got this code

CSS 6

Some text..

CSS 7

Some text..

CSS 8

Some text..

Test Page 3

Test Page 4

HOVER EFFECTS

CSS-3

CSS-4


CODE SNIPPETS


Anchor element appearing as a button

To make a button style link. Copy the code below. You will need to place the html code into you html file and the css code into your css file. Alternatively you could place the css code inline as a style element, however this is not considered good practice.

copyButtona.addEventListener('click', () => { fetch('documents/anchor element as button.txt') // Replace 'your_text_file.txt' with the path to your file .then(response => response.text()) .then(text => { navigator.clipboard.writeText(text) .then(() => { alert('Code Copied!'); }) .catch(err => { console.error('Failed to copy text: ', err); }); }) .catch(err => { console.error('Failed to read the file: ', err); }); }); copyButtona.addEventListener('click', () => { fetch('documents/anchor element as button.txt') // Replace 'your_text_file.txt' with the path to your file .then(response => response.text()) .then(text => { navigator.clipboard.writeText(text) .then(() => { alert('Code Copied!'); }) .catch(err => { console.error('Failed to copy text: ', err); }); }) .catch(err => { console.error('Failed to read the file: ', err); }); });

Display text file

This is the code that was created to be able to copy these code snippets. Note that several parts needed customizing for each particular situation.


Boiler plate

I include this code in all head elements at the least.


Placing snippets on this page.

Copy this code from the source code then paste it into a text file. Save As a Name, something relevant to the snippet of code. Also, save where other text files for snippets are kept. Referencing the image below, make changes accrodingly.