Example basic file structure
A CSS framework is a library of CSS you can use to more rapidly create a website based on standards. They are often built with good defaults, are generally mobile-responsive, and are focused around clear UI patterns. The most famous is CSS Bootstrap.
Some frameworks specialize in customizability. Others are drop-in. Most require CSS knowledge to be able to tailor the framework to match your site design goals and your individual assets of photos, text and other content.
PROs:
CONs:
Classless CSS refers to a framework that does not require you to add css classes and ID’s to your own HTML page and should work out of the box without customization. The upside is an instantly-readable website. The downside is that these sites can look generic and minimal.
Huge list of classless css frameworks here. Or do an internet search.
It is okay (and normal) to use multiple stylesheets! One semi-custom approach would be to use a classless framework, and then add your own stylesheet after to customize to your own style and needs.
Create a stylesheet for these class notes. You can work solo or in a pair.
Your stylesheet should have styling for body, h1, h2, h3, img, p, code, and any other tags you wish to add.
Before you start, come up with a design plan.
File structure. File system. File paths. I know, you’re yawning already. But if you understand the basics it will save you mistakes or problems later.
Here’s the basics:
Your website must sit somewhere. You should build it in a
folder, which we’ll call a directory. When you are finished coding, you
will upload it to a server. The name should avoid using spaces: it’s
better to use hypens - or underscores _. (An
example: fridge_photos). The folder holding all of your
files and sub-folders is called the root directory. In
shorthand, this is written as /, the forward slash.
Inside your root directory it is considered best practice to place an
index.html file. Since the index file is a default, if
someone visits your domain root (for example if you buy
fridgephotos.com) then the browser will actually serve
fridgephotos.com/index.html, though it will just display
fridgephotos.comin the address bar.
In addition, you should have an external css page and javascript files here, if it’s a simple site. For a more complex site, you may have a folder of css and a folder of javascript. You may also have a folder of images or other assets
Example basic file structure
With the above basic file structure your index.html could look like this:
<!DOCTYPE html>
<html>
<head>
<title>Fridge Photos</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1>My photos</h1>
<img src="images/photo1.jpg">
<img src="images/photo2.jpg">
<img src="images/photo3.jpg">
</body>
</html>If you have a website with a number of pages, you may have tried
adding more html pages to your root folder, with names like
contact.html, bio.html or even
page2.html. That is not considered best practice. The
proper approach is make a separate directory inside your root directory
for each page. And each of these will have their own index.html file.
This way someone can visit fridgephotos.com/bio instead of
fridgephotos.com/bio.html.
View of the bio bio folder:
The bio directory has its own index.html page
View of the js javascript file folder:
You may have multiple files in a js directory
Based on the above file structure for a more advanced site.
Let’s say we are editing the bio page. We will have a bio photo, and we need to use two scripts, jquery.js and our own main.js on the page.
Remember that starting with the forward slash means starting in our
root folder. So the following file /bio/index.html means
the index.html file we are working on is inside a bio folder which is
inside our fridge_photos folder!
/bio/index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Fridge Bio</title>
<script src="/js/jquery.js"></script>
<script src="/js/main.js"></script>
</head>
<body>
<h1>My bio</h1>
<img src="/images/bio_photo.jpg">
</body>
</html>For this page, we are loading the jquery.js file from the js folder
located in the root directory since the file name in that line starts
with /. The next line loads the main.js file in the same
folder.
Check out the line of code with the image file above. A different way you could display the exact same image is:
<img src="../images/bio_photo.jpg">This says to go up one folder (to the parent of the current folder holding the index.html file you are editing in the bio directory), then go in the images folder there and display the bio_photo.jpg image file.
directory = a folder
. = current folder
.. = parent of current folder
/ = root directory
examples:
/images/photo1.jpg = photo1.jpg inside the images folder inside the root directory
../assets/head.jpg = the parent of this current folder has an assets folder in it with an image file head.jpg located inside that
Web space is a folder in your name that is mapped to a virtual Web server, and which is published on the Internet. You will need to create a file named index.html, and then you can view the file online at http://Students.Purchase.edu/YourFirst.YourLastName/ (not a real page, example only). Web Publishing is used in various classes, but you can also use it for any materials you want to publish on the Internet. Please note that the web pages you store here are accessible to the public, so do not post anything illegal, or anything which you do not own or have the rights to publish.
CTS Knowledgebase with info on server space and FileZilla
Download FileZilla CLIENT.
HOST name: students.purchase.edu
FTPES – FTP over explicit TLS/SSL Logon type: ‘Ask for password’ (or
Normal)
User: your campus username Transfer settings: Passive
Note: Back up your web server. Don’t assume it will always be there! Servers crash and lose things.
HTML:
<div class="flex-container">
<div>ITEM1</div>
<div>ITEM2</div>
<div>ITEM3</div>
<div>ITEM4</div>
</div> CSS:
.flex-container {
display: flex;
}With flexbox, you can use these CSS selectors:
Change the direction your items flow. Instead of left to right (the
default), let’s flow down in a column. Just add
flex-direction: column; to the css of the container.
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}alternatively: flex-wrap: nowrap;
Use this to align items
.flex-container {
display: flex;
justify-content: center;
}
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;align-items is used for aligning items!
Play with these here
You will be evaluated by: