Hello world!

I’ll continue to update and contribute more to my blog by writing more tutorials and other goodies in the next few weeks, stay tuned!

Also. I want and need a job. I’m thinking about becoming a free lance web designer on the side, but that won’t be consistent money. I’ll also definitely need a full time job after graduating from USF in May. Any suggestions on small start-ups/companies that I can contact? Any of them looking for web developers or programmers? I’d love to get in touch with them!

HTML5 and CSS3 Tutorial #4: Transparency with “rgba” and “opacity”

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following notable HTML5/CSS3 topics will be covered in this tutorial:

1. “rgba” CSS3 feature
2. “opacity” CSS3 property
3. “background-image” CSS3 property


Note: All files used to compile this tutorial were contained in the same directory

This will be a very simple tutorial on how to make a transparent background for any element/div you wish. It’s very simple to do, as you really only need to use the “rgba” or “opacity” properties in your CSS3 stylesheet (depending on what you’re looking to do).

When you want a transparent element/div, there’s one of two things you’re looking for.

1) You want ONLY the background of the element to be transparent, not the text (rgba).
2) You want EVERYTHING in the element to be transparent, INCLUDING the text (opacity).

I will now show screenshots of what these ideas look like along with the code associated for each screenshot.

1) Background of element is transparent, but not text (rgba):
transparent_background_rgba_demo

HTML5 Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesheet.css" />
        <title>Transparent Background Demo</title>
    </head>
    <body>
        <div id="wrapper">
Here is some example text. As you can see, the background of this wrapper element is transparent
and you can still see the background image through the wrapper. 
            <br/>
            <br/>
            <br/>
            <br/>

Here is more example text just to make the wrapper look filled. 
            <br/>
            <br/>
            <br/>
            <br/>

Okay no more text now.

        </div>
    </body>
</html>

CSS3 Code:

#wrapper {
  width: 70%;
  padding: 50px;
  color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  background: rgb(255, 255, 255); 
  background: rgba(255, 255, 255, 0.5);
  height: 550px; 
  font-size:25px; 
}

body {
  background-image: url("background_image.jpg");
}

 

 


The following will be a screenshot of how the transparency works when using the “opacity” CSS3 property instead of rgba. Here, not only is the background transparent, but the text is as well. Though, it might be hard to see in this screenshot, I assure that you that it works.

2) Background and text are transparent (opacity):
Transparent Background and Text

HTML5 Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesheet.css" />
        <title>Transparent Background Demo</title>
    </head>
    <body>
        <div id="wrapper">
Here is some example text. As you can see, the background of this wrapper element is transparent
and you can still see the background image through the wrapper. 
            <br />
            <br />
            <br />
            <br />

Here is more example text just to make the wrapper look filled. 
            <br />
            <br />
            <br />
            <br />

Okay no more text now.

        </div>
    </body>
</html>

CSS3 Code:

#wrapper {
  width: 70%;
  padding: 50px;
  color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  opacity: 0.5;
  background-color: #C8C8C8;
  height: 550px;
  font-size: 25px;
}

body {
  background-image: url("background_image.jpg");
}

Questions/feedback? Please leave a comment!

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.

To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!

Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb

HTML5 and CSS3 Tutorial #3: Drop-Down Navigation Bar with “:hover” Pseudo Class, and Unordered Lists

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following notable HTML5/CSS3 topics will be covered in this tutorial:

1. “:hover” pseudo-class
2. “white-space” CSS3 property
3. “position: absolute” CSS3 property
4. “display” CSS3 property


This is probably one of the more frustrating features to code for your own site when you’re a beginner. A drop down navigation bar could be one of the most essential features on your website believe it or not. If you have a lot of content and links, and need help on coding a navigation bar that handles drop-down menus, then this solution is for you. There could be better solutions out there, using different HTML elements, but this is the solution that I was able to come up with.

I’ll post the screenshots of the original navigation bar, and the navigation bar after it was hovered over, to show that the dropdown menu actually works. I know there’s a better way to do this, such as having you test the navigation bar yourself on my blog, but unfortunately I can’t handle that feature. Sorry for any inconveniences, but the code does work!

Original Navigation Bar:
initial_navigation_bar

Navigation Bar Displaying Drop Down Menu, After Hovering Over “Profile” Tab:
dropdown_menu

Questions? Feedback? Please leave a comment!

HTML Code:

[sourcecode language=”html” collapse=”false” wraplines=”false”]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dropdown Menu Demo</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div id="navigation"> <!– Navigation id not used as selector in CSS file. –>
<ul>
<li><a href="#">Home</a>
<ul class="dropdown">
<li><a href="#">Games</a></li>
<li><a href="#">Anime</a></li>
</ul>
</li> <!– END: Home –>

<li><a href="#">Profile</a>
<ul class="dropdown">
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li> <!– END: Profile –>

<li><a href="#">About</a>
<ul class="dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Executive Team</a></li>
</ul>
</li> <!– END: About –>

