DEV Community: Charity Parks

What is React?

Charity Parks — Thu, 11 Nov 2021 21:52:37 +0000

React is a frontend framework that was developed by Facebook and was first released in 2013. React is a free open-source JavaScript library that is used to build single page applications, also called SAP's. It much faster with React to load a page because only the component that has been added or manipulated has changed and that is the only part that is refreshed. It doesn't need to reload the entire page. Its main purpose is to be simple and fast. React is used to handle the 'view' layer of the page or mobile app.

React apps are made up of components that contain JSX and output HTML. Being structured in components lets us easily break up a large application into smaller components hence easier to tackle if something changes or if there are errors.

First you will need the latest version of NodeJs. To get the latest version go to nodejs.org and install it on your machine. Then check node -v to make sure you have the latest version.

And finally you will install create-react-app. I've covered how to do this in a previous blog.

Happy Coding!

What is Bootstrap?

Charity Parks — Sun, 07 Nov 2021 19:59:46 +0000

Imagine wanting to create a weekly news webpage. You want to write new content each week. You want it to look consistent from week to week. Once you have your first week coded and full of your weeks content, wouldn't it be nice to just have to put the next weeks content in without having to redo the entire webpage? Also, working smarter not harder is key. So how can you accomplish this? Bootstrap to the rescue!

Bootstrap is a free toolkit and was created by Twitter developers to allow users to create quick and consistent webpages with ease. Its a collection of prewritten code for you to use. Prior to Bootstrap, developers would have to create common webpage features over and over again just hoping they could make it consistent with what came before. With Bootstrap you can have consistency with your fonts, font size, colors, and more. Bootstrap is one of the most popular tools in creating webpages! You can use it with HTML, CSS and JavaScript code to design layouts for your content.

To learn more and to get started with Bootstrap, go to: https://getbootstrap.com/

Happy Coding!

OOP...What is it?

Charity Parks — Sun, 31 Oct 2021 20:21:14 +0000

What is OOP? OOP is short for 'object-oriented programming'. 'Objects' have properties. For example, lets say that 'dog' is the object, and its properties could be: size, breed, color, sex. OOP is a set of techniques that use objects as central principle of program organization.

The four principles of object-oriented programming are encapsulation, abstraction, inheritance, and polymorphism.

Encapsulation: When each object keeps its state private inside of a class. In our dog class is where we encapsulate all of the 'dog' logic. Other objects have no direct access to its state. They would need to call on public functions called methods.

Abstraction: Objects should only allow publicly certain details while hiding all of the behind the scenes implementation. Only show what is relevant to the other objects.

Inheritance: When objects are very similar but not completely the same, yet they share common logic. Creating a child class that reuses all of the parent class's fields and methods and adds their own to it. This way we form a hierarchy.

Polymorphism: This happens when defining a parent class with logic to be reused and then the children classes implement their own version of it for themselves.

This is just a start to explaining OOP. Stay tuned for more!

Happy Coding!

Javascript 'For Loops'

Charity Parks — Sat, 23 Oct 2021 17:18:16 +0000

What is the purpose of a 'for loop' in JavaScript? Its purpose is that it executes a block (of code) as long as its condition is met/returns 'true'. Conversely, if the the block is executed and the condition isn't met/returns 'false', the loop will stop.

'For loops' have three arguments:

Initialization - this declares a counter variable

Condition - a condition is evaluated before each loop begins to see if it returns 'true'

Increment - this updates the loop counter each time the loop executes.

These 'for loops' are great for repetitive tasks. With each iteration of the loop, it runs the same block of code with a different value (the incremental aspect). Here is an example of a 'for loop':

for (let number = 0; number <= 12; number = number + 2) {
console.log(number);
}
// 0
// 2
// 4
// 6
// 8
// 10
// 12
(and it stops here)

Happy Coding!

Adding CSS to HTML Lists

Charity Parks — Sun, 17 Oct 2021 20:37:52 +0000

