HTML/CSS: Styling an element, while using less code.

Today I’ll quickly summarize on styling an element using basic HTML and CSS, and how I later learned how to get the same result, while using a smaller amount of code.

In the process of making this.

I first used the following code:


HTML:
<div class ="container">
    <div class ="content">
        <p>Hello, World!</p>
    </div>
</div>

CSS:
p
{
    text-align: center;    
}

.container
{
    width: 300px;
    height: 300px;
    border: #0000FF 5px solid;
    padding: 0px;
}

.content
{
    width: 300px;
    height: 300px;
    background-color: #FF0000; 
}‚Äč
 

Shortly after, I found that I could do the same thing in less time, using less code.

Here is the fixed, shorter version:


HTML:
<div class="content">

    Hello, World!

</div>

CSS:
.content
{
    width: 300px;
    height: 300px;
    border: #0000FF 5px solid;
    background-color: #FF0000;
    text-align: center;
}

Take notice how I removed the <p> elements and the container class. I was able to trim two lines off the HTML code and ten lines of the CSS code. I realized I didn’t really need the container class at all.

I also discovered that you could input text directly into a <div> with no need for <p> and manipulate it through CSS just the same.

Here are two examples that show both codes do the same thing:
More Code
Less Code

Comments and suggestions are welcome.

Thanks for reading.

Javascript: setTimeout() and setInterval()

At first, the difference between setTimeout and setInterval can be confusing because they are both rather similar, they both support a function and a delay, but one important attribute sets them apart from one another. Here I hope to clarify the difference between the two.

setTimeout();

How it works:

The method –
setTimeout(function, delay) “The delay is in milliseconds, i.e. 1 second = 1000 milliseconds”

The arguments –
function – The code to be executed.
delay – The code will be executed one time after a set delay.

Here I have created a simple popup alert using setTimeout() that has a delay of 3 seconds.
Click here for an example on jsFiddle.

setInterval();

How it works:

The method –
setInterval(function, delay) “The delay is also measured in milliseconds”

The arguments –
function – The code to be executed.
delay – The code will be executed repeatedly after a set delay.

Here I have created a clock using setInterval(), the clock updates every second.
Click here for an example on jsFiddle.

As you can see from the examples:

setTimeout(); – Executes once after a set delay.
setInterval(); – Executes repeatedly after a set delay.

Please feel free to comment with any suggestions on different ways to use setTimeout() and setInterval.

Thanks for reading.

The beginning…

With still being new to the world of web development, I thought I should start a blog to document what I learn and share it with others. I have a very basic knowledge of web development at the moment and I plan on bettering myself over time through research and with the help of others through feedback.

Any comment and criticism is welcome and appreciated, it will only help me better myself. And hopefully, some where down the road, someone will be able to learn from the posts that I have made.