<li><a href="#">Support</a>
<ul class="dropdown">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</li> <!– END: Support –>

</ul>
</div>
</body>
</html>

[/sourcecode]

CSS Code:

[sourcecode language=”css” collapse=”false” wraplines=”false”]
ul {
list-style:none;
margin:0; /* Demonstration purposes to keep navigation menu in top left corner. */
padding:0;
}

ul li {
float:left; /* Puts tabs on same line */
}

ul li a {
display:block; /* Displays links on separate lines. */
color:#000000;
padding:5px 15px 5px 15px; /* 5px top, 15px right, 5px bottom, 15px left */
margin-top:1px; /* Separates dropdown links by whitespace */
margin-left:1px; /* Separates tabs by whitespace */
background-color:#CCCCCC;
white-space:nowrap; /* Doesn’t wrap words across separate lines if line is too long for parent’s li width. This is for the dropdown menu. */
}

li:hover ul { /* Displays dropdown menu for specific li element, once mouse hovers over li element */
position:absolute; /* Positions directly under the correct tab */
display:block;
}

li:hover li { /* Keeps li elements same width in dropdown menu, since it’s originally floating left, as specified in "ul li" selector */
float:none;
}

li:hover a {
background-color:#252525; /* Changes background color of tab and dropdown links to shade of black when tab is hovered over */
color:#FFFFFF; /* Changes text color of tab and dropdown links to white when tab is hovered over. */
}

a {
text-decoration:none; /* So that links aren’t underlined */
}

.dropdown {
display:none; /* Anything in dropdown class doesn’t appear initially when page loads */
}

.dropdown li:hover a {
text-decoration:underline; /* Underlines link if li element in dropdown menu is hovered over */
}

.dropdown li a:hover {
background-color:#CCCCCC; /* Changes background color of link in dropdown menu to grey when we hover over link */
color:#000000; /* Changes text color of link in dropdown menu to black when we hover over link */
}
[/sourcecode]

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.
To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!
Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb

HTML5 and CSS3 Tutorial #2: Preventing Page Content From Wrapping When Re-sizing the Browser Window

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following HTML5/CSS3 topics will be covered in this tutorial:

1. “min-width” and “max-width” CSS3 properties
2. “margin” CSS3 properties
3. Text-wrapping


This is a rather simple tutorial on a problem that all web developers have experienced in the beginning stages of their website development: text wrapping when the web browser window is re-sized.

By default, when you design your website and add content to it, your  web browser will automatically make your content wrap in each container element to ensure that your text fits on the page when you re-size your browser from left-to-right/right-to-left. But, most web developers don’t want that to happen on their pages. It’s ugly, first of all, and second of all it’s rather unappealing to your web page viewers if all your content was displayed differently depending on the size of the user’s window.

So, how do you fix that? This tutorial will show you a very easy solution to this problem.

First of all, let’s look at a very basic web page that I made (along with it’s HTML5 and CSS3 code).

Web Page (on a maximized browser window):

Web Page Displayed on Maximized Browser
Web Page Displayed on Maximized Browser

HTML5 Code:

[sourcecode language=”html” wraplines=”false” collapse=”false”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fixed Width Demonstration</title> <!– Title of tab on browser –>
<link rel="stylesheet" href="layout.css" /> <!– MAKE SURE TO LINK TO THE STYLESHEET WITH THIS LINE,
OTHERWISE YOU CAN’T USE THE STYLESHEET BECAUSE IT’S NOT BEING REFERENCED TO –>
</head>

<body>

<div id="wrapper"> <!– Will use "wrapper" styles in css file. –>

<header> <!– Will use "header" styles in css file. –>
<h1>Header</h1>
</header> <!– End of header –>

<div id="content"> <!– Will use "content" styles in css file. –>
<p>Hello World! My name is Jourdan Bul-lalayao and blah blah blah, yada yada yada. This is a demonstration, yada yada yada.
I’m showing you how to ensure that elements on your page don’t overlap other elements as the web browser resizes, and
to make sure your content doesn’t flow accordingly with the size of the web browser either.</p>
</div> <!– End of content –>

<footer> <!– Will use "footer" styles in css file. –>
<h1>Footer</h1>
</footer> <!– End of footer –>

</div> <!– End of wrapper –>
</body>
</html>

[/sourcecode]

CSS3 Code (file: layout.css):

[sourcecode language=”css” collapse=”false” wraplines=”false”]
#wrapper {
width:80%;
margin-left:auto; /* "auto" to help center the wrapper along with margin-right */
margin-right:auto; /* "auto" to help center the wrapper along with margin-left */
background-color:#CCCCCC; /* Hexadecimal representation for a light gray color. */
}

#content, header, footer { /* Notice that we can use several selectors for other elements if they each contain the same styles, instead of
writing each selector seperately */
border-style:solid; /* Displays border for wrapper element with help of the 2 following lines of code*/
border-color:black;
border-width:medium;
margin-bottom:10px; /* Ensures that other elements under these selectors are placed 10 pixels below. */
}
[/sourcecode]


