Lesson 1
This is meant to act as a guide to create your own personal website, to use to showcase your portfolio as you pursue a career in front-end design and development. For a much more comprehensive guiide, please visit Shay Howe as he dives much deeper into best practices, and fundamentals.
All HTML documents have a required structure that includes the following declaration and elements:
<!DOCTYPE html>, <html>, <head>, and <body>.
``
<title>Hello World</title>This is a web page.
``-
Let’s open our text editor, create a new file named index.html and save it to your Desktop named “my-website” and save this file there.
-
Within the index.html file, let’s add the document structure ``
- Inside the
<head>element, let’s add<meta>and<title>elements. The<meta>element should include the proper charset attribute and value, while the <title> element should contain the title of the page—i.e. “my-website”
``
<title>Styles Conference</title> ``- Inside the
<body>element, let’s add<h1>and<p>elements. The<h1>element should include the heading we wish to include and the<p>element should include a simple paragraph to introduce ourselves.
These terms include selectors, properties, and values.
SELECTORS
Selectors target a attributes value, <id>or class value, or target the type of element, <h1>or <p>.
Within CSS, selectors are followed with curly brackets, {}, which encompass the styles to be applied to the selected element. The selector here is targeting all <p> elements.
p { ... }
Some of the properties we can use: `background, color, font-size, height, and width, and new properties are often added like this:
p { color: ...; font-size: ...; }
Now we can determine the behavior of that property with a value. Values can be identified as the text between the colon, :, and semicolon :
p { color: orange; font-size: 16px; }
CSS div { ... } HTML
CSS .awesome { ... } HTML
CSS #shayhowe { ... } HTML
In order to get our CSS talking to our HTML, we need to reference our CSS file within our HTML.It is the best practice to us a aan external sheet rather than a , which is referenced from within the
Within the <head> element of the HTML document, the <link> element is used to link the two together. Because we are linking to CSS, we use the rel attribute with a value of stylesheet to specify their relationship.
The href attribute value needs to correlate to this path accordingly. i.e. main.css file were stored within a subdirectory named stylesheets, the href attribute value would be stylesheets/main.css, using a forward slash to indicate moving into a subdirectory.
USING CSS RESETS Every web browser has its own default styles for different elements. How Google Chrome renders headings, paragraphs, lists, and so forth may be different from how Internet Explorer does. To ensure cross-browser compatibility, CSS resets have become widely used. One of the most popular resets is Eric Meyer’s reset, which has been adapted to include styles for the new HTML5 elements.
IN PRACTICE
-
Inside of our “MY-WEBSITE” folder, let’s create a new folder named “assets.” We’ll store all of the assets for our website, such as our style sheets, images, videos, and so forth, in this folder. For our style sheets, let’s go ahead and add another folder named “stylesheets” inside the “assets” folder.
-
Using our text editor, let’s create a new file named main.css and save it within the “stylesheets” folder we just created.
-
Using Eric Meyer’s reset, we can tone down these styles, allowing each of them to be styled from the same base. To do this let’s head over to Eric’s website, copy his reset, and paste it at the top of our main.css file. http://meyerweb.com/eric/tools/css/reset/
-
Let’s connect it to our index.html file. Opening the index.html file in our text editor, let’s add the element within our
element, just after the <title> element. -
The element, let’s add the relation attribute, rel, with a value of stylesheet.
-
We also want to include a hyperlink reference, using the href attribute, to our main.css file: assets/stylesheets/main.css
- <title>My Website</title>
Resources & Links