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
No comments:
Post a Comment