Internet and Web design - My Portfolio

Assignment requirements

As a student of the short course, Internet and Web design, I was tasked to design a fully functional website of at least 8 pages. The assignment specified that the site must include a contact form that uses JavaScript to validate the email address a user enters in the form, a CSS-stylesheet that defines the font (Arial 12 pt) and whatever other styles I may use in the site, and the use of this stylesheet in the layout of the pages. The menu system must make use of roll-over images. The folders must be organized and store the site images, javascript and stylesheets in, e.g. subdirectories named “images”, “js” and “css”.

Herewith a brief outline of the technologies used and the outcomes of the assignment as well as a summary of my participation on the Osprey forum.

Technologies used

  • Xmind - for website structure
  • Adobe Illustrator - for image creation and manipulation
  • Notepad ++ - HTML and CSS coding
  • Firefox Developer and Firebug - site inspection and preview

Website layout and structure

  1. Top bar Navigation (2 pages)
  2. Footer
  3. Page redirect
  4. Repetitive Elements 4 5
    • Header
    • Main and Top bar navigation
    • Sidebar (Right panel)
    • Footer
Footnotes
  1. Javascript are used to verify email address
  2. Roll over images are used for top level menu items
  3. Page not found can be tested with this broken link
  4. Repetitive elements inserted on individual pages using PHP includes statement.
  5. Repetitive element pages been filed in the /includes folder

HTML and CSS - key concepts demonstrated

  1. HTML
    • Basic - Layout, headings, paragraphs, formatting, comments, external, internal and anchor links, head, images, nested tables, block quote, forms and symbols
    • Other - SEO (meta data), HTML5 elements and Javascript
  2. CSS
    • Basic - Syntax, selectors, backgrounds, text, fonts, links, relative links, lists, tables, border, outlines, margin, padding, dimension, display, positioning, floating, align, combinators, pseudo-class, navigation bar, image opacity, image sprites and attribute selectors
    • Other - Media Queries (Responsive design), text effects, image maps and CSS3 animation

Hosting services and folder structure

I used the hosting services suggested by the course tutorial, FreeWebHostingArea.com

.
Folder structure
  • Pages on root
  • Folders on root
    • Folder title: "CSS", containing:
      • style.css - main style sheet
      • slideshow.css - hoem pages slider
    • Folder title: "Files", containing:
      • Meal plan .pdf files
    • Folder title: "Images", containing:
      • Sub folder title: "Header": all images relating to the navigation menu, sub menu, header and footer
      • Sub folder title: "Icons": all icon images
      • Sub folder title: "Recipes": all food images
      • Sub folder title: "Sliders": all images for home page sliders
      • Sub folder title: "Sub-pages": all images for sub pages
    • Folder title: "Includes", containing:
    • Folder title: "Javascript", containing:
      • Script files for smooth scroll, back to top scroll and sub menu functionalities

Active Participation

Correct anchor for "Back to top"?- 2 months ago

Hi Ron I created a ID at the top of my page called "top" and at the bottom of the page I added Back to top. It worked, but the only thing is, it changed the URL in the address bar to websiteurl/#top - which didn't look nice.
by Amandavz - 70971714 - Internet and Web Design Sem 1

Re: Favicon - Titlebar icon- 2 months ago

I finally got mine to work. I deleted the system favicon.ico in the root and replaced it with my favicon.ico image, but it kept on returning the default system icon (the web hosting service provider's favicon). I then uploaded the favicon to the image directory and changed the href path in the index.html file to "images/favicon.ico". That did the trick.
by Amandavz - 70971714 - Internet and Web Design Sem 1

Re: Assignment- 2 months ago

Thanks Ron - it makes a lot more sense now
by Amandavz - 70971714 - Internet and Web Design Sem 1

Re: Assignment- 2 months ago

Hi Ron, If I wanted to use an "Internal Style Sheet" and not "Inline Styles", I was wondering if the size, font face and alignment for the body text can be specified in the head section (as we do with the color of the text) instead of using it for each paragraph. My current code is: h1 {color:#222;} p {color:#444;}
by Amandavz - 70971714 - Internet and Web Design Sem 1

Topic E (Embedding and re-sizing Images)- 2 months ago

Thank you for the advise - I have re-sized the image - image loading much quicker.
by Amandavz - 70971714 - Internet and Web Design Sem 1

Topic E (Embedding and re-sizing Images)- 2 months ago

Good day, The image that I would like to attach to my web page (of assignment 1) is too big. If I want to re-size it using the HTML code, would it be better for me to specify width="50%" height="50% or should I rather use absolute values (px)? I have read that the page loads faster if the browser knows the exact size of the image. Will percentage values make the page load
by Amandavz - 70971714 - Internet and Web Design Sem 1

Useful Links- 2 months ago

To add to the list of helpful links... The CSS selectors for "classes vs id" always confused me (not knowing when to use which one) until I read a very short "dumb down" explanation on www.tizag.com under the section: Advanced Topics: CSS - ID vs Class. There are also some other handy basic explanations for the subjects covered in our course.
by Amandavz - 70971714 - Internet and Web Design Sem 1

Re: Section1 - Technical Introduction to the Internet- 2 months ago

Hi fellow students, Just for fun, if you wanted to view the latest browser stats, it is available on W3shools.com Browser Statistics. Interesting how Safari's usage are steadily growing (probably because of the increased market share of Apple) and how Firefox's % are slowly declining
by Amandavz - 70971714 - Internet and Web Design Sem 1