Hint to Understanding Proper Element Positioning ( ) & ( ) are two of the internet’s most used programming languages, its greatest translators and presenters of information. Hypertext Markup Language HTML Cascading Style Sheets CSS Image of HTML & CSS coding Both languages used in unison to turn this image above into what seems a lot more familiar to the lot of us. Image of a mock-up of ‘Microsoft.com’ dated: 9/20/2019 Getting started Choosing an Integrated Development Environment (IDE) First, you’re going to need an application that takes your typed text and provide various automated tasks. Auto-completing the syntax of code, supplying a list of possible values to an attribute or to increase readability. All for the sake of simplifying or rather speeding up the process of coding, à la . IDE Which do I use? IDE Honestly, there are a good many available to use out there with various pros and cons but for the sake of keeping it simple, I will mention three (3): , and . All free to use software. IDEs Brackets ( ) Visual Studio Code VSCode Atom Brackets VSCode Atom Personally, I have the three of these s installed but for the bulk of my work I usually just use . IDE Brackets Within your IDE Now that you have your preferred installed and opened, you will want to set your project folder within your to the folder you intend to be working in. IDE IDE For the sake of simplicity Lets just assume you created your project folder on the desktop. So, within you would: Brackets Video shows how to set the project folder and creating the index.html in which the website coding will occur Now that you have your project folder and index.html file (also known as the home page) created let’s get to coding. Code required within every document HTML HTML CODE BLOCK 1 2 3 4 5 6 7 8 Building Confidence in Programming 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "utf-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > link rel "stylesheet" href "css/reset.css" < = = > link rel "stylesheet" href "css/main.css" < > title </ > title < = = = > link rel "icon" type "image/png" href "images/ms_logo_icon.png" </ > head < > body < > header < > nav </ > nav </ > header < > main </ > main < > footer </ > footer </ > body /HTML CODE BLOCK For every HTML file that you create, for the most part, the general layout provided in the code above should be used. <!DOCTYPE html> This declares the html file as an html 5 document and it instructs the browser about which version of html the page is written in. More info available at Line 1  — w3Schools.com <html lang=”en”> This defines the language the html document is written in. More info at Line 2  — w3Schools.com <head></head> A container for all head elements. Which includes but isn’t limited to, a title for the document, scripts, styles and meta information. More info at Line 3, 10  — w3Schools.com <meta charset=”utf-8"> his specifies the character encoding for the HTML document. UTF-8 — Character encoding for Unicode. More info at Line 4  —  T w3Schools.com <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> efinitely going to need this line of code if you intend on building media query responsive web pages. More info at Line 5  —  D W3schools.com <link rel=”stylesheet” href=”css/reset.css”> —  Links to the reset.css stylesheet which will be used to reset all margins, paddings, headers…etc. to 0 for cross browser styling. CSS Reset Sheet can be downloaded . Line 6 here <link rel=”stylesheet” href=”css/main.css”> —  Links to custom made CSS stylesheet. More info on the tag found . Line 7 <link> here <title>Building Confidence in Programming</title> —  the shown title of the web-page as displayed in the browser’s tab associated with the html file. Line 8 <link rel = “icon” type = “image/png” href = “images/ms_logo_icon.png”> provides a file reference to an image that serves as a tab icon within the browser. Line 9  — <body> The tag encompasses the actual content of the page. <body></body> HTML <header> The tag, which can be used multiple times within various elements, contains the top-level elements, or rather the more important elements within its parent container. The element is the parent container for the element. <header></header> <body></body> <header></header> <nav> The element contains all navigation-related elements, those usually placed at the top of a page. <nav></nav> <main> and <footer> The element tag encloses all of the page’s main content and the tag holds all other relevant information about its containing element (the element in this case). Just like the tag the tag can be used multiple times but within different parent container elements. More info on tag at <main></main> <footer></footer> <body></body> <header></header> <footer> <footer> W3schools.com Supplemental code to help with element positioning CSS Before we move on to how to order our div elements within our index.html to form our page lets create our main.css file, which will hold all of this page’s CSS related information. Note: I generally tend to name the CSS file which will be used across all the HTML pages as main.css but for page-specific CSS if needed I would create a separate CSS file just for that HTML page. CSS CODE BLOCK 1   *, * , * { : border-box; }
  2
  3 4   * {
  5 : ;
  6 : ;
  7 : ;
  8   }
  9   .* { : blue solid; } ::before ::after box-sizing /* Used for Debugging purposes */ -webkit-transition-duration 0.25s -moz-transition-duration 0.25s transition-duration 0.25s :hover outline 1px /CSS CODE BLOCK The aforementioned bit of code has helped me greatly in understanding element positioning and how much space an element is taking up within its parent div or just on the page in general. After creating the new main.css file, in generally the same way you created the index.html file (as shown in the previous video up above), you can simply copy and paste the CSS code above into the CSS file you just created. The block of code causes the element’s padding and border to be calculated within the element’s width and height. This keeps the element’s actual width and height specified even if you decide to add padding to it. Without setting an element’s box-sizing to border-box adding to its padding property would cause the actual size of the element to increase creating design distortions. More info at *, *::before, *::after { box-sizing: border-box; } W3Schools BoxSizing The block of code adds a blue outline to every element once hovered over by the mouse. I find this to be a simple and effective way to understand just how all the elements added to your page are interacting with one another. .*:hover { outline: 1px blue solid; } Link for website in video GitHub Repository Link Proper document structure HTML Recently added to HTML in version 5 are new semantic tags which help with document outline and structure. Tags such as , , , , , , , and just to name a few. Some of the tags mentioned has already been introduced to you up above. A less compact list of the new semantic tags available in HTML5 can be found at: <main> <nav> <header> <footer> <section> <article> <aside> <figure> <figcaption>, https://www.w3schools.com/html/html5_new_elements.asp Online Document Outliner Tool A good online tool to check the document outline structure of your web pages can be found . here For the sake of easy to follow examples the will be used on the sample . Document Outliner Tool website’s live link Document Outliner Tool used on example website You should also go to this GitHub repository and take note of the index.html file to follow along. here Important semantic tags HTML5 <section> As aforementioned, the tag contains the majority of a web page’s content so within this tag, using this element as a container element we would start each page off by sectioning off the various parts of the web-page. In doing so, this is where the tag becomes relevant. <main> <section> The element, well, does pretty much exactly as it implies it groups all of its child elements into a section. Essentially speaking, it can be imagined as a chapter in a book. A good thing to note is that a tag can exist within another tag and also that each container requires a header ( tag) <section> <section> <section> <section> <h*> Note: * representing numbers 2–6 interchangeably. Document outline of the site found at GitHub repository link <article> The element, like the element requires a header. This element acts as a container for information which can stand alone by itself and make complete sense. Articles are generally seen as independent blog posts, stand-alone topics or news stories. <article> <section> Document outline of the site found at GitHub repository link <aside> The aside tag is used as a container for supplementary text containing information related to its surrounding container. The gives a pretty good explanation of its use but to sum it up the aside tag provides complementary information about a topic and only provides additional insight. That being said the aside tag supplies optional information that even if removed shouldn’t affect the topic discussed at hand. doctor HTML5 and <figure> <figcaption> The tag is used to enclose various blocks of information illustrations, diagrams, photos, code listings, etc. The information within this tag is generally explained as self-contained content. <figure> The tag is used within the figure element as a container for the captioned text describing the image or ‘figure’ in question. <figcaption> Useful Additional Resources: Document Outliner gsnedders.html5.org HTML 5 Outliner validator.w3.org Markup Validation Service W3C's easy-to-use markup validation service, based on SGML and XML parsers. Free Icons fontawesome.com Font Awesome fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography www.w3schools.com HTML Color Picker Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript… developer.mozilla.org @supports The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS… www.w3schools.com CSS Functions Reference Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…

Google

Microsoft

Mozilla

HTML & CSS: How to Gain Programming Confidence as a Beginner?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating a Forum CMS with React.js and Ruby on Rails

7 Websites That are Useful for Web Developers

A Beginner's Guide to Making a Career As an HTML/CSS Developer

How a Beginner can Learn HTML in 4 Hours

How To Embed Single Photos From Google Photos on Your Website and Notion Page

Creating a Forum CMS with React.js and Ruby on Rails

7 Websites That are Useful for Web Developers

A Beginner's Guide to Making a Career As an HTML/CSS Developer

How a Beginner can Learn HTML in 4 Hours

How To Embed Single Photos From Google Photos on Your Website and Notion Page

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps