3 Frameworks In Class Exercise

In class framework assignment

Getting a simple website built with 3 frameworks should be a great introduction!

Directions

  • Create a new Visual Studio folder/project
  • Create 4 HTML files
    • index.html
      • Which should only contain 3 links to the other 3 HTML files
    • bootstrap.html
    • bulma.html
    • uikit.html

Bootstrap

https://codepen.io/agrublev/pen/bQmxJw

UIKit

Final look

https://codepen.io/agrublev/pen/vQVVgO?editors=1000

Bulma

The final product should look like this

https://codepen.io/agrublev/pen/XyxxxQ?editors=1100

 

Extra Credit / Additional Practice

Improve the websites as they can all use a container to wrap them at the very least. Also maybe try to get the javascript working? Should be as easy as adding the styling ūüôā

Contact Form with PHP/ReCaptcha

A great script I bought here

https://codecanyon.net/item/contactme-responsive-ajax-contact-form-html5-php/20256608

You can download from here.

After download, I had to change the following fields:

  1. from_name
  2. from_address
  3. to_address

If you want to enable human validation (prevent bots from submitting) there are instructions in index.html you can follow.

Visit https://www.google.com/recaptcha/admin

Fill out the following items

It will provide you with all the needed info here

Update the configs.php file

Change the html as needed to enter the sitekey (this occurs for each form on index.html so you need to copy paste a few times)

Uncomment script near the bottom of the page!

You end up with

Which submits and sends an email like this!

Pretty awesome! Check out final product http://myfinalprojectrocks.com/contact/

HTML5 (Audio/Video) and CSS3 (animations, shadows and more)

Creating a website from a design

We’ll learn about building a webpage by following every step of the process for the second Website Project. The final page should look similar to this:

Step 1: Breaking the design into boxes

We’ll start by breaking down the major sections in the website. These are typically easy to spot as they are visually separated. Here is the breakdown:

At this point we can safely add each section to our web page as a div which has the class of the named section like this:

<div class="header">

</div>

Or we can continue to break down each section into smaller boxes. I’ll go through each section and how to break it down. Let’s start with the header

The header has two columns, one that appears on the left and houses the logo, and one that is on the right and has our navigation.

Important: To create columns you need a parent

In this situation, we want two columns in the header, meaning that we’ll need to have only two direct children inside the element. This is already going to be the case as long as we’ve created a div.header¬†and added inside two elements, the img.logo¬†and¬†div.menu. However, in other situations, there may be a third element that should remain on a separate row. For example:

In this situation, if we simply added the 3 elements inside the parent we would get 3 columns if we applied flex to the parent. To resolve this we’ll need to add an additional element that wraps the image on the left and the title on the right. This new element is the immediate parent of the two children that should appear as columns.

<div class="main-parent">
    <img src="image.png">
    <div class="title">Title</div>
    <div class="description">
        Description Here
    </div>
</div>

<!-- SHOULD NOW BE -->

<div class="main-parent">
    <div class="flex-parent">
        <img src="image.png">
        <div class="title">Title</div>
    </div>
    <div class="description">
        Description Here
    </div>
</div>

As you can see the before only has 3 immediate children inside the .main-parent which are img, div.title, and div.description. In the second piece of code .flex-parent has only two direct children img and .title meaning that they will be the only two items appearing next to each other.

Back to the header

Okay let’s resume with the header

There are two direct children of .header

<div class="header">
    <img src="logo.png">
    <div class="menu">
        <a href="#" class="menu-item">
            Home
        </a>
        <a href="#" class="menu-item">
            Features
        </a>
        <a href="#" class="menu-item">
            ...
        </a>
    </div>
</div>

The¬†img¬†and the¬†.menu.¬†Inside the menu box, we simply add our links with a class¬†.menu-item. We’ll need the classes on the anchors because that’s the only way to change their color from the default blue later on.

Next, we break down the hero

Inside the .hero box, we only have 3 elements (no columns). The big title becomes .main-title and then the text below .main-description and finally the button .main-button

The sub-points¬†section has 3 columns, meaning we need 3 immediate children called¬†.sub-point-column. Inside each, we’ll need two rows, the¬†.sub-point-header¬†which will contain the¬†img¬†and the¬†.sub-point-title¬†allowing them to display as columns when flex is applied, and the¬†.sub-point-description¬†for the paragraph of text.

The communicate section has two columns, the first is the img on the left, the second is the wrapper called .communicate-right-column  because if we had the title and description without a wrapper they would both appear as columns, instead we want them to appear as rows and we add the parent wrapper to house .communicate-title and .communicate-description.

The¬†about¬†section is probably the most difficult one. The first part is realizing that the top title “ABOUT SIMPLA”¬†is an element on its own called¬†.about-title¬†row followed by another element¬†.about-columns¬†which is needed to make its children into flex columns.

