Author: agrublev

Class May 10th Links & Homework

Quiz http://x.co/webquiz4

Links

 Homework

  • Get hosting/domain (if you can’t afford it email me and ill provide you a subdomain and FTP to use, I can install WordPress for you)
    • Install WordPress with a theme
    • OR Put your current web code there
    • OR Use canvas code I shared
  • You should have minimal
    • Your home page elements (at least the main ones)
    • One of the pages of your website almost done

Getting your FTP information (from GoDaddy) – FileZilla/WebStorm Connection

  1. Make sure you are logged in then visit https://account.godaddy.com/products/
  2. Under Web Hosting we click Manage

  3. Then select the cPanel button

  4. Now click the FTP Accounts button

  5. Here we fill out the information, make sure to change Directory to just public_html

  6. Click Create FTP Account

Now that we have the FTP account we can use FileZilla or WebStorm to connect. Let’s cover both.

Connecting with FileZilla

  1. Open FileZilla app (download from the link above)
  2. Click on the Site Manager icon from the top left
  3. Create a new Site from the icon on the bottom left

  4. Specify a host which should be your domain name

  5. For logon type choose normal

  6. Now enter the username you chose + @yourdomain.com and password you entered when setting up the FTP account

  7. That’s it, now select the Connect button on the bottom right

  8. You can either use the left side navigation to find your files to upload, or simply use Finder to go to the folder with your files and drag and drop them into the right side of FileZilla

WebStorm FTP Setup

  1. Either create a new project for your website files or use existing, the final result should be that you’ve opened the folder of your project in WebStorm
  2. Now you can simply browse the remote files via FTP by clicking on Tools -> Deployment -> Browse Remote host

  3. A new panel will appear on the right, click the 3 dots to open the settings

  4. Set a name for your web host (can be domain name) and then OK

  5. Set the FTP host to your domain, then your username + @domain.com and the password we set. Make sure to check the “Save password” checkbox to save us time in the future

  6. Now click ADVANCED OPTIONS and select Passive Mode

  7. No select the Mappings tab and just add “/” in the “Deployment path on the server…” input

  8. Click OK to complete adding the server. Now right click on your Project folder in the left side of WebStorm and select Deployment->Download from MyFinalProject or whatever name you chose for your server to get all your files from the server to your computer!

  9. Now click on Tools->Deployment->Automatic Upload so that when we edit a file and save it, it’s automatically uploaded

  10. Once the downloading is complete, we can edit any file or create a new file and it should automatically be uploaded to our server!

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

Increasing upload limits on GoDaddy

Information i got and used from https://www.godaddy.com/community/Managing-WordPress/Uploading-WordPress-themes-and-PHP-Limit-How-to-increase/m-p/1860#M110

Login to GoDaddy and go to cPanel

Click the user icon on top right and in the dropdown choose Manage Hosting

Then under the name of your website click Settings

Select cPanel link

Open the file manager

Choose document root option

Click Upload

Now we need a file called php.ini that changes the limits for us. You can download it here or create a text file with the following text

memory_limit = 128M

upload_max_filesize = 100M

post_max_size = 128M

And save it as php.ini

Now upload the file called php.ini by clicking here

Almost done

Close all tabs until you get back to the cPanel tab that looks like this

Or you can follow the steps at the beginning to get back here!

Scroll down until you find

Click on it, and then click the “Kill Processes”

Whew, all done. You can now upload large themes and stuff!

 

Buying hosting/domain

Navigate to the following link to purchase a plan

https://www.godaddy.com/hosting/web-hosting

Selecting a plan is based on how many websites you need and if you want any subdomains like forums.mydomain.com

For a single website you should be okay with the Economy!

Choose no thanks

Choose a domain

Change duration to 12months (can’t be less if you want free domain)

Create an account

Enter your details

Enter your billing address and credit card then purchase

For some reason, it took me to the sites page which was empty until I reloaded! So reload if needed

Click the little 3 dots to set up

Enter the domain you chose

Choose the server location

Only continue if you want them to install WordPress for you!!

If you want automatic installation of wordpress

Create an email if you need one

Now you can go to yourdomain.com/wp-admin and follow the wizard:

Now you can add some social/contact info

Choose any theme, as we’ll change it later

That’s about it for getting set up! The rest will be reviewed in class.

Modern CSS Exercise

Icon Fonts

Open this codepen and follow the instructions inside!

Hints:

  1. You can add the <link> tag in the HTML panel of CodePen
  2. You need the special markup from the first step in the CodePen to display an icon
  3. To do custom stuff, keep in mind that these use a font.. so anything you can do to a font you can do to them (font-size? color?)

Shadows and Gradients

Open this CodePen and follow the steps

CSS Frameworks Review

I will focus on 4 Frameworks that we should consider, each was chosen for what it offers compared to the rest. To use the include code provided below simply place the entire contents inside your head!

Frameworks

  • Bulma
    Website / Documentation

  • Bootstrap
    Website / Documentation

    • Key Points
      • Advanced framework with a decent learning curve
      • Utilized by a huge % of Themes you can buy, meaning if you plan to use a theme learn/use it
    • Useful links
    • Include code:

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  • Milligram
    Website / Documentation

    • Key Points
      • Super minimal framework and aesthetic
    • Include code:

      <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"> <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
  • UIKit
    Website / Documentation

      • Key Points
        • Perfect for building an actual web application like
          • Idea posting site (with comments etc)
          • Travel planning site
        • Basically, anything that isn’t a normal web page, but rather a functional system
      • Useful links
      • Include code:

         <!-- UIkit CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" /> <!-- UIkit JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>