WEBD 100 – Course recap

Course Review

Over the course of the semester we learned the basics of HTML and CSS, what they are, how they work, and how they come together to work together, link together and give us the full front end of websites.

Server Management

We started with learning how to use our servers. The server/hosting is the backbone of all the work we do. Without a server we can’t work. Some people struggle with this part, especially with connecting to the server and file management.

Things to remember:

The public_html folder is the only folder that can store the files to your website and be properly accessed from other computers.

To store multiple sites, simply make a folder within the public_html folder and name it accordingly (preferably with a name that is simple and easy to remember), and store the files to the site within that. So if you wanted to have all your assignments on your server in an orderly manner. You would:

• Store the files to your main site in the root of the public_html folder
• Store the files to your 1st assignment in a folder named “assignment1”
• Store the files to your 2nd assignment in a folder named “assignment2”

And so on. You could then build up links on a specific page on your main site (like a portfolio page on your main site) to the sub folders that have your projects in them.

So the links would look like:

www.yoursite.com/assignment1
www.yoursite.com/assignment2

And so on.

Connecting to the server should be a very easy and seamless task for the most part. The biggest issue that people new to development encounter is not remembering passwords or storing them in an orderly way or using the wrong password.

It is very important to begin to remember passwords and/or use strong passwords if you store important & sensitive information on your server. As discussed earlier in the course, the easiest solution is to use a password vault.

https://www.keepassx.org/downloads

And store the passwords in a clear and ordered structure within the password vault. It is also crucial to keep a backup file and copy of the passwords database and the program itself on the thumb drive that you store in a safe location in your home.

HTML

When it comes to the HTML aspects, we covered the basics. Starting from scratch, analyzing a blank page and the structure of such. We then built up the basic structure of a web page and further expanded on this, adding images and linking pages together. We also learned tags and learned to link to external CSS files as well as internal CSS. We also learned how to build up tabular data.

Things to remember:

To understand the concept of building a webpage better, it is good to try and visualize exactly what we are doing when we are building webpages. When we are building a webpage or a website, we are doing a few things. But to visualize it, a good trick is to imagine that you are building a network of sorts. Every time you link a page you build up that network of things linked to each other. Every time you add an external file you essentially do the same.

Remember that when you add images in your computer you must add the said image in reference to where that image will be on your server (this is also why it is always good to have an “images” folder right along with the HTML files for your site, stored in the same parent folder as your site and link the image from that location.

For example: If you had 2 assignments on your server in the same structure as previously discussed.

www.yoursite.com/assignment1
www.yoursite.com/assignment2

You would be able to further expand on these links (and as such the folder structure) to be:

www.yoursite.com/assignment1/images
www.yoursite.com/assignment2/images

This means that on your server there is a public_html folder that holds all the files and folders for your site, this includes your main site and all other sub sites IE the assignment1 and assignment2 folders in this example > In the assignment1 folder there are all the files and folders that are relevant to assignment1 which includes a sub folder named “images” > In the assignment2 folder there are all the files that are relevant to assignment2 which also includes a folder named “images”. Which would reflect in the URL:

www.yoursite.com/assignment1/images or www.yoursite.com/assignment2/images

Any time you see a URL like:
www.yoursite.com/whateverthename
/whateverthename is just you accessing a folder in the URL

Then…
/whateverthename/nameofactualfile.html
nameofactualfile.html is just you accessing the actual file.

And then linking other files, whether they are other HTML pages, CSS files, images or whatever is just connecting more resources to an existing resource by specifying the path (sort of like address in which it resides on the server) it is located at.

As far as the HTML code itself goes. It is good to leave the indents in but keep them uniform. Example:

<p>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>

The above block of code is not recommended.

<p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit,
    sed do eiusmod tempor
    incididunt ut labore et
    dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud
    exercitation ullamco laboris
    nisi ut aliquip ex ea commodo
    consequat.
</p>

The above block of code is recommended.

CSS

When it comes to CSS we learned quite a bit. It controls all the aesthetic aspects of what we do. We learned a lot of basics, changing colours, positioning, typography and more.

Things to remember:

Remember to keep clean and uniform formatting structure in your code. Whether your personal style is to indent and double space or indent and not double space. Keep it clean.

Remember to use commented out notes when you need to.

Remember to reference images properly in the CSS (a lot of time the image src (source) is wrong and the reason why your images do not show up).

Remember to pay attention to details, it will help in debugging. A lot of times the reason a code does not take is because of minor errors.

Remember that .selector means it’s a class and #selector means it’s an ID.

Remember to try new methods to achieve different outcomes and or combine different methods to achieve your goals.

Remember that your selector can be named whatever you like. You are the programmer. All that matters is that when you specify a selector for example, that you link it in the HTML.

Remember that you can easily deploy a number of selectors in your CSS by simply stating them out, you can make as many as you need and save the CSS and as long as it is linked to the HTML files that need it, those selectors will be readily available to deploy in your HTML.

Remember that CSS is more fun and forgiving than HTML (In my opinion) Treat the visual aspects of development as a place to experiment! It’s more fun than boring HTML.

Categorised in: Lectures, Portfolio, WEBD 100

This post was written by amax