Inside the¬†.about-columns¬†we have two immediate children¬†.about-left¬†and¬†.about-right.¬†Inside the left column, we’ll also need a header element called¬†.about-left-header¬†which will be flexed to have two immediate children which are columns.¬†An¬†img¬†and a¬†.about-left-title¬†will be directly inside the header box.¬†After that, we add the description box¬†.about-left-description¬†and with that, the left side is done.

In the right column we need the special title¬†.about-right-title¬†then for each skill, we’ll add a new box¬†.about-right-skill. Which contains two immediate children¬†.about-skill-header¬†and¬†img (which contains the percent indicator in blue). Inside the¬†.about-skill-header¬†(which is not written in the image example as there is no space)¬†we have two children,¬†.about-skill-title¬†which should appear on the left as a column (meaning .about-skill-header is flexed)¬†and¬†.about-skill-percent¬†which is the right column containing the number of percents.

The footer is quite straightforward. We have 3 immediate children which will be columns named .footer-column. Inside the first two we add a .footer-title and a .footer-description. In the last column instead of a description, we add a .footer-gallery to allow its immediate children img to display as columns.

Step 2: Adding the boxes as HTML

Now let’s convert each section into HTML code

<div class="header">
    <div class="logo">
        <img src="http://ucsbwebdev.college/sites/second/logo.png">
    </div>
    <div class="menu">
        <a href="#" class="menu-item">
            Home
        </a>
        <a href="#" class="menu-item">
            Features
        </a>
        <a href="#" class="menu-item">
            Portfolio
        </a>
    </div>
</div>

<div class="hero">
    <div class="main-title">
        Welcome
    </div>
    <div class="main-description">
        WElcome to my call to action
    </div>
    <a href="#" class="main-button">
        Learn More
    </a>
</div>

<div class="sub-points">
    <div class="sub-point-column">
        <div class="sub-point-header">
            <img src="http://ucsbwebdev.college/sites/second/bullet1.png">
            <div class="sub-point-title">
                Understand the project!
            </div>
        </div>
        <div class="sub-point-description">
            IJjisd iasjd aiosjd oisaj doiasjd iosaj dioasjd oiasjd oiasjd oiasj dioasjd ioasjd ioasjd
        </div>
    </div>
    <div class="sub-point-column">
        <div class="sub-point-header">
            <img src="http://ucsbwebdev.college/sites/second/bullet1.png">
            <div class="sub-point-title">
                Understand the project!
            </div>
        </div>
        <div class="sub-point-description">
            IJjisd iasjd aiosjd oisaj doiasjd iosaj dioasjd oiasjd oiasjd oiasj dioasjd ioasjd ioasjd
        </div>
    </div>
    <div class="sub-point-column">
        <div class="sub-point-header">
            <img src="http://ucsbwebdev.college/sites/second/bullet1.png">
            <div class="sub-point-title">
                Understand the project!
            </div>
        </div>
        <div class="sub-point-description">
            IJjisd iasjd aiosjd oisaj doiasjd iosaj dioasjd oiasjd oiasjd oiasj dioasjd ioasjd ioasjd
        </div>
    </div>
</div>

<div class="communicate">
    <img src="http://ucsbwebdev.college/sites/second/idea-image.png">
    <div class="communicate-right-column">
        <div class="communicate-title">
            Communicate your idea
        </div>
        <div class="communicate-description">
            jsadioas jdojas dij asjasdoij asoidj asiodj asd
            asdij asoidj aisodj aiosdj ioasd ioasjdas
            dasjiod ioasjd ioasjd ioajs d
        </div>
    </div>
</div>

<div class="about">
    <div class="about-title">
        Title of about
    </div>
    <div class="about-columns">
        <div class="about-left">
            <div class="about-left-header">
                <img src="http://ucsbwebdev.college/sites/second/about-title-image.png">
                <div class="about-left-title">
                    Title of left col
                </div>
            </div>
            <div class="about-left-description">
                ijsadoj asidoja sdioj asiod jasiod jaiosd ioas disad
            </div>
        </div>
        <div class="about-right">
            <div class="about-right-title">
                Our Skills
            </div>
            <div class="about-right-skill">
                <div class="about-skill-header">
                    <div class="about-skill-title">
                        WORD PRESS
                    </div>
                    <div class="about-skill-percent">
                        65%
                    </div>
                </div>
                <img src="http://ucsbwebdev.college/sites/second/skills-1.png">
            </div>
            <div class="about-right-skill">
                <div class="about-skill-header">
                    <div class="about-skill-title">
                        WORD PRESS
                    </div>
                    <div class="about-skill-percent">
                        65%
                    </div>
                </div>
                <img src="http://ucsbwebdev.college/sites/second/skills-2.png">
            </div>
            <div class="about-right-skill">
                <div class="about-skill-header">
                    <div class="about-skill-title">
                        WORD PRESS
                    </div>
                    <div class="about-skill-percent">
                        65%
                    </div>
                </div>
                <img src="http://ucsbwebdev.college/sites/second/skills-3.png">
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer-column">
        <div class="footer-title">
            Title
        </div>
        <div class="footer-description">
            Description
        </div>
    </div>
    <div class="footer-column">
        <div class="footer-title">
            Title
        </div>
        <div class="footer-description">
            Description
        </div>
    </div>
    <div class="footer-column">
        <div class="footer-title">
            Title
        </div>
        <div class="footer-gallery">
            <img src="http://ucsbwebdev.college/sites/second/footer-1.png">
            <img src="http://ucsbwebdev.college/sites/second/footer-2.png">
            <img src="http://ucsbwebdev.college/sites/second/footer-3.png">
            <img src="http://ucsbwebdev.college/sites/second/footer-4.png">
        </div>
    </div>
