Using an External CSS

 This week's project is the most complex thus far. We were tasked with building a web resume that includes our picture and describing our education and work experiences. For this project, we are using HTML with an external CSS, that is, we are constructing two documents, one containing the texts for the web page (the HTML) and one containing instructions on how the web page should look (the CSS). Because styling a website can often involve a ton of code (as I have discovered this week), having the CSS in a separate file can reduce a lot of clutter in the main HTML code.

Building the HTML file is the easy part. By this point, I am confident enough with using HTML tags that I can plug in my information from my resume fairly quickly. The challenging part, though, is the external CSS file. I had to try a lot of different things to get the web page to look the way I want. For example, I wanted the paragraphs beneath each entry in the Education and Experience section to be indented. However, I did not want the last sentence (the part that includes a link to my email) indented like the other paragraphs. To solve this issue, I created a class called .indented and applied it to the paragraphs that require indentation. I also wrapped the last sentence in a footer tag and applied some padding so that it looks more separated from the rest of the texts.

Another issue I ran into was that at one point, the changes I made to the CSS did not reflect on the web page. I was trying to change color of a heading, but no matter how many times I changed the color, the color on the web page remained the same. I later discovered that this was simply due to an omission of a semicolon at the end of the color property. Once the semicolon is back in place, everything was working again. This made me realize that in coding, even the smallest of mistakes and/or omissions can have great impact. One would have to be very thorough and pay attention to every detail.

This project helped me to build on my HTML skills even further, as this project required the application of everything I have learned thus far (HTML tags, page layout, formatting texts, etc.). I had to review a lot of information from tutorials just to remember how to use each CSS property correctly. That missing semicolon was also a valuable lesson in paying attention to every small detail and not rushing over things.

Comments

Post a Comment

Popular posts from this blog

Post #2: Accessible Documents and Websites

Even though I have taken courses in special education, the concept of accessible documents and websites was never brought up until I began the Designing Educational Media course. I find it somewhat ironic that we live in a world full of technology integration and pushes for diversity and inclusion, yet the knowledge of creating accessible documents for individuals with disabilities is not more common place.  As it turns out, creating accessible documents is much easier than you may think. Many programs, such as Microsoft Word, are already equipped with tools to help achieve that goal. With just a few considerations, you can dramatically improve the accessibility of any document or website: Organize your content so that it is more easily navigated by screen readers. The easiest way to accomplish this is to make sure that that the headings of each section follow a hierarchy. Microsoft Word already has built-in features so that you can adjust the font of your texts to Headings 1, 2, 3...
Read more

Coding with HTML

These past two weeks in ETEC 5213, we began a unit in HTML coding. I had no prior experience with HTML coding, so I was very eager to learn new things.  The task for this week was to build a website to introduce ourselves using basic HTML coding that included heading, paragraph text, imbedded image, links to a website and email, and a change in font or background color. Since I use a MacBook, I used Text Edit to write my code. Overall, I found the procedure to be fairly easy. The tutorials were very well-structured and easy to follow, and the code itself follows very structured and logical steps.  I encountered a few minor challenges while completing this project. One disadvantage with writing code in Text Edit is that you are not able to preview the website as you code to make sure that your code works the way it was intended. I found an easy solution by coding with the Tryit Editor on w3schools.com first before transferring my code to Text Edit. The Tryit Editor allows you t...
Read more