CIS363B Course Project Page

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...

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: Header section: I can insert the page logo or slogan here. Menu Tabs: Include hyperlinks to take user to a specific page they want to visit. 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. Content section: This will carry main information of the HOTS w...

Hello professor and class, This week I'd discuss about the structure of site navigation. Beside Cascading Style Sheet (CSS), navigation is one of the most important thing when creating a web page. This either make or break the viewer's interest when they visit your site. There are 2 main structures that guarantee to make your page look better and more organized: Main Navigation: also called global or primary navigation. This show the top-level pages that is right below the home page. This style of navigation is generally used for sites that have a lot of information and they want the users to conveniently access right away such as FAQs, applications, etc.  Local Navigation: also called sub-level navigation or page-level navigation. This style of structure is below main navigation and goes into more details per page. This way, the user can focus on the the information each sub-level page provides. Some arrangement examples are Inverted-L, Horizontal, Embedded Vertica...

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