</div>

Step 3: Making columns appear

To make each box that has columns work we need to apply display: flex;

To save time, and make it easier to work with, we’ll create one single class called¬†flex¬†which we can add to all parents that have columns. So in our style declaration, we add

.flex {
    display: flex;
}

Then for each element like the header we add the class flex by adding a space after the initial class like this

<div class="header flex">

The following elements should have the flex class added

  • header
  • menu
  • communicate
  • sub-points
  • sub-point-header
  • about-columns
  • about-left-header
  • about-skill-header
  • footer
  • footer-gallery

In some situations, like the .header we want the columns to have space between them and display on each side. To do this we use a flex property called justify-content with value space-between to look like this

.header {
    justify-content: space-between;
}

We should add this style declaration to the following classes

  • header
  • menu
  • communicate
  • sub-points
  • about-columns
  • about-skill-header
  • footer
  • footer-gallery

Your stylesheet should look something like this

.header {
    justify-content: space-between;
}
.menu {
    justify-content: space-between;
}
.communicate {
    justify-content: space-between;
}
.sub-points {
    justify-content: space-between;
}
.about-columns {
    justify-content: space-between;
}
.about-skill-header {
    justify-content: space-between;
}
.footer {
    justify-content: space-between;
}
.footer-gallery {
    justify-content: space-between;
}

In some situations, we need to have the columns align vertically to be centred like in the .sub-point-header where the image needs to be exactly on the same level as the .sub-point-title. To do this we use another flex property called align-items with value center like this

.sub-point-header {
    align-items: center;
}

Apply it to the following

  • sub-point-header
  • about-left-header
  • about-skill-header

Step 4: Adding images

To add all the images needed please use the following link https://www.dropbox.com/s/yzzwaswuhlimjgp/colors-and-links.txt?dl=0

Step 5: Adding styling

To finalize the website we need to add some styling. Let’s start with the header.

In the header the menu items are links which appear blue and underlined. To adjust this we have to override the browsers default styling for an anchor by specifying a style declaration which targets the links, in our case we used the class .menu-item

So we need a style like this

.menu-item {
    color: #787878;
    text-decoration: none;
}

The¬†color¬†declaration change sit from blue to dark gray, and the text-decoration¬†will remove the underline. Now to make these items spaced nicely and increase the clickable area so it’s easier to click we need to first change the anchor from an inline element (used when shown amongst other text) to an¬†inline-block¬†element which gives it ability to distance itself in any way we see fit. Should now look like this

.menu-item {
    color: #787878;
    text-decoration: none;
    display: inline-block;
    padding: 20px;
}

I also added some padding which adds spacing inside the element.

Inside the¬†hero¬†we need to make the text of the title big, white, and bold. To do this we’ll use the same¬†color¬†property as above and we need¬†font-size¬†alongside¬†font-weight¬†which we set to bold.¬†

.main-title {
    font-size: 100px;
    font-weight: bold;
    color:white;
}

We’ll probably also want to add some distance underneath it, to do this we use¬†margin¬†which pushes away from the outside. So to push below we do

.main-title {
    font-size: 100px;
    font-weight: bold;
    color:white;
    margin-bottom: 20px;
}

Notice we added margin-bottom which only changes the bottom push.

We’ll also want to make all text inside the¬†hero¬†centred and add the hero background image. For this we use text-align¬†and then set a¬†background¬†with the url();¬†value

.hero {
    text-align: center;
    background: url(http://ucsbwebdev.college/sites/second/hero.png);
}

Do the same color change as we did for the¬†.main-title¬†to the¬†.main-description¬†and also apply similar styling to the¬†.main-button¬†as we did to the¬†.menu-item¬†buttons. One additional thing we’ll add is a white border which is done with¬†border: 1px solid white;

Using the same color, font-size, margin-bottom, and font-weight add more styling to make the website look closer to the final product.

In the footer we can add a border to the .footer-title only on the bottom just like this

.footer-title {
    border-bottom: 2px solid #ccc;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

After you’ve played around let me know and i’ll assist you with getting it finalized!