You’re Halfway!

Is Doctor Frankenstein’s Monster Style Time!


This part of the program will define how successful you will be as a Web Developer. BTW “Frankenstein” is a fictional character who first appeared in Mary Shelley’s 1818 novel Frankenstein; or, The Modern Prometheus.

In Shelley’s Gothic story, Victor Frankenstein builds the creature in his laboratory through an ambiguous method consisting of chemistry and alchemy and by getting the pieces for the “creature” from different human bodies. Shelley describes the monster as 8-foot-tall (2.4 m), hideously ugly, but sensitive and emotional. The monster attempts to fit into human society but is shunned, which leads him to seek revenge against Frankenstein. Luckily, the “creature” that you are going to build is just an “ugly website” but also using ambiguous methods consisting of typing and copying code from different sources and not using Dreamweaver or other builders that codes for you, which is less dangerous than what Doctor Frankenstein did.

The challenge as the new CODER you are (yes, you already are one!) is to build a website by using a simple text editor. Again, No templates. It is okay if you copy and paste from Dreamweaver or any other code source, but please do not copy everything at once or from the same source. For your own sake, I recommend you to code by memory at the beginning, at least to write the fundamental structures, once you have them, then go ahead and find external sources. Please try to do it piece by piece and being aware of every little part that you are adding. Think that this is not about showing anything to your teacher, this is about proving to yourself that you know how to put together a website.

The requirements for your Frankenstein’s Style Website are:

  • One HTML5 documents named Index. (the main HTML doc)
  • One PHP Contact Page
  • At least one CSS3 doc.
  • At least one JavaScript effect. JavaScript Libraries are accepted. (Click here for ideas).
  • Social media images, linked to yours.

1. Website logo
You will use the logo that you have created using Illustrator.
Make it a PNG (Transparent file) so that we can see the website (color o image) background.

2. Header
The header is the top portion of the website; there is where your logo and the main menu must be. The header is usually a permanent fixture of the site, where the main content might scroll beneath it. There is information that is important to website navigation, that is why the name of this HTML doc., needs to be “index.” because all the browsers are always looking for the “index” to relate it with what people are searching.

3. Menu
Needs to be placed at an easy-to-reach place on the website to provide a natural way to navigate the site. The main menu is usually contained in the header, or on a collapsible pane (especially in mobile views of websites), and allows navigation through the pages of the site.

4. Body
The body area of a website is the area of the site that contains the most. There are many different kinds of content, but in this case, you are going to talk about how to become a successful freelance web designer.
It is ok if you copy and paste but always linking your website to the source to this topic.
5. Highlighted content
Highlighted content, often exclusively on the home page, guides visitors to parts of your website that will convert into website goals. Website goals are the actions, interactions, etc. on your website that fulfill the very purpose of your site. Booking a flight on a travel agent’s website, or buying goods on an online store are examples of this.
6. Call To Action (CTA)
CTAs are essential for guiding visitors to your website to relevant information, completing website goals, and navigating your site. CTAs can be prominent, such as buttons, or more subtle, like linking within a text, but all serve the same purpose: guiding visitors to information that is relevant to them.

7. Internal Links
Internal links are useful for creating an ideal flow through your website. In the example, the link takes users to the blog page, where they can peruse the full list of blog posts and find something that interests them and effectively completing a website goal. Sidebar content and highlighted content CTAs are another way of achieving the same thing, with an even more effective attention-grabbing effect.

8. Install a Contact Form
They are a are an ideal way of gathering information from your visitors. You’ll find them for free all over the internet as PHP files. You can also use it in HTML, but they will never look and run as good as the PHPs.
9. Make Buttons

As CTAs (call to action), prompts to complete an interaction like a form, or just as a link to another part of your website (menus use this often) buttons are handy interactive parts of your site that prompt engagement. Unique styling to these parts of the website can be helpful in brand building, highlighting the CTA related, and guiding the visitor’s eye to a particular piece of information. Make one that calls to your phone number.

10. Footer
The footer is the round-up of the website. Typically the footer will contain essential links on the site, or, sometimes, links to all of the pages of the website. A copyright and date stamp is a standard, to protect the information on your website and let visitors know when your site was last updated. Any other pertinent information – perhaps a mini contact form, a CTA, a scrolling photo gallery, or any additional permanent details you would like to display at the end of every page – must be contained in the footer.

11. Social links
Social media links are a popular addition to most websites, and its links displayed on any part of the site. If a visitor likes your website, wants to get updates from your website via social media, or prefers getting in contact via social media, these links will prompt further engagement with your site.

A social media presence is essential to creating and maintaining a brand online and is excellent help with engaging with your online audience.
Please link your website to your social media, if you have not social media, then its time to create it.

Dead Line: 30 calendar days.

Down here, some help.