Now that you have passed your basic training in HTML and CSS through Code Academy, it’s time to see what you’re made of by building a web page all by yourself. Don’t get discouraged, do the best you can, bring your issues to class, and we’ll solve them.
You will take the supplied screenshot and replicate it with HTML and CSS.
- Remember step 1 for any web project is to create a new folder. Don’t work on your directly Desktop, or My Documents folder – create a new folder and save your files there.
- Use Brackets or a text editor of your choice, and make sure it colors the syntax which is helpful in learning. DO NOT use anything sophisticated like Dreamweaver. Dreamweaver will do things like close your tags for you, give you attribute hints, and stuff like that. This will not help you learn, it will just confuse you. Once you know HTML and CSS, THEN you use Dreamweaver. I think of it like an HTML calculator.
- Create a file called index.html in the folder you created. The first page or “home” page of any website is always called “index”.
- Create a file called style.css also in the folder you created. This is a common name for web CSS files.
- Your <head> section should have a <title>, <meta charset=“UTF-8”>, and the <link> to your stylesheet, see next bullet.
- Link your CSS file to the HTML. Use a relative file path. For example, since your HTML and CSS file are in the same folder, you can use: href=”style.css”. If your stylesheet was in a folder named “CSS”, then it would look like href=”CSS/style.css”. And finally, if your CSS file was in a sub-folder named “site-1”, it would look like href=”CSS/site-1/style.css”. Get the idea? If you need more help, just look it up. Looking things up is a big part of web development.
- Open your HTML in a web browser like Chrome to preview how it looks. At this point, it should just be a blank white page.
- Get busy coding. Write a bit of HTML or CSS, save it, then refresh in the browser. Code – Save – Refresh. Embed this process into your brain. Code – Save – Refresh. Code – Save – Refresh. Code – Save – Refresh. Wash – Rinse – Repeat.
- One more time, Code – Save – Refresh.
- Don’t get discouraged. Collect your questions and issues and bring them to class. You can also email me.
For the columns:
Columns are tricky, and there is more than one way to do this. For columns, approach this by using percentages for the widths of the columns and they should always add up to 100%. So if you have 4 columns, then 100/4 = 25%. Then you’ll need to use padding or margin to create space in-between columns, BUT remember that whatever you add to margin & padding, you must subtract from the width. So if the column is 25% total width, and you want a padding-right of 2%, then the CSS width of the column is now 23%. So:
- 23% x 4 = 92%
- 2% x 4 = 8%
- 92% + 8% = 100%
If you follow the above example, it works great, except the last column will have padding right which prevents it from lining up on the right side. To fix this, the container of the columns (what I usually name .row via a CSS class), can be set 102% (100% plus whatever your padding is). The extra 2% will accommodate the last column.
If you did padding-left, you’ll have the reverse problem and the left side won’t line up, and then the container of the columns can have a left margin of -2% (the negative of whatever your padding is).
It’s easier to show in class, so let me know if you can’t figure it out.