CSS properties can control the appearance of HTML elements. Such properties can add backgrounds to parts or to all of your webpage. The CSS properties can put borders around some of your content, or change the style of bullet points.

If you have a HTML list you want to style with CSS, you can do something like the following:

(HTML code)
<h1>Favorite Music Groups</h1>
<ol>
<li>Rascal Flatts</li>
<li>Little Big Town</li>
li>Restless Heart</li>
<li>Little Feat</li>
<li>The Beatles</li>
<li>Lady A</li>
</ol>

It would look like this:

Favorite Music Groups

Rascal Flatts
Little Big Town
Restless Heart
Little Feat
The Beatles
Lady A

Now add CSS.

ol { list-style-type: lower-roman;}

It would look like this:

Favorite Music Groups

i. Rascal Flatts
ii. Little Big Town
iii. Restless Heart
iv. Little Feat
v. The Beatles
vi. Lady A

There are a lot of CSS properties to choose from to change the style of your HTML elements!

Happy Coding!

HTML: Then & Now

Charity Parks — Sun, 10 Oct 2021 22:57:09 +0000

"HTML
/ˌāCH ˌtē ˌem ˈel/
noun
Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
"an HTML file"
Definitions from Oxford Languages"

Each new version of HTML is designed to improve the prior version. To add new elements and attributes. To write new code and remove old code. What we have today with HTML5 is very different from where we started.

HTML4 was release way back in 1997. HTML4 had some elements used to present the appearance of webpages. Some of the elements used back then are not recommended to be used today. Such as, <center>, <font> and <strike>. There are better elements in todays version.

XHTML 1.0 was released in 2000. In 1998 a new language called XML was created. It would allow users to write their own markup languages. So HTML partnered with XML to form XHTML. This came with stricter rules for writing markup. Elements now needed a closing tag (example: <p> </p>). Attribute names had to be in lowercase, etc...

To help authors to move into this new syntax, other versions of XHTML were created: Strict XHTML 1.0 where you had to follow the rules exactly. Then there was Transitional XHTML 1.0 where authors could still use some of the old elements, making it more lax and to implement some of the new syntax as well.

HTML5 was released in 2008. In this current version, authors do not need closing tags on all elements. It also came with new elements and attributes. Major web browsers adopted this version. And as of 2021 we are still using HTML5!

Happy Coding!

CSS Colors!

Charity Parks — Wed, 29 Sep 2021 20:09:04 +0000

When using CSS, one of the fun things is being able to work with colors for your webpage! Make sure to select colors so that your content is clear to read. For example, it is easy to read black letters on a white background. There are several ways to select your colors which I will be going over.

You can select colors three (3) different ways...

Color Names: There are 147 predefined color names that are recognized by most browsers. If you want to use 'red' you will simply use the predefined name of 'red'.
RGB Values: This stands for your Red, Green, Blue and they are expressed by the numbers 0 through 255. For example: rgb(102, 205, 165) These numbers represent how much Red, Green and Blue is in the color.
Hex Codes: Hex values represent how much red, green and blue there is by using hexadecimal code and it uses a '#' in front of it. For example: #77ceaa. The 77 represents the color in hexadecimal code for red, the ce represents the green, and the aa represents the blue.

You can choose colors for the foreground like so (I will just use color names for simplicity):

h1 {
color: DarkBlue;
}
p {
color: White;}

Same for the background colors:

body {
background-color: Red;
}
h1 {
background-color: white;
}

You can use a text editor to play around with colors for css! Happy Coding!

Combining CSS & HTML in the same file...

Charity Parks — Sun, 26 Sep 2021 22:40:56 +0000

CSS can be used by itself or with HTML. This post is going to go over how to use the two to make beautiful web pages.

Typically CSS is written in its own file but I'm going to show you how to use it in the HTML file. CSS is defined in the

section of an HTML page, within a <style> element.
For example:

