About

References and Links

• 10 Text Masking Snippits
• CodePen: SVG Text Mask w/ Video Fill
• Introduction to Text Masking on the Web
• CodePen:Pure CSS Peeling Sticky
• Introduction to Text Masking on the Web
• SVG ON THE WEB
• W3C.org
• W3Schools SVG

---

About SVG and Text Masking

10/22/2021

• Scalable Vector Graphics are an XML-based markup that can contain two-dimensional vectors. The vectors can be simple shapes, paths, or just about anything you can do in Illustrator. It’s an image format that has more in common with a web page than with a JPEG. SVG is much more potent than other image formats we can use on the web as we can manipulate them with code (either in our text editor or with CSS / JS).--SVG on the Web

Innovation and Expansion of Skills

10/22/2021

• When searching for what to do for this project, I came across SVG Text Masking on Code Pin. I used the search and typed in, “Motion.” I also saw it came with some SASS (SCSS), and I wanted to learn a little more about that as well for my project. I knew that in SCSS, it would create a CSS file, but you only link the CSS file. When working with SVG and adding the video you want takes a little work, and how big the file is when working with the video. I just used a code from Code Pin, changed the coloring and size, created some new files, and edited how it would look on my page. I knew SCSS and what SVG was but did not know how to use it in my web design. Knowing your way around code does help you tweak how you want the code to come across on your website.

Browers, Testing, and Web Standards and Design Standards

10/22/2021

• When testing on the available browsers I have, I used to be my Google Chrome, and I got no errors, warnings, and everything looks great for mobile. When testing in the browser with Microsoft Edge, I got a few warnings for Accessibility and a script warning about my navigation. Learning how different browsers can work can be a challenge. Each browser is affected differently, and knowing what to add to make sure other browsers work across the board can be challenging as things change or update constantly. I use Validator from w3.org for testing my HTML and CSS. I got errors I had to fix with my list. You cannot put any br’s or p’s into your list, or it will create a mistake. The only thing you can do is make your list. There are standards when creating a website, and if you don’t follow the standards, it could look different on every browser you come across and may not work. With CSS, it can be challenging as well. With the -MS-flex-order is a vendor extension; of course, this is just a warning. When using other codes that you come across, not everyone follows the standards, and you might end up fixing a website that does not follow the standards and design of the web.

Reflection and Skills Gained

10/22/2021

• The skill I gained when doing this project was learning how to put an SVG together with animation and using a video with text. I learned that SCSS is another form of CSS, and you just have connected both the files together, but use the CSS link into your HTML. I knew that not everyone's codes are web standards and practice, and you must change this to make sure your standards are correct; otherwise, you will get errors or warnings on why the code isn't working. The best practice you can use is the Validator from W3C.org, both with HTML and CSS. Even when using bootstrap, those standards can be wrong, and you can spend hours fixing a code.

Contact Me

Sabrina

Email Address:
contact@larsonwebdesign.com