Let’s take a quick look at exactly what problem I’m talking about. If you’ll notice in the following screenshot, the text in the “content” section of the page wraps (i.e. the text is forced to fit in the browser, even at a smaller sized window. Which means the content section shifts in size and shape, too) based on the size of the web browser’s window. But, it’s not just the “content” section that’s wrapping. The header and footer elements are wrapping as well, and you’ll notice that because they change in shape and size too:

Display on Resized Browser Window
Display on Resized Browser Window

Now, how do you fix this problem? Very easy. For this demonstration, we will be adding the min-width and max-width properties to the wrapper’s style in the css file, and giving those properties a fixed value. We will also be deleting the “width:80%” style for the wrapper, since its width will be fixed already based on how many pixels we specify for the “min-width” and “max-width” properties. For this demonstration, we will be using 960 pixels for both properties. Basically, with a min-width of 960px and a max-width of 960px, the wrapper element’s width, no matter what the size of the browser window is, will ALWAYS be 960 pixels; no more, and no less. You can specify another number for the min-width/max-width properties based on how wide you want your wrapper to look like in the browser, but for this demonstration it will be 960 pixels.

Here is a screenshot of the solution to the problem we examined, along with the new CSS3 code. We did not have to change anything in the HTML5 code.

New Web Page Without Wrapping Content:

New Display
New Display after using min-width and max-width properties

New CSS Code (file: layout.css):

[sourcecode language=”css” wraplines=”false” collapse=”false”]
#wrapper {
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
min-width:960px; /* MIN-WIDTH PROPERTY ADDED */
max-width:960px; /* MAX-WIDTH PROPERTY ADDED */
}

#content, #header, #footer {
border-style:solid;
border-color:black;
border-width:medium;
margin-bottom:10px;
}
[/sourcecode]


Note: If you want to keep the same margins around the wrapper, you will have to specify a specific number for the amount of pixels you want in the margins, instead of using “margin-left:auto”, like this demonstration uses.

Questions/Feedback? Please comment!

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.
To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!
Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb

 

HTML5 & CSS3 Tutorial: Basic Web Layout With divs, id selectors, unordered lists, and floats

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following notable HTML5/CSS3 topics will be covered in this tutorial:

1. New HTML5 Tags (header, nav, footer)
2. ‘id’ selectors
3. Unordered lists (‘ul’ HTML tag)
4. ‘float’ and ‘clear’ CSS3 properties


For those of you who don’t know, I’ve been working on a huge website project for the past few weeks and in doing so, I’ve familiarized myself and learned a whole lot about HTML5 and CSS3, and through my struggles of coding certain features, I had the inspiration of posting basic coding tutorials of how to perform certain tasks and do certain designs in HTML and CSS. The first tutorial I will be providing on this blog is making a basic web layout. This will also be posted in the “Code” section.

This will be a very basic tutorial of how to make a basic layout for a webpage using divs, unordered lists, and floats. I will be providing a screenshot of what the web layout will look like, as well as the code in html and css that designs that layout. Comments will be provided in each code snippet for html and css.

Objectives:

After studying the code and comments, you should be a little basic familiarity with how id selectors work and that they specify which styles the html code will be using from the css code, a little familiarity of why we had to use the float properties, what an unordered list looks like (in the code and visually), how the “clear” property works for floats, and how to make a really basic web layout.

Questions? Please leave a comment!

Desired Web Layout (with colors):

layout

HTML Code:

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="layout.css" />
    </head>
    <body>
        <div id="wrapper">
            <header> 
                Header
                <br />
                Header
                <br />
                Header
                <br />
                Header
                <br />
            </header>
            <nav>
                Navigation links go here.

                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Link #4</a>
                    </li>
                    <li>
                        <a href="#">Link #5</a>
                    </li>
                    <li>
                        <a href="#">Link #6</a>
                    </li>
                    <li>
                        <a href="#">Link #7</a>
                    </li>
                    <li>
                        <a href="#">Link #8</a>
                    </li>
                </ul>
            </nav>
            <div id="content">
                <p>Content goes here.</p>
            </div>
            <footer> 
                Footer
                <br />
                Footer
                <br />
                Footer
                <br />
                Footer
                <br />
            </footer>
        </div> <!-- Wrapper -->
    </body>
</html>

CSS Code:

Note: id selectors are always required to have the hashtag (#) before the name of the element in the css code.

 

body {
  background-color: yellow;
}

#wrapper {
  width: 80%;
  border-style: solid;
  border-color: black;
  border-width: medium;
  background-color: purple;
  margin-left: auto;
  margin-right: auto;
}

header {
  width: 100%;
  background-color: red;
}

nav {
  width: 30%;
  background-color: white;
  float: left;
  height: 400px;
}

#content {
  width: 70%;
  background-color: blue;
  float: right;
  height: 400px;
}

footer {
  clear: both;
  width: 100%;
  background-color: gray;
}

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.

To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!

Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb