Scrambled Design

Developer
Kevin Phillips
Size
9,715 Kb
Views
2,024
  1. Scrambled Design Previews
  2. Scrambled Design HTML Codes
  3. Scrambled Design CSS Codes

How do I make an scrambled design?

What is Scrambled Design? In my mind, when learning anything new in our lives, it sometimes feels like our minds are scrambled at first. As time goes on, what we are learning eventually turns into an enjoyable experience. Scrambling the eggs in the beginning eventually becomes a delicious meal.. What is a scrambled design? How do you make a scrambled design? This script and codes were developed by Kevin Phillips on 09 January 2023, Monday.

Scrambled Design Previews
IQ Test

Scrambled Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrambled Design</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<!-- This is a comment section. This can be seen by other people but not the computer. This is a good method of note taking and feedback -->
<html> <head> <title>SCRAMBLED DESIGN</title>
<!-- below line is a link to the css style sheet --> <link rel="stylesheet" type="text/css" href="scrambled_design.css"> </head> <body> <!-- changing nav bar in the future to be used with the "table_links" below --> <!-- <nav class="fixed_nav_bar"></nav> --> <div id="header_image"> <img src="https://i.imgur.com/OfBdUZC.png?1" class="stretch" alt="awesome banner!"> </div> <div class="Intro_Content"> <div class="wrapper"> <p> What is Scrambled Design? In <span class="italics">my mind</span>, when learning anything new in our lives, it sometimes feels like our minds are scrambled at first, a sense of new information can be overwhelming. As time goes on, what we are learning eventually turns into an enjoyable experience. Scrambling the eggs in the beginning eventually becomes a delicious meal. </p> <p> In a nut shell, this is my journey from going zero to hero, so to speak in the world of Web Development. I have a lot of interesting ideas of what I want to design and how to interact with the user. </p> <span class="bold"> <span class="italics">LET'S BEGIN!</span> </span> </div> </div> <div> <table id="table_links"> <tr> <th> <a href="#HTML-1"> <img src="https://i.imgur.com/ozwP9nT.png?1" alt="HTML Logo"> </a> </th> <th> <a href="#HTML-Structure"> <img src="https://i.imgur.com/i10uj0M.png?1" alt="HTML Structure"> </a> </th> <th> <a href="#CSS-1"> <img src="https://i.imgur.com/yoSLUaN.png?1" alt="CSS Logo"> </a> </th> <th> <a href="#Programming-Python"> <img src="https://i.imgur.com/sxqt6hU.png?1" alt="Python Logo"> </a> </th> </tr> </table> </div> <!-- I'm separating each section by <div>'s to keep things organized on the web-page. --> <!-- Beginning of Section One --> <div class="HTML_Content" id="HTML-1"> <div class="wrapper"> <h2>Lesson One: The Basics of the Web and HTML</h2> <!-- class="lesson_content" will be used at a later time if I decide to change the style of the div --> <div class="lesson_content"> <div> <h3>What is the World Wide Web? (quick facts)</h3> </div> <div> <h4>HMTL - Hyper Text Markup Language</h4> <ul> <li>HTML was invented in the 1990's, however, it was used as a form of communication between scientists years before it became public to the world.</li> <li>It is the main type of document for the web.</li> <li>When a user goes to a website like facebook.com, he or she is sending a HTTP request to the Internet, then to Facebook's servers. Facebook then sends the request back to the Internet, then the HTML file is interpreted to that specific browser for the user to see.</li> </ul> <img src="http://medialab.di.unipi.it/web/doc/SEHTML2D/figs/02fig01.gif" alt="How information travels on the web"> </div> <div> <h4>Different Types of HTML Markup</h4> <p> There are several types of markup within HTML. Essentially, each type of markup is referred to as a type of "tag" (tags look like angled brackets using the greater than and less than symbols) and those tags combined with text (content) form an "element". </p> <p> Elements can be in-line or in block form. Each element will have an opening and closing tag. However, if it does not have a closing tag, it is referred to as a "void" tag. </p> </div> <div> <h4>&lt;tag&gt;Types of Elements&lt;/tag&gt;</h4> <ul> <li><b>In-line</b>: An element that does not force new lines before or after its placement, i.e., &lt;em&gt;, &lt;a&gt; (anchor tag), &lt;br&gt; (line breaking tag. &lt; div&gt; can also be an in-line tag because of the span element.</li> <li><b>Block</b>: An element has lines that appear before and after the element, i.e, &lt;p&gt;, &lt;h1&gt;, &lt;div&gt;, essentially, it is enclosed in a block.</li> </ul> </div> </div> </div> </div> <!-- Beginning of Section Two --> <div class="HTML_Structure" id="HTML-Structure"> <div class="wrapper"> <h2>Lesson Two: Structure and Web Browser Interpretation</h2> <div class="lesson_content"> <div> <h3>Analogy of Website Structure and Functions</h3> </div> <div> <h4>A House Structure and its Functions</h4> </div> <div> <h4>HTML Files - Structure of the House</h4> <ul> <li>Foundation and the walls</li> <li>Divided into rooms</li> <li>Family Room</li> <li>Bathroom</li> <li>Etc, etc.</li> </ul> </div> <div> <h4>CSS Files - The style of the House</h4> <ul> <li>Color of the carpet</li> <li>Color of the walls</li> <li>Decorations</li> </ul> </div> <div> <h4>Javascript Files - Interacting Components</h4> <ul> <li>Garage door opener</li> <li>Remote</li> <li>Lights</li> <li>TV Remote</li> </ul> </div> <div> <h4>Web Tools - Assist in Building/Repairing Other Components</h4> <ul> <li>Screw Driver to Use to Repair</li> <li>Lawn Mower to Mow the Lawn</li> <li>Saw to Cut Wood for Fireplace</li> </ul> </div> <div> <h3>Hidden Elements</h3> <p> Not all elements are visible in the displayed browser, such as meta tags, styles, and script, i.e., &lt;head&gt;, CSS, javascript. </p> </div> <div> <h3>Structure to Code By</h3> <p> When speaking of HTML structure, I like to think of the structure as a hierarchy of code, but it can be referred to as the "Tree-Like Structure" to follow when writing code. By adhering to the tree-like structure, the organization of code helps with understanding how deep/nested elements are within the HTML code. </p> <img src="http://watershedcreative.com/naked/img/dom-tree.png" alt="HTML Tree-Structure"> </div> <div> <h3>Mapping the # of Boxes on a Web-page</h3> <p> When determining the layout of a web-page, it is important to determine how it will be divided - into boxes. </p> <img src="https://i.imgur.com/UhsvXoC.png?1" alt="Webpage boxes"> <p> In the picture above, she has divided the web-page into seven boxes, however, there are actually eight boxes because the web-page makes up one box by itself. By determining the amount of boxes, you get a firm understanding of how you want the website to operate and look. The sections can be divided by using the "&lt;div&gt;" tag. </p> </div> </div> </div> </div> <!-- Beginning of Lesson Three --> <div class="css_Content" id="CSS-1"> <div class="wrapper"> <h2>Lesson Three: Adding CSS Style to HTML Structure</h2> <div class="lesson_content"> <div> <p> CSS (Cascading Style Sheet) is what gives HTML the "style" to the elements within the code by eliminating repetition. There are a few methods of adding CSS to the HTML document. In addition, CSS is a search replacement tool that allows you to identify a class or tag of an element chosen to style and change that element according to preference. With great power, comes great responsibility - there are rules to this power. </p> </div> <div> <h3>Three Methods to Placing the Style Sheet</h3> </div> <div> <ol> <li><span class="italics">CSS in Separate File</span>: creating a separate style_sheet.css is the ideal way of controlling CSS. This method allows you to stay more organized and is the ideal method of placing CSS.</li> <li><span class="italics">CSS in the &lt;head&gt; of the HTML</span>: This method is good for small projects. The CSS is enclosed in the &lt;style&gt; tag nested within the &lt;head&gt; element.</li> <li><span class="italics">In-line Style</span>: This method is generally not recommended because it leads to a lot of repeated code. For further reading on the <a href="http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css">debate of in-line CSS</a>, Stackoverflow gives an excellent explanation of the questions and the opinions of other Devs.</li> </ol> </div> <div> <h3>Rules of Cascading</h3> </div> <div> <ul> <li><span class="italics">Cascading</span>: defined as rules to be applied not only to the elements they directly match, but also to all those elements' child elements. However, if a child element has multiple overlapping rules defined for it, the more specific rules takes effect.</li> <li><span class="italics">Inheritance</span>: <ul> <li>relies on the ancestor - descendant relationship. It applies all changes to the specific element and all it's descendants. </li> <li>Adheres to the document tree/heirarchy of XHTML, based off of nesting</li> <li>Enhances faster loading speed of web-pages by the user.</li> <li>Helps the client to save money on bandwidth and Dev costs.</li> <li>A few examples of inheritance:</li> </ul> </li> </ul> </div> <div> <table class="main_tables"> <tr> <th>Attribute</th> <th>Inherited</th> <th>Not Inherited</th> </tr> <tr> <td>Color</td> <td>X</td> <td></td> </tr> <tr> <td><b>Font</b></td> <td>X</td> <td></td> </tr> <tr> <td><b>Text - Align/Indent</b></td> <td>X</td> <td></td> </tr> <tr> <td>Text - Transform</td> <td>X</td> <td></td> </tr> <tr> <td>Letter - Spacing</td> <td>X</td> <td></td> </tr> <tr> <td>Line - Height</td> <td>X</td> <td></td> </tr> <tr> <td>List - Style</td> <td>X</td> <td></td> </tr> <tr> <td>Visibility</td> <td>X</td> <td></td> </tr> <tr> <td>White - Space</td> <td>X</td> <td></td> </tr> <tr> <td>Word Spacing</td> <td>X</td> <td></td> </tr> <!-- End of Inheritance List --> <tr> <td><b>Background</b></td> <td></td> <td>X</td> </tr> <tr> <td><b>Border</b></td> <td></td> <td>X</td> </tr> <tr> <td>Display</td> <td></td> <td>X</td> </tr> <tr> <td>Float and Clear</td> <td></td> <td>X</td> </tr> <tr> <td>Height and Width</td> <td></td> <td>X</td> </tr> <tr> <td>Margin</td> <td></td> <td>X</td> </tr> <tr> <td>Min/Max Height/Width</td> <td></td> <td>X</td> </tr> <tr> <td>Outline</td> <td></td> <td>X</td> </tr> <tr> <td>Overflow</td> <td></td> <td>X</td> </tr> <tr> <td>Padding</td> <td></td> <td>X</td> </tr> <tr> <td>Position</td> <td></td> <td>X</td> </tr> <tr> <td>Text - Decoration</td> <td></td> <td>X</td> </tr> <tr> <td>Vertical - Align</td> <td></td> <td>X</td> </tr> <tr> <td>Z - Index</td> <td></td> <td>X</td> </tr> <!-- End of Not-Inherited List --> </table> </div> <div> <h3>Understanding Selectors</h3> </div> <div> <p> Not that we understand the methods and rules of CSS, how do the elements get changed by the CSS. CSS has the ability to "select" all elements of the same kind and change the value by calling a specific attribute. As a result, you are making a new set of "rules" within your main.css file. </p> </div> <div> <h4>CSS control over HTML</h4> </div> <div> <ul> <li>h1 {<br>background-color: blue;<br>color: white;<br>} <ul> <li>h1 = Selector</li> <li>background-color = attribute</li> <li>blue = value</li> <li>{ } = everything within the brackets is now a rule</li> </ul> </li> </ul> </div> <div> <p> So what is this actually doing to the HTML document? Basically, the CSS is selecting all elements within the &lt;h1&gt; tag and telling them they are now going to be with a blue background and with white text. </p> </div> <div> <h4>Selecting by Class</h4> </div> <div> <p> Now that we know how to change the style via CSS page, we can also do this by using class selectors, i.e., &lt;div&gt;. </p> </div> <div> <ul> <li>&lt;div class="lesson_one"&gt;Content for Div&lt;/div&gt;</li> <li>.lesson_one {<br>background-color: blue;<br>color: white;<br>}</li> </ul> <p> In the above example, we identified the class as "lesson_one" in the main.html file and within the main.css file we styled that class with a background of blue and a text color of white. </p> </div> <div> <h4>Selecting by ID</h4> </div> <div> <p> Another form of selection is by selecting by an ID selector. ID selectors are the most powerful type of selector in terms of CSS specificity. As a result, ID selectors beat out other types of selectors and the styles defined within, therefore can't be altered. On the other hand, having lower-specificity selectors that are easier to override is a plus, i.e., class selectors. </p> <ul> <li>CSS Code: <ul> <li> #firstname {<br>background-color: yellow;<br> color: white;<br> }<br> #future_class {<br>background-color: black;<br> color: white;<br> } </li> </ul> </li> <li>HTML Code: <ul> <li> &lt;p id="firstname"&gt;My name is Kevin!&lt;/p&gt;<br> &lt;p id="future_class"&gt;I want to learn Data Science!&lt;/p&gt; </li> </ul> </li> </ul> </div> <div> <h3>Boxes, Boxes, and more Boxes!</h3> </div> <div> <h4>Box Positioning</h4> </div> <div> <p> If you were to open the developer tools in either Firefox, Google Chromes, or Internet Explorer, you will notice the web-page is made up of boxes, which are containers or divs. These divs or block elements take up the entire width of the page. However, by adding the display: flex; rule to the CSS to the corresponding area will allow divs be next to one another. </p> </div> <div> <h4>Resizing Boxes</h4> </div> <div> <p> Resizing boxes seemed to be a pretty fun and exploring part of learning how CSS and HTML interact with one another. In order to change the way a box is visible on the HTML document, there are four different components to adjust the size of the box: margin, border, padding, and content. </p> <img src="https://i.imgur.com/Pkzd90x.png" alt="Box Model"> </div> <div> <h4>Adding an Image</h4> </div> <div> <p> Adding an image to your website not only enhances the overall layout, but allows the ability to portray your message in another form of context. </p> <p> Remember to always include an alt="Box Model" to show if the image is not displayed. </p> <p class="center">HTML for an img</p> <p class="center">&lt;img src="https://i.imgur.com/Pkzd90x.png" alt="Box Model"&gt;</p> </div> <div> <h3>CODE, TEST, REFINE</h3> </div> <div> <p> As a complete beginner to learning how HTML and CSS work, it is important to follow a set of guidelines to stay focused and organized. </p> </div> <div> <h4>CODE</h4> </div> <div> <ul> <li>Deciding what the overall design mock will be (boxing), deciding the structure.</li> <li>Writing the code for HTML and CSS.</li> <li>CSS - make the style changes beginning with biggest to smallest</li> </ul> </div> <div> <h4>TEST</h4> </div> <div> <ul> <li>Testing the code on other browsers.</li> <li>Is the color and text correct? Are the boxes in the correct order/layout?</li> </ul> </div> <div> <h4>REFINE</h4> </div> <div> <ul> <li>Fix all desired changes</li> <li>Continue testing and refining till the web-page looks like the mock-up.</li> </ul> </div> <div> <h4>Developer Tools</h4> </div> <div> <p> Developer tools, that is all I can say, developer tools. It is one of the best tools in the arsenal of a developer. Why? You can look at each element and tweak it to the desired look without changing any code on your original document. No more saving the code to the HTML document and refreshing your browser. When you are done, you can make the desired changes to your original document. </p> <p> With developer tools, you are able to: </p> <ul> <li>Change or add elements</li> <li>Change CSS, i.e., color, text, etc.</li> <li>Rearrange the layout of the document.</li> <li>Resize boxes and positioning</li> </ul> </div> <div> <h3>Verifying HTML and CSS</h3> </div> <div> <p> Verifying the HTML and CSS can be part of the testing and refining process. You will need to visit <a href="http://validator.w3.org/#validate_by_input">W3C Markup Validation Service</a> to check your HTML. After verifying your HTML, you will also have to verify your CSS at <a href="http://jigsaw.w3.org/css-validator/#validate_by_input">W3C CSS Validation Service</a>. If there are any errors, those errors will be displayed and with helpful links and instructions on how to correct the code so it passes verification. </p> <img src="https://i.imgur.com/UdJR7IQ.png" alt="Verify HTML and CSS"> </div> </div> </div> </div> <!-- Beginning of Programming Section Lesson Four --> <div class="programming_Content" id="Programming-Python"> <div class="wrapper"> <h2>Introduction to "Serious Programming"</h2> <div class="lesson_content"> <div> <h3>Programming</h3> <p> <span class="bold italics">Programming</span> is the core of computer science. </p> <p> A <span class="bold italics">computer</span> is a machine that can execute a program. With the right program, a computer can do any mechanical computation you can imagine. </p> <p> A <span class="bold italics">program</span> describes a very precise sequence of steps. Since the computer is just a machine, the program must give the steps in a way that can be executed mechanically. That is, the program can be followed without any thought. </p> <p> A <span class="bold italics">programming language</span> is a language designed for producing computer programs. A good programming language makes it easy for humans to read and write programs that can be executed by a computer. </p> <p> <span class="bold italics">Python</span> is a programming language. For this note taking, I will be writing primarily in the Python programming language. As a result, the programs that we write in the Python language will be the input to the Python interpreter, which is a program that runs on the computer. The Python interpreter reads our programs and executes them by following the rules of the Python language. </p> <p> A <span class="bold italics">Python Interpreter</span>, or any type of interpreter, is a program that reads Python programs and carries out their instructions; you need it before you can do any Python programming. </p> </div> <div> <h4>Backus-Naur Form</h4> <p> When comparing the <span class="bold italics">English Grammar</span> to a programming language, the programming language adheres to a strict grammatical structure. In English, even if a phrase is written or spoken incorrectly, it can still be understood with the help of context or other cues. On the other hand, in a programming language like Python, the code must match the language grammar exactly. The Python interpreter has no idea what to do with input that is not in the Python language, so it produces an error. </p> <p> The purpose of <span class="bold italics">Backus-Naur Form</span> is to describe a programming language in a simple and concise manner. The structure of this form is: </p> <p class="center">&lt;Non-Terminal&gt; &rarr; Replacement</p> <p> The replacement can be any sequence of zero or more non-terminals or terminals. </p> <p> <span class="bold italics">Terminals</span> never appear on the left side of a rule. Once you get to a terminal there is nothing else you can replace it with. </p> <table class="main_tables"> <tr> <th>Backus-Naur Form</th> </tr> <tr> <td>Sentence &rarr; Subject+Verb+Object</td> </tr> <tr> <td>Subject &rarr; Noun</td> </tr> <tr> <td>Object &rarr; Noun</td> </tr> <tr> <td>Verb &rarr; <span class="bold"> Eat</span></td> </tr> <tr> <td>Verb &rarr; <span class="bold">Like</span></td> </tr> <tr> <td>Noun &rarr; <span class="bold">I</span></td> </tr> <tr> <td>Noun &rarr; <span class="bold">Python</span></td> </tr> <tr> <td>Noun &rarr; <span class="bold">Cookies</span></td> </tr> </table> </div> <div> <h3>Python Expressions</h3> <p> An expression is something that has a value. Expressions are not to be confused with equations. Below are some examples of expressions in Python: </p> <ul class="python_expressions"> <li>3</li> <li>1 + 1</li> <li>7 * 7 * 24 * 60</li> </ul> <div> <h4>Understanding Expressions</h4> <p> Expression &rarr; Expression Operator Expression </p> <p> The <span class="italics">Expression</span> non-terminal that appears on the left side can be replaced by an <span class="italics">Expression</span>, followed by an <span class="italics">Operator</span>, followed by another <span class="italics">Expression</span>. For example, 1 + 1 is an <span class="italics">Expression</span> <span class="italics">Operator</span> <span class="italics">Expression</span>. </p> <p> Examples of Python grammar rules for arithmetic expressions: </p> <table class="main_tables"> <tr> <th>Python Grammar Rules</th> </tr> <tr> <td>Expression &rarr; Expression Operator Expression</td> </tr> <tr> <td>Expression &rarr; Number</td> </tr> <tr> <td>Operator &rarr; &plus;</td> </tr> <tr> <td>Operator &rarr; &times;</td> </tr> <tr> <td>Number &rarr; 0, 1, 2,...</td> </tr> <tr> <td>Expression &rarr; (Expression)</td> </tr> </table> </div> </div> </div> </div> </div> <!-- Footer layout will be changed at a later time to go with overall layout --> <footer> <div> <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a> </p> </div> <div> <p>designed by Kevin Phillips</p> </div> </footer> </body>
</html>
</body>
</html>

Scrambled Design - Script Codes CSS Codes

/* This is a CSS comment.*/
a:hover {	color: blue;
}
a:link {	color: black;
}
a:visited {	color: blue;
}
body {	background-color: #E8E8E8;	font-family: "Trebuchet MS", Helvetica, sans-serif;	font-size: 20px;	margin: 0;	padding: 0;
}
.bold {	font-weight: 900;
}
.bold.italics {	font-style: italic;	font-weight: 900;
}
.center {	text-align: center;
}
.css_Content {	background-color:#FFFFFF;	padding-bottom: 15px;	padding-left: 20%;	padding-right: 20%;	padding-top: 15px;
}
/* fixed_nav_bar will be changed at a later time. When I have time, I will have to research how to make the nav bar interact the way I envisioned
.fixed_nav_bar {	background-color: #003366;	height: 26px;	left: 0;	position: fixed;	top: 0;	width: 100%;	z-index: 9999;
}*/
footer {	align-items: center;	color: #FFFFFF;	display: flex;	justify-content: center;	background-color: #1E475C;
}
h2 {	color:#62320C;	display: flex;
}
h3 {	color: #1E475C;
}
h4 {	color:	#B7521E;
}
#header_image {	height: 100%;	left: 0;	right: 0;	width: 100%;
}
.HTML_Content {	background-color:#FFFFFF;	padding-bottom: 15px;	padding-left: 20%;	padding-right: 20%;	padding-top: 15px;
}
.HTML_Structure {	background-color:#E8E8E8;	padding-bottom: 15px;	padding-left: 20%;	padding-right: 20%;	padding-top: 15px;
}
img {	display: block;	height:auto;	margin-left: auto;	margin-right: auto;	max-width: 100%;
}
.intro_Content {	background-color:#E8E8E8;	padding-bottom: 15px;	padding-left: 20%;	padding-right: 20%;	padding-top: 15px;
}
.italics {	font-style: italic;
}
.programming_Content {	background-color:#E8E8E8;	padding-bottom: 15px;	padding-left: 20%;	padding-right: 20%;	padding-top: 15px;
}
.python_expressions {	background-color: #FFFFFF;	list-style-type: none;
}
.stretch {	height: 100%;	width: 100%;
}
.tab {	margin-left: 40px;
}
table {	border-collapse: collapse;	margin-left: auto;	margin-right: auto;
}
table.main_tables th {	background-color: #1E475C;	border: 1px solid black;	color: #FFFFFF;	padding-left: 1em;	padding-right: 1em;
}
/*
table.programming_table th {	background-color: #1E475C;	border: 1px solid black;	color: #FFFFFF;	padding-left: 1em;	padding-right: 1em;
}
*/
table#table_links th {	background-color: #E8E8E8;	border: 0;	padding-bottom: 2em;	padding-top: 2em;	padding-top: 2em;
}
td {	border: 1px solid black;	text-align: center;
}
.wrapper {	margin: 0 auto;	max-width: 35em;	padding: 0.25em 0.625em;	width: 80%;
}
/*
Comments are only to help PEOPLE read a code file. The computer ignores them.
*/
Scrambled Design - Script Codes
Scrambled Design - Script Codes
Home Page Home
Developer Kevin Phillips
Username KevinCEPhillips
Uploaded January 09, 2023
Rating 3
Size 9,715 Kb
Views 2,024
Do you need developer help for Scrambled Design?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Phillips (KevinCEPhillips) Script Codes
Name
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!