Begin Here if Lost

Welcome to username! Before exploring any of my codes, I made this guide so that you can see what codes await you that I have made.

This walkthrough will focus on completing the following layout: Annoying Windows Modal. After completing the walkthrough, I hope you'll gain not only a further understanding of my layouts, but also gives you an intuition to explore HTML layouts made by other users.

The Preview Page

With each coding page contains a basic set of information that gives a small idea of the kind of code presented. There are three categories that I "rate" each code to help figure out what's best for you:

• Difficulty: This rating is given to what I think "looks" difficult rather than if they actually are difficult to understand. While I try to make all my codes easy to read and understand, that doesn't always translate well to any users. Usually, the longer and more nested the code is, the higher the "difficulty". Additionally, the use of Bootstrap components such as tabs and carousels will directly contribute to this rating.
• Theme: This labels the kind of code theme is in use. Custom themes are pre-designed with mininal customization options available by default. Bootstrap themes are lack any specific design and are actually made to simply blend to whatever default Toyhouse theme the user has. Regardless of the type of theme the code is found, users are more than welcome to explore the code further and change things to their personal liking should they have the skill level to do so.
• Length: This simply shows how long the code itself is. There are some codes that are designed to be modular and thus, can be whatever length the user wants it to be.

After this, there will sometimes be an extra alert that shows some extra information related to the code. Sometimes, this can come in a sort of warning should a specific use case arrives. In our case, the modal code was made for an event that I figured would be worth visiting.

Finally, we have the final working preview of the code in action. The preview itself is only created when you fill out the code in its more basic "intended" form, with no extra customizations made. Special codes like this one are designed to only appear once a page is refreshed, so a button takes its place to view it again.

Reviewing the Code

Upon clicking into the actual HTML code of the layout, you'll see that it is actually color coded. This is done to reveal special portions of the code that would not be immediately visible. All the text is meant to be copy and pasted into a basic text editor of your choice and it'll work as intended, albeit with some broken placeholders for elements that weren't properly syntaxed like images. Likewise, pasting the text will remove all the color (unless you use a dedicated code editor.

Here are a couple of key things to look for whenever you happen to use my codes:

• I primarily like to provide a sort of fill-in-the-blank approach to my layouts. I will intentionally highlight the parts you can easily replace in primary text. With easier codes, the amount you need to change is very minimal whereas more complex codes have many more parts.
• HTML comments are found in 60% opacity text. These do not appear in the actual layout and it's purpose is mostly to label or add guiding information about each section of the code. These are important to read as you edit the code.
• Other functions of the code will appear in other kinds of text colors. These will highlight some extra features of the code you can use, but aren't mandatory for the basic functionality of the code. Modular codes that make use of Bootstrap components will definitely make use of these.

With that out of the way, you'll definitely see that even tho the entire code might look intimidating at a first glance, you'll actually only focus on a small fraction of it, leaving a good portion of it intact.

The Basic Code Fill

For our basic code fill, we will primarily focus on changing the primary text portion of the code while also reading the HTML comments. Copy and paste the entire code into either your text editor of choice or directly into the text field you want to apply this to (ensuring that your WYSIWYG settings are off for that text field).

Let's begin from the top:

1. The first thing you'll encounter is a giant comment. This is usually my "title card" of the sort that introduces the code itself. Depending on where you plan to use the code and if you already have existing code, it's helpful to keep this in place so you know what portion this new code will begin and end.
2. We arrive at our second comment that highlights what this layout is made up of. In this case, it is made up of pages, with each page having three pieces to it: an image section, a description and a button that takes us to the next page. It also outlines the extra function we'll cover later about adding or removing pages (which is what makes this code "user flexible").
3. The first editable section comes up and it is img_link. In this portion, you will want to replace this with a link that leads to an image. This is usually obtained by right-clicking (or holding tap) on the image you want to use and copying the "image location/address/URL". Typically, if you paste this link on your address bar, this will lead you directly to the image, but for our purpose, it is used so the img element can call that image for display.
   • I personally recommend small images, but any image will do if you please. Likewise, the preview page of the code has some images included for you to use that originally fit the theme of the Windows 98 aesthetic.
4. The second editable section is shortly after and features Lorem ispum text. You can replace this with whatever text you want, whether it be an important message, your favorite copypasta or perhaps something related to the image you chose to feature on this page.
5. Going down the code, you'll notice the same pattern repeats three more times for a total of four pages. All you need to do is to repeat #3 and #4 to fill out the entire rest of the editable portions of the code.

Upon completion, your code should be fully functional and ready for use!

Further Exploration

At this point in the guide, the walkthrough portion is complete and you have a working code. However, there's still more you can do to further customize this layout, both in ways that were previously instructed in the HTML comments as well as any features that can be found by simply looking deeper into the code that isn't color-coded.

As mentioned previously, this code is modular and clues as to how to make use of it are found in the HTML comment as well as the warning and success colored text. This functionality is in the form of being able to add or remove pages, making this code longer or shorter.

• The #annoying element is the main label for the entire modal including the semi-transparent background underneath the main box that blocks any interaction with the rest of page.
• The subsequent element ids all follow a chain that calls on the next page in the sequence. Page one is labeled #layerOne and calls to #layerTwo in the button link. Page two is labeled #layerTwo and calls to #layerThree in the button page. This pattern continues until the last page.
• The last layer will have its button call back to #annoying, the id found at the very beginning of the code. This is important as the final page button will effectively "close" the entire modal, finally enabling the user to access the rest of the page. This is pretty much the main gimmick behind the code.

As long as this pattern remains true, the code will continue to function as normal. You can extend this pattern to go beyond even ten pages or you can shorten it to a single page. If you want to use it as a single page, you obviously won't be needing the "layer number" ids and the single button should instead only lead back to #annoying to close the modal.

While that's the only functional portion I explicitly stated in the HTML comments, there are definitely more ways you can customize the code. Most of it is actually found in the portion between the two large comments where the #annoying id is found:

• The gradient at the top can be changed by adjusting the values found in the linear-gradient() function
• The top bar can also say something different other than "Toyhou.se"
• The background of the box can be changed from "silver" to any other color value you like
• The background color behind the box can feature a completely different background value beyond "rgba(0,0,0,0.8)"

I hope you enjoyed this walkthrough! ^^ While the details of this guide serve to more easily use my layouts, you'll gain a better understanding of HTML the more you work with the code. You'll be able to use this as a stepping stone to dig into other layouts made by other users and more easily identify the parts that you can customize to your liking.

If you successfully complete any of my layouts in your page, don't hesitate to comment about it. Even if I don't reply, I always love to take a look at how others use my code. ^^

Thank you for your time!

- mrpuppychow