Basically, the first steps to coding my website was seeing what would be the same code, and what code would be different. For Example, the top bar or menu bar, all code is the same in all HTML files. After creating the basic layout of the home page with different divs, boxes, headers, text, interactivity, icons and so on, the HTML pages had to be linked.
The website has a menu bar, three columns(col.1, col.2, col.3) of videos(in this case static pictures), name of video, views, and uploader. When coding the website I had a problem when resizing the page. Before coding this website, I never had an idea of how many times divs are used. Now I know... So basically, home page was pretty simple. When it came to the sidebar, it was a bit more complicated, but managed. Consists of divs(once again), hover option, fonts,ids, classes, headers, links & icons.
A problem I discovered in class with Mr.Redd was that you must put the links inside the lists, as links can not be a child of a link. Had to change this on every single HTML page(was a bit*h).
As you can see, code has been arranged with the links inside the lists.
Another problem encountered was a duplicate error. Not knowing this hassled me as all need to be changed into different id's. ID's were changed into different classes in order to solve this issue.
Process of Coding - overview of what was done in task(website)
In the first coding lesson, I honestly loved it. Everything was going smooth, learning about what HTML and CSS actually are. Coding simple things like how to open an html file, headers, body, opening & closing tags, I felt like a kick ass coder like those in the movies, an A Game Hacker. Was a great feeling. SADLY, that feeling only lasted for about a week.
A week after was the second lesson of coding. That was the day where my opinion towards code changed completely. Was not managing to understand what was going on while trying to catch up to the code on the big screen.
Throughout these weeks, I learned that coding is something to be learned alone. You must be in a relaxed state with W3 Schools by your side. Since I had no idea how to even start my website for Task 3, I had to do a W3 Schools Crash Course. It worked. In less than 3 days I basically learned everything there was to know for basic website coding. What I did was take a lot of notes on how to code.
Things like divs, breaks, links, language option, title attribute, html links, size attributes , headings, color, fonts, horizontal rules, styles, formatting text, and styling HTML with CSS was studied. After taking all these notes, I would look up for the code of something I did not know how to code.
Styling HTML with CSS
Basically, CSS can be added to HTML elements in 3 ways. These are Inline, Internal & External.
Inline - by using the style attribute in HTML elements.
INLINE Example:
<h1 style="color:blue;">
Internal - by using a <style> element in the <head> section
INTERNAL Example:
<style>
body {background-color:powederblue;}
h1 {color:blue;}
p {color:red;}
</style>
External - by using an external CSS file(like it was done during lessons)
EXTERNAL CSS Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
Other criteria include CSS fonts, CSS border, CSS Padding & Margin, id Attribute, Class Attribute, external references, local links, adding images as links, lists including unordered lists, ordered lists. These led to Horizontal Lists(menu bar ;))
IMAGES OF WRITTEN CODE
