Welcome to Your Student Website!
This webpage is an introduction to basic HTML and can be used as a template to start designing your own online portfolio for the course. The best way to learn HTML is by experimenting. Find the "student_page" folder that you downloaded, and re-name it with your fab academy student number (check your email- your instructor sent this). In this folder, you can directly edit the sample HTML pages and change the text and images in order to build your own website. Note that the folder contains a file called "index.html", as well as some other HTML files. The index file is your homepage, the other files are other pages within the website. Note that they all link to each other in the naviation bar, and that you can change/add/delete pages as needed. Note that there is also a "main.css" file in this folder, which contains style and formatting rules for your website; again you can experiment with editing these parameters. Lastly, there is also an "images" subfolder, in which you will place the images and video that you want to add to your website.
We will be using Brackets, a modern open-source code editor that understands web design. It's a lightweight, yet powerful, editor that blends visual tools into the editor so you get the right amount of help when you want it. Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other editors.
The Basics
First, some basics:
HTML- Hyper-Text Markup Language. This is the code that you will be using to create your webpage. You will use the Brackets code editor to modify and change your HTML code, edit text, add images, etc. If you want to preview your webpage, just go to File> Live Preview and this will open the page in your web browser.
CSS- Cascading Style Sheets; the "style rules" of your document. With CSS, you can modify font, header size, color preferences, etc. In the Brackets editor, click on the "main.css" tab on the left. This will open your CSS definitions, which you can customize.
Structure- For more in-depth information regarding HTML structure, w3schools.com is a great resource. Look through this page now to get an overview of basic HTML structure.
Interactive Editing with Live Highlight HTML elements and CSS rules
The Brackets text editor is interactive. In the editor, go ahead and click on one of the paragraph (p) tags. Note that the "opening" and "closing" tags will both highlight. All of the text between these tags makes up one paragraph. Brackets does this to quickly and clearly show you how your text is structured. Go ahead and do the same with one of the header (h) tags. Now go ahead and open the "main.css" file on the left side of the editor. In here you will see all of your style rules. Note that header tags and paragraph or "body" tags have their own parameters such as size and color, which you can modify right in the CSS file.
Keeping track of tags becomes really important once your code becomes more complicated. In this webpage, the code is seperated into three main divider (div) tags, which are used to divide the code into sections in order to achieve a desired page layout.
Look for these "div" tags in the editor. There is one up near the top with the ID: "header", one right below it with the ID: "nav" for navigation, and one after that with the ID: "section" for the main body. Again, if you click on any of these tags in the Brackets editor, the corresponding opening and closing tags will highlight. Try clicking on the "section" div tag. Notice that you have to scroll all the way to the bottom of the page to find the closing tag. Tags somethime "wrap" around other tags; this is why the interactive hightlighing feature will become useful as your code becomes more complex.
Brackets also makes it easy to see how your changes in HTML and CSS will look in the web browser.
When your cursor is on a CSS rule, Brackets will highlight all affected elements in the browser. Similarly, when editing
an HTML file, Brackets will highlight the corresponding HTML elements in the browser.
Brackets will open a live connection to your local browser and push HTML and CSS updates as you type!
**Note that while Brackets will also support Javascript files (in addition to HTML and CSS), you want to avoid using Javascript plugins as they will not be supported by the GitLab version control system that we will be using in this class. However, do not worry about GitLab right now, all you need to worry about is your webpage, we will introduce GitLab when the course starts.**
Adding Images
Images: In the same folder where your "index.html" file is located, there should also be a sub-folder named "images". Here is where you can place all of the images for your webpage. It is important to put images within this folder so that when we add everyone's site to the server, the images can be properly linked.
Make sure to keep your images at a reasonable size and resoultion (web resolution is typically around 100 dpi). For more information on adding images, see http://www.w3schools.com/html/html_images.asp
Note that unless specified, the browser will expect to find the image in the same folder as the webpages. You will have to indicate that the image is located in the images folder by adding "images/" before the name of your file, as seen in the code below, in the Brackets editor.
Going Further...
Feel free to explore some online templates if you want an easy way to stylize your page by browsing layouts online. Again, w3schools.com has some good resources.
Need Help?
If you get stuck please email me at: kelly.l.zona@gmail.com
Good luck and have fun!!!