What to do when Mamp stops working

Sometimes, due to the existence of duplicate installations, software updates or etc., the Mysql database will not start when you first open Mamp. Fortunately there is a quick and easy solution!

Dealing with the (Many) Limitations of Google Sites: the Header

As someone with experience in web design, who can actually write HTML5 and CSS3, you will likely find Google Sites painfully limiting. Here are a couple things that could make a difference for your header:

Wordpress Site Title Issues

Trouble with your home page title displaying differently then the title on your other pages?

On the home page, the title is inside of <h1> tags, changing the style from the default for any other pages. The fix is to set the same style for the title by itself and for the title inside of <h1> tags.

The way this works is you use "#site-title h1, #site-title" as the selector in the style sheet. Then specify the margins, font-size and the font-weight.

Any further styling is a matter of preference.

Setting a Homepage in Wordpress

Wordpress was originally created to allow people to create their own blogs. Over time Wordpress has added more and more general web design capabilities, making it a great Content Management System (CMS).

As blogging was the original focus, the default "home page" or landing page of your Wordpress website is the "blog page". If you do not want the blog to be the landing page/home page, you can change the setting in the Wordpress Admin panel.

Go to "Settings" towards the bottom of the left side menu:

Select "Reading"

Change "Your latest posts" to "A static page"

Next to "Front page", select your "Home page"

Make sure to save your changes!

Testing Out Your Site On Other Devices/Emulators

Happy news! We now have 2 tablets to use to test our websites functionality in different operating systems and screen sizes. The Galaxy Tab S is a small android tablet and the Surface Pro is a large Windows based convertible tablet. We will also have an iPad Air and iPad Mini but they have not arrived yet.

As a web designer/developer, it is extremely important to make sure that your website will be functional and look good, no matter what the device type or screen size. There are programs and websites that can help you test your page for different devices but nothing is as effective as actually checking your website on different devices.

Website Templates and Jquery

Professional web developers often create a template of the website layout before working on the content for each page. When you are finished getting the HTML structure and CSS styles to work on your template page, the page can be duplicated for each content page of your site. This process can save you a good deal of time.

Another great time saver is to have separate HTML files for areas that repeat across all or most of your pages. Often the header, footer, and possibly navigation could be kept in separate files. This allows you to make changes in one place that are then applied to every page. Again - this saves you a ton of time going forward if you make any changes.

Read the following document for directions on how to use Jquery to include your HTML header, footer & etc. on your HTML pages:

Web/Programming Languages and Includes with Jquery

Submitting Your Website

Everything for your website should be in a folder in Google Drive. Make sure you have shared the folder with me or I will be unable to view your hard work!

The link will use the same format that we have used previously:
www.googledrive.com/host/your_id_number

Obviously your_id_number should be replaced with the the id number for your folder. Keep in mind, id= should not be part of the link.

If one of your pages is named index.html, the link will go directly to that page as a website.

Make sure you view your link before you submit! Often paths to images, links, and CSS style sheets get broken in the process of moving live to the web. It is always important to double-check that your site looks the way you expect.

If it is not obvious which html pages I should look at, please let me know in a comment in Google Classroom.

You can add the link directly onto your copy of the Challenge Rubric or you can add the link directly in Google Classroom. Either way, make sure you take the time to fill out your rubric.

HTML5 Footer in the wrong place?

If you are using HTML5 and you've used the footer element, you are likely to notice that your footer moves up to the top of your page, below the header, instead of staying down at the bottom of your page where it belongs. It is super annoying but there is a pretty quick fix.

In your CSS:

Using footer as the selector (or a class/id if you prefer), set the position to absolute. Set directional properties left and bottom to 0.

Don't forget that if you are using an absolute position, you do have to set a containing element with a position (probably relative). If you do not already have a containing element with a set position, you might want to set "body" to relative.

You may find at this point that the footer is still overlapping more then you would like. Try changing the value for "bottom" to a different number (with a set unit). If you want the footer to move lower you may need a negative value.

If your footer still won't position itself where you want, let me know. I would be happy to help you troubleshoot!

Text-wrapping issues?

If you are having trouble getting your image and text to position properly, and you are using the CSS "float" property, try the following:

In your HTML page:
Make sure that your image is inside of the element that contains your text.

Give your image a class or id.

In your CSS style sheet:
Tell your image to float to the left or right.

If this does not work, there may be another element or property elsewhere in your code that is having an impact. If you think that is the case and another floated object is effecting your image/text, you can always use the "clear element" where you want the other float to stop taking effect. Values for clear are left, right, and both.

If this doesn't help, please let me know and we will figure it out!