Entry Seven - HTML and CSS

I’m cutting close for time and have been coding like a mad woman for the last 2 weeks. My initial website template is now complete, and I'm moving into adding more accurate and detailed content. I'm enhancing my lists within my divs, and adding links to images, and images to my links.

The base of my HTML and CSS came from the previous autobiography assignment. I started altering the code in Notepad++, and then transferred the files over to Dreamweaver so I could see my code and design in 'split' view.

I'm confortable with HTML coding, but still a little wobbly with the CSS, but I'm making vast improvements and controlling where my <div>'s are located. While I prefer to hand-code, I'm starting to see the benefits of using Dreamweaver as a tool to work more efficiently. I'm gradually getting used to navigating around Dreamweaver, and using it to add rules to my CSS in particular.

I'm also investigated fonts today and will continue to do so over the Christmas break.

Entry Six - mood boards

It's been a while since my last entry, mainly due to allocating the much needed time to building the HTML and CSS coding for my website assignment.

I started to build the html around the 4th and 6th of December. My moodboard images can be found on my Pintrest Board.

I had to backtrack and create moodboads in an official capacity by creating them on PowerPoint, which I hop to relocate onto my Final Project word document.

Entry Five - Wire frames

So I've created variations of Wireframes, it took me longer than expected, and now I'm falling a wee bit behind...I hope to create my moodboards, and analyze some of the main keywords, but I'm probably going to have to do some keyword analyzing and typography research over the Christmas break and get cracking on at least some of the HTML and CSS.

I will be using Pintrest to explore some of these features, but so far, what I'm seeing is getting so twee and tacky, it's pretty scary!

I have 5 different wireframes, all of which look pretty good, after building the code, I took the simplest elements of the wireframes as I am finding myself stuck for time and must keep my website simple. However, I believe simple is good. Potential visitors of my website need to be able to navigate the site quickly and efficiently with as little hassle of possible. I've learned that it is about striking a balance between fun and functionality.

One more thing...I should also mention that my site map navigation is complete. Hooray!

Entry Four - getting stated on the last BIG assignment

Still haven't successfully conquered Dreamweaver, I'm much better at coding by hand, but I figure it just takes practice.

In the meantime, the course is moving on. We are taking on our new assignment, counted as 50% marks for the entire course - Building and designing a website of our choice.

So far, Phase One of the assignment is near completion. I have established goals and proposed achievements for the new website. I have rough design work have completed a hierarchy chart of pages. My next step is to analyze keywords using  Google Keyword Toolbox  and design a wire-frame. I've gathered some content, such as the logo, but I would also like to start selecting colors and arranging mood-boards. A lot of the content, such as texts for our new website will come from the old website, but perhaps re-arranged or re-jigged to suit the new, comprehensive style of site. Better quality photos will be a must though.

If I were to continue my web design education, I would require the Adobe Web Design student package from software4students.ie.

Entry Three - Intoduction to Dreamweaver

We continue to move through the walkthrough assignment of Dreamweaver. Picking up where I left off is not easy. For one thing I brought in the wrong folder by mistake today, but luckily my tutor had some spare copies (thank you). So, pick up where I left off, I had to get reacquainted with some of the steps. Once I found where I left off, getting reacquainted with the Dreamweaver software proved challenging. I found my doing the HTML and CSS coding in Notepad++ or Text Wrangler, and launching it in a browser felt more 'pure' than using a Dreamweaver software to it all for you.

The interface is quite busy, and can be complicated at times because there is so many windows, drop -down menus, etc. that are designed to make things easier? I can appreciate learning the software on its own, but I can also appreciate learning the code on its own, combing the two together is like trying to run 2 methods in my head, hence there is quite some confusion. Using Dreamweaver is going to take some practice but I'm sure once I get the hang of it, I'll be flying. One peer said, its a bit like learning how to drive - there's buttons and gadgets all in your face, but one you learn how to use them, its quicker to drive than it is to walk.

Entry Two - divs, padding, and other ramblings

Last Tuesday, I conquered the <div>. I discovered it divides the content into 'boxes'. I follow the assignment and exercise instructions, and with practice I will get better.

I also discovered that anything with a # is a Div ID and anything with a dot (.) at the beginning is a 'class'. class divs determine the style of anything within that class where as Div IDs only style what is in that particular 'box'. For the assignment, 'Version 4a' of my web-page, I cleared the ‘.header’ class and changed it to a Div ID, #header. W3 Schools and Tizag.com  have excellent notes on the difference between the two for reference.

Throughout the assignment, I'm learning about padding and the 'measuring up' of my website. My wrapper, which contains all my style and content (other than the site background, the green wallpapered looking background with lavender floral patterns) must have a width of 960 pixels.

200 + 719 + (20+20) + 1 = 960 pixels of width within the wrapper.

As the web page scrolls down, the length of the web page is not important. However, if you wanted your content to fit within the confines of the space, you must allocate padding and make sure all your content can be fitted within your div, and certainly within your wrapper.

We are getting into building web pages using Adobe Dreamweaver. Up until now, we have been building pages using Notepad++ program on our Windows 7 computer, and viewing them within an Internet browser of our choice, I particularly favor Google Chrome.

Dreamweaver is handy for the split view, so you can see your code and your design side by side. We are now discovering that you can build a website from scratch, create your files using Dreamweaver, as well as many other handy features and shortcuts to optimize your time building and designing a website. There are several templates to choose from, and you can insert images and have the option to instantly copy those images into newly created folders for your new website. Dreamweaver has a handy bar going across the bottom.

My learning process is slow; I try to follow instructions word for word, though sometimes I get ahead of myself, which only causes confusion. My new mantra for this course has to be 'one thing at a time' even if I'm working on something completely separate, like helping a classmate, or organizing a folder, everything I do must have a logical step and concentration is going to be my greatest challenge. 

Entry One - The start of the Learner Record

This journal is a course requirement as part of the Web Design course I'm doing at Kenmare Adult Education Centre. As web design is conducted online, a reflective journal in the form of a blog is most appropriate.

We started in late September, so we are well into the middle, if not beyond the middle of the course and set to complete in January 2013. I have enjoyed what we have been learning so far; we have covered the 'nuts and bolts' of web design, HTML and CSS code.

From various sources, both inside and outside the classroom, anyone can learn to build a website using a Content Management System (CMS) like the one used for this blog. Other popular CMS include Wordpress, Joomla, and Tumblr. However, knowledge of code is quite useful if anything goes a-rye or perhaps one would like to know exactly how an entire website and it's contents work, thus giving more control to the web designer, and not at the mercy of the CMS developers and administrators. Learning the code has been interesting and I am keen to continue to learn more.

I could do with more practice outside the classroom. I do my work in class, and keep up with the lessons and exercises at w3schools.com. I did miss one day of class (my mother was visiting me and we took a trip), and now I am stuck on the <div> application. I know I will overcome this with time and practice. In fact, I enjoy trying to accomplish such tasks on my own before asking for help. Though if I find myself stuck for too long, I am comfortable to ask for help if necessary.