W3Schools.com and Stackoverflow.com and Foundation.zurb.com

Two useful sites to research information for free online regarding HTML5 and CSS3 code are: W3Schools.com and Stackoverflow.com. Foundation.zurb.com allows the web designer to work in HTML5 and CSS3 code; by applying a grid concept to enhance the ease of layout for the website.

Google Chrome "Inspect" code

In Google Chrome when checking the overall behavior of the website, right click and a menu pops up; then double click on the command "Inspect". In the Inspect mode, the width and height of various elements are highlighted, including the margin and padding, which is known as the CSS box model. Whereby, margin is defined as space between border and outside of box. Padding is space between content inside the box and the border. (Source: Murach, HTML5 and CSS3, 2015, p169).

To Build a Website the following is recommended:

When using Foundation software, a "wrapper" is not needed - as the grid defines the width by dividing the website into sections such as rows and columns. The total width when using Foundation is 12 columns in the grid. However, if Foundation software is not available, a div tag may be used with a unique identifier or id to define a "wrapper" in the HTML5 code. A div tag is used to define a section or division in HTML to group block elements. A unique identifier or id is used to name an element to be referred to in CSS3 coding. [Compared to a class that is used to define more than one element in an HTML document]. The "wrapper" may be defined in CSS3 coding with a width and position (relative) so that the elements will be placed in the normal flow of top bottom left and right. [please note that position (absolute) is when the element is removed from the flow and positioned next to closest containing block]. (Murach, p105, p99, p227).

1. Semantic HTML: HTML coding has defined labels for different areas of "content"

.

HTML coding outline includes: the "head" section - that may contain links to an external CSS3 style sheet. A "body" section, that may have a "header" and "main" sections that include navigation, lists, or divisions (known as "div" applied to organize the content). And, lastly, a "footer". Within a list of links to access another website or document - with the anchor "< a >" element coded in the id attribute (Murach, p260). I used a header section with 1 div class row and 3 div class columns using the Foundation grid that included links to other websites.

2. Valid Markup:

In HTML5 coding it is essential to use "tags", open and close, for each element. I used such tags in this HTML document, for example heading level 1, Exploring Web Design, with an open tag "< h 1 >" and closing tag "< / h 1>" (with no spaces).

3. Logical Element Choices:

The elements in HTML organize data/ content. The HTML breaks content into areas such as header, main, nav, footer. Main is used for the main content of the page. Nav is used for a section with links (Murach, p101). I used to organize the content on this website: head, body, header, main, and footer.

4. Linking and Media

HTML defines links with an anchor known as "< a >" and "< / a >" in brackets and are the opening and closing tags (without spaces). Links from one webpage to another is as follows: < a href = "http://www.full website address.com /" and description of the website followed by the closing anchor < / a >. A usefule guide for coding links is found on page 109 of the Murach's HTML5 and CSS3 3rd Edition (Murach, p109). I used links in the header navigation to the LinkedIn profile and Personal Website.

5. Stylesheets

In this index.html file there are two links in the "head" section to: a CSS3 file named portfolio.css and to a foundation style sheet. In the portfolio.css file there is CSS3 coding to format this index.html file for color, line-height, and, for example, margins. I used in the porfolio.css file to code the body section of the HTML file a background-color: rgb(190,226,248) a light blue found in the software program Paint.

6. Basic Styles

The portfolio.css file contains CSS coding that formats this index.html file for basic styles (such as border, margin, padding, font-size). I used for the footer text-align: center. I used different font-sizes for the comments section h1 and p (h1 tag is first level heading; the tag "p" stands for paragraph in HTML5). I also used border-radius for the navigation section with the identifier or div id named "horizontal".

7. Cascading

Cascading, means the more specific the coding is in relation to an element - it will take precedence over another that is more general. In addition, the last line of coding takes precedence over the the other lines of coding in a CSS3 coding file. I used the last line of CSS3 code for the footer to align the text in the center of the webpage.

8. Classes and IDs

Classes are used to identify many elements and IDs are used to identify only one specific element. In the CSS3 coding a pound sign identifies an ID and a period is used to distinguish a class. I used row and column classes per the Foundation software to better assist the responsive design process. For ID, I used an ID for the links - the personal LINKEDIN profile and WEBSITE page called ul id "contact". And, I used 3 div IDs in the header (logo_cup_picture; logo_cup_statement; and, learned).

9. Floating and Positioning

In the CSS3 coding there is the ability to code the term float either left or right to change the position of an element in the website design/ layout. The term clear - prevents an element from floating. This depends if the element is defined as block or inline. Block elements flow from top to bottom of the screen. Inline elements flow left to right (Murach, p202). Position properties such as absolute or relative. Absolute position is that the element is fixed in its' location on the website; whereas, relative position - the element moves in relation to other elements on the website such as the parent if it is a child element (Murach, p227). I did use floating and positioning prior to applying the Foundation grid, after the Foundation grid was used, I did not use floating and positioning.

10. Responsive Design

A responsive design, is so that a website can be viewed on different devices including phones, tablets, and computer screens. The Foundation grid software specializes in responsive design. I used the Foundation grid software to capitalize on this by using rows and columns to create the grid design for this website.

Exploring Web Design

Denise Heidelberg

Contact Information:

Phone: 203-524-4022

Email: Denise_Heidelberg@sbcglobal