Heroes of The Storm - Page Layout

Hello professor and class,

Today I'm going to go over my page layout for the course project. As we learned from week 3 lab, I will use the box model and CSS to modify a template page and use it for all subsequent pages, including Index.html.
I decided to go with the vertical navigation for the Main Menu to maximize the content space instead of horizontal navigation. I also wanted the content areas to have at least 2-3 sections. This way I can breakdown the information into smaller paragraphs so the user can easily read. In general, there are 5 basic areas I want to point out for the layout:
  1. Header section: I can insert the page logo or slogan here.
  2. Menu Tabs: Include hyperlinks to take user to a specific page they want to visit.
  3. Heading section: This is where the page title would be to notify the user where they're at. It's also coordinated with the Menu hyperlinks to show the location of the page.
  4. Content section: This will carry main information of the HOTS website is about.
  5. Footer section: can include hot links or copyrighted information. 

Comments

Post a Comment

Popular posts from this blog

Course Project _ Week 4 Milestone

Image
Professor and class, This week, I like to discuss about the outline of my course project. I started to implement the box model to the CSS. I'd like compare the original sketched out outline with the implemented HTML codes. I hope everyone can take a look and give me feedback for improvement. Figure 1: Original Sketched Outline Figure 2: Implemented HTML/CSS Outline As you can see, I still want to keep the vertical navigation. I used class "active" in the <img> tags to I can enable the highlight when the menu option is chosen. I so wanted to added a photo for the header. I decided to go with purple theme color to match with the logo. The content section is divided into 2 columns for different information posted. I'm still working on the details in the next couple of weeks. What I want to do next is figure out how to move the content section up right next to the navigation area so the design looks more balanced. I was thinking to insert a slid...
Read more

Week 5 Course Project Progress

Image
Hi professor and class, This week I continue to update on the progress on my course project. I added more information in the pages as well as created a survey form for feed back. I included text fields for name, email address; text area for more feedback space, radio buttons, check boxes, option list. There is one problem that I have which is displaying the Information Received website. After hitting the "submit" button, the error message reads "the local host server is not found." I'm doing more research and trying to figure out why the error happened to fix it for next week. Below are my progress pictures. Thanks for your feedback! -Mai
Read more

Week 1 Blog Post

Image
Hello professor and class! It took me a while to figure out what I want to write for this blog. Beside coding, gaming is another passion of mine. Recently, Heroes of The Storm is my favorite one that I've been playing during free time. Then it hit me! I would want this page to be about gaming strategies and experience. My course project is creating a website that give my audience a crash course about Heroes of The Storm. Everything including character picks, map control and more. I'd like to introduce new and intermediate players  about upcoming news. This also includes patch updates as well as talent statistics and how well they are doing in the meta. I hope this blog will capture it all my experience learning HTML/CSS and have fun posting about my favorite game at the same time. Thanks for stopping by! -Mai
Read more