<head>
<title>Our Summer Vacation</title>
<style type="text/css">
body { font-family: Tahoma; background-color: blue; }
h1 { color: black; }
</style>
</head>
<body>
<h1>Daytona Beach, Florida</h1>
<p>We haven't been to Daytona in such a long time. Its beautiful here. Daytona reminds me of being a teenager. That was the first time I went on a vacation.</p>
</body>

This way you can have both your CSS and HTML together in a simple file! There is A LOT more styling out there for you to use. CSS also uses borders. When using borders you can define the height and width for the border itself. More on that in future posts!

Happy Coding!

What is CSS?

Charity Parks — Sun, 19 Sep 2021 15:51:59 +0000

What is CSS? First off it stands for Cascading Style Sheets. It is responsible for styling web pages as far as colors, fonts, backgrounds and layouts making the viewer experience more appealing. So its the FUN STUFF!

CSS can be used as an additional feature to HTML or independently. When using CSS with HTML it takes an HTML element and describes how it should be displayed to the user. CSS rule contains two parts: the selector and the declaration. Here is an example how it is written...

p { font-family: Arial;}

The 'p' is the selector and the content between the {} is the declaration. Declarations have a property and a value. The paragraphs on this web page would use the Arial font. Here is another example...

h1 { font-family: Tahoma; color: blue;}

In this example the h1 elements will have a font of Tahoma and the color will be blue. The property is 'color' and the value is 'blue'.

There are countless properties! So many ways to design your web pages and create a great product!

Happy Coding!

Lets talk (HTML) Tables!

Charity Parks — Sat, 11 Sep 2021 16:19:46 +0000

Tables are visually appealing. Tables deliver information in such a way that is intuitive and user-friendly and easily consumed in a grid-style format. Information at a glance if you will.

Lets look at how to use HTML to format a table. Each block (in the grid) is called a table cell. The <table> element is used. Tables are written out row by row. To start out each row you will use the <tr> tag which stands for the table row. Inside the <tr> will be a series of <td> elements. <td> stands for table data. Each representing a row cell. After each cell, make sure to add a closing tag (</td>).

For example:

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

the result:
123
456

Happy Coding!

Why JavaScript?

Charity Parks — Sun, 05 Sep 2021 23:21:38 +0000

As a web developer, we have our favorite programming languages that we use for our web applications. Mine is JavaScript! In this post I'm going to share some of the reasons why.

JavaScript is the most popular language and is the foundation for todays web applications.
JavaScript initially was used as a front-end interpreted language. When Node.js (a JavaScript runtime environment) emerged, JavaScript could be used for front-end AND back-end programming. Hence making it Full-Stack!
JavaScript brings interactivity with users with features like forms, browser and HTML handling.
JavaScript is faster due to being able to re-use code. Less lines of code need to be written. And to add to that, it offers a higher level of abstraction, meaning the developer can achieve the same functionality with less lines of code.
JavaScript has turned web browsers into single page applications (SAP).
JavaScript is easy to learn and easy to read.

These are just a handful of reasons to use JavaScript. I'm sure if you look into it further you will see many more reasons to give JavaScript a try!

Happy Coding!

HTML dropdown boxes explained

Charity Parks — Sun, 29 Aug 2021 22:50:02 +0000

Inside of a form that you are collecting user data, you may find the need to use a dropdown box. This is where you want the user to only be able to select one of the options that are provided.

Dropdown boxes in HTML are created inside a <form> with a <select> element. The <select> element is what creates the dropdown list box. <select> has attributes such as 'name'. Without the name attribute nothing would show up inside the dropdown list. Inside of the 'select' element use the <option> element. Its used to give the user the choices (options) to choose from in the dropdown box. Use 'value' element is used inside the 'select' element and it indicates what is being sent to the server along with the 'name'.

Example:

<form action="http://www.123example.com/profile.php">
<p>Which state is your favorite?</p>
<select name="states">
<option value="california">California</option>
<option value="maine">Maine</option>
<option value="texas">Texas</option>
<option value="florida">Florida</option>
</select>
</form>

Happy Coding!