Tag Archives: week2

Attempting CSS

Leave a reply

For this week’s lessons on Codecademy, I felt more lost and behind than the previous week. It was definitely noticeable the difference in pace, since the lesson had just picked up from where it had left off the week prior. Particularly, I was having issues with CSS, I think primarily because that concept of language is literally something I have never seen before. I know I will have to backtrack and redo the lessons in order to understand how to execute it. Additionally, when I was on GitHub, I felt like I was back in time trying to customize my MySpace account, which was nostalgically hilarious since my HTML skills have only gotten worse since then. I was using GitHub the website version, and the main issue I had was to figure out how to implement CSS on my repository. To be honest, I did not figure it out and looking back my only guess would be that this is something I need to do on the GitHub desktop version.

For the reading, the Inspect and Edit Styles article started off with a screenshot of an inspected element. Even after reading the article from top to bottom twice, I am still slightly confused with elements it discussed, such as examine and edit box model parameters. Personally, all this type of information and learning is completely different than I am used to. I was hoping to challenge myself by taking this class and I think that already by the second week I can feel it. The verbiage that discusses HTML and CSS is very particular and is throwing me off more than anything. I just think that it is dense, and have to constantly look up words and their reference on Google is slowing me down more than I originally anticipated.

Talk is cheap. Show me the code.

Leave a reply

Although this week has been filled with a lot of hard work, I believe that, through the projects, I was able to learn a lot of valuable information. There is a saying that the only way to become a good programmer is a great amount of practice. Thus, I like the fact that this field of study does not demand too much theory, but it requires practice to consolidate acquired knowledge.

The main assignments for this week were Codecademy’s lessons and prototype homepage on GitHub (using Sublime Text). The first one allowed me to gain the basic understanding of the direction I should take my GitHub project. The second platform has taught me how to play with the code. The homepage project itself was interesting, but I felt a bit unsatisfied, because the weekly lessons did not teach me much about the visual side of an HTML document, i.e. the CSS. As I was able to learn, even experienced programmers do not have everything memorized, which is entirely not the point. The art of programming consists also of the ability to utilize research and search for knowledge on the web. Moreover, learning from one’s mistakes is the most effective way to gain knowledge. Thus, by seeing my work “change” on the Google Chrome browser, I was able to tell if there is something wrong in my code or if I need to make other corrections in order to improve readability.

To conclude, I feel like I made a lot of progress in my programming studies. However, I will be going back to some lessons on Codecademy or Khan Academy, so that I won’t lose the progress I’ve already made. I believe that learning everything at once is not a solution. There is also a need for systematic work on developing programming skills, not coding from project to project, once a month or several months.

Coming together

Leave a reply

This week for me represented a big step forward. I was quite nervous to build a prototype homepage from scratch — I was pretty sure I was unprepared to hand-code a full webpage. The assignments for this week ended up taking me more time than I anticipated and that — combined with starting a new job and some light procrastination — pushed me past the deadline.

But however long the work took me to do, in all the work ended up not being as difficult as I feared. My fingers started to type the correct tags with ease and my page slowly but surely came together. The lessons taught some important new information, especially styling conventions, that for the first time for me felt as if they were logical extensions of what we’ve already been learning.

It did take me a little while to figure out an ideal workflow when actually using Sublime Text in conjunction with GitHub. I found myself working past where I should have entered a commit, and therefore felt I had to cut out some code, make a commit, and re-enter it in Sublime Text and make another commit. I also wanted to check my page before a commit, so I ended up writing some code, popping it into a browser, refining it, and then committing. Just logistically, it’s a lot of jumping around on a laptop screen, so once or twice I got a bit lost between different windows on my laptop.

I also started to get a sense for how I should use CSS — I can see how a separate style.css page would be almost required for a larger page. But for our purposes for this assignment, using inline CSS between <style> tags felt more natural and easier to manipulate.

 

Practice, practice, practice!

Leave a reply

As I glanced at the syllabus for this week’s assignments, I could not help but my find myself stressing out about creating a prototype homepage. Might I add, this feeling lasted for majority of the week and resulting in me avoiding Web Development homework at all costs. On Sunday morning, I decided it was time to stop being dramatic and begin digging into Codecademy lessons: “A Closer Look At CSS,” “CSS Visual Rules,” and “CSS Setup and Selectors” before taking a stab at the prototype homepage. Procrastination at its finest? Yes, but I have quickly found that procrastination might not be suited for the newbies of the coding world.

In last week’s post, I compared coding to my experience of learning a new language. I remember it became apparent that I needed to practice Arabic each day to become more proficient at the language. I don’t believe that procrastination is suited for learning languages, and neither is it for learning code. For this upcoming week, I have made it a goal of mine to practice the class material each day of the week to feel more comfortable with the different languages and desktop apps like Sublime Text and GitHub. Once I reviewed Codecademy lessons from last week and completed the new lessons focused on CSS for this week, I felt more confident in testing out some of the tags for my homepage. Honestly, I have a hate/love relationship with CSS. I think it is incredible that I can style the HTML text, but naming some of the HTML text as a class or ID confuses me. I feel like I am having trouble deciphering whether sections of the HTML text should be a class or an ID. I’m hoping to ask many questions in tomorrow’s class about this!

Also, I must owe credit where credit is due and thanks to Susan I was finally able to set up my brand new laptop with Sublime Text and GitHub while understanding how the connection of these apps work. I am still a little confused about the full functions of GitHub even after this week’s readings, but I am excited to become more acquainted with it in the future.

Git Gud

Leave a reply

This week was interesting. It was good to have the chance to apply all of the HTML and CSS skills we learned from previous lessons. And I love how user friendly the lessons are after we complete them, allowing us to review past work. Formatting the page and figuring out what I need to add (tags, for instance) was not the most difficult part, though.

I think the most difficult part was figuring out all of the necessary steps for GitHub. I went through some tutorials online, and most of them pointed me in the direction of a few steps not discussed in class (Terminal), and it is a bit challenging when you know the major steps but a few minor steps in between are fuzzy. Regarding the readings, I think I was able to get everything up OK with refreshers.

Going back to the lessons, I think it was the “A Closer Look at CSS” lesson that provided a great example in the beginning about such a seemingly minor step (not linking the HTML and CSS pages) taking away the design of the entire page. The page on selectors was really helpful, as well. It answered questions I did not yet have, and it gave shortcuts (p, h1 designating the same thing instead of two different ones) that seem minor in the beginning, but offer large returns regarding time saved in large projects toward the end. And noting that we use !important as sparingly as possible is also… important. As it could be near impossible to figure out why, given the natural evolution of a webpage over time, specific elements are unnecessarily stagnant.

I think I just need to reread some of the lessons, especially the GitHub tutorial, to solidify and mature the seeds that have already been planted. I’ll do that some this week, in addition to the assignments for this week. Hopefully this is just an introductory learning curve that, just like FromSoftware games, I have to get over to git gud and be successful.

Git In It

Leave a reply

CSS was exciting to get to figure out this week. We have been working on HTML and the content of a page. Getting the chance to take our work a step further and develop a design for the content was interesting. I did the Codacademy lesson “A closer look at CSS,” but did not finish it and, when I went back the next day, I had to upgrade to pro so I did the Khan Academy exercise. I found the Khan Academy one very useful and a better way of learning for me because it was easier for me to listen to someone narrate than to read the instructions in Codecademy. However, I prefer Codecademy’s exercises because they are more interactive and they walk you through everything step at a time.

The piece about responsive web design that we had to read for class this week is a very crucial one to understand. It is extremely important to understand your audience and cater your website accordingly. User experience is one of the most important areas that businesses need to focus on when providing a service for their customers. The way the website looks and the way it is designed are necessary for that. A business must conduct research to know who their target audience is and the medium used to access a business’s website. For example, if your business is attractive for millennials, they are most likely to use their phones to access your website. You need to make sure your web pages can be viewed well on phones. Since web pages are originally set up for desktop view, it is important to make sure the viewport is suitable for phones.

As for the GitHub portion, it took me some time to figure out GitHub desktop. I was confused in the beginning because I thought Sublime and GitHub are connected. I realized after googling and reading more that Sublime is one of many text editors for code and GitHub is a hosting site to upload our work and share with others. My goal in the next couple of days/weeks is to get more comfortable using Github. 

Everything Matters!

Leave a reply

This week’s assignments and reading point to one significant element in programming and coding for me: “every single thing matters.” It was so evident how a single omission can disorganize and in some cases throw the entire piece of work out of order. If there is one single  lesson from this assignment, it will be to practice regularly. There seem to be so many rules and elements for both HTML and CSS that it requires consistent practice and review.

The biggest challenge for this week was linking my HMTL file to the CSS in Sublime. I watched a series of tutorials using the link tag but to no avail. The CSS tutorial from Khan Academy worked the magic for me. I began by creating a style tag (<style></style>) and immediately the expected changes would be displayed. I also had a challenge with adding a downloaded image element to my HTML. The HTML file in the browser captured the image but it wouldn’t display. It was a bit frustrating at first because all the elements seem to be in the right place. After watching a few tutorials, I realized it was not peculiar to me. The experience from GitHub seems pretty straightforward, but I have yet to understand how it can be effectively used in my future projects.

I reckon, I’m beginning to get a sense of how things are and that’s pretty exciting and fulfilling as this is my first time doing anything web related like this. Being able to somewhat comprehend the HTML hierarchy and somehow getting bits and pieces of the CSS rules and how they relate gives me a lot of hope for what is ahead, as I look forward to learn from everyone.

Welcome to my MySpace

Leave a reply

Good Design(?)

Well, I made my first “homepage” using HTML and CSS, and I have to admit I was immediately transported back to my parents house in the early 2000s. I never used MySpace, but I loved Xanga, a blog-based social site that allowed users to edit their own code. I spent hours researching the correct HTML for important things such as:

  • Background music that played when a user visited the site
  • Cursor options that transformed the mouse into small animals and objects (there was likely malware associated with this)
  • Font colors and styles, etc.

I imagine for many students my age, this was the first experience with HTML they had. What struck me the most in this week’s homepage repo assignment was how complex a simple, elegant web page must be behind the scenes. Yes, it was relatively straightforward to change my font to Comic Sans and add a gif of Neil Degrasse Tyson. However, those notably beautiful webpages (Atelier AM, American Documentary, and others here) must have been painstakingly designed to be beautiful on a range of devices.

CSS Stylesheet

I decided to link an external stylesheet to my HTML file, rather than use inline CSS stylings. The Codecademy exercises on CSS made me appreciate how quickly CSS styles can accumulate, and how much more organized it felt to have them all in one place. (Though I will admit I wished Codecademy had hinted to alphabetize the styles for ease of use—which seems like a no-brainer best practice.)

I struggled for a while figuring out how to link my stylesheet to my HTML file, and finally realized it was a combination of incorrect href syntax AND incorrect CSS syntax, so that even if the files were linked, the changes weren’t appearing in my test browser window.

After a few episodes of trial and error, I was ready to give up on the separate stylesheet and just add in-line CSS styles, but I knew that for my final project I would want them to be separate, and I would be better figuring it out now rather than later. I’m glad I did.

A note about GitHub:

I can appreciate the utility of a tool like GitHub to manage the uncountable tiny changes and bug fixes/additions to code. The mechanism of committing changes is simple enough to understand, but I’m concerned that the more changes you commit, the harder the code is to actually read. It takes practice, I guess…

New Language, Who dis?

Leave a reply

This week we began working with CSS on Code Academy and I am pretty excited. I am a very visual person, so I like all projects I work on to be visually pleasing—visuals are actually the first thing I work on when working on a project or presentation. So I am excited that we will be learning how to style the text and features that we create using HTML. During the lesson I did experience some difficulty trying to differentiate the difference between HTML and CSS when on the same document. Well more so, how to create functioning CSS within an HTML file. After a few failing attempts on Code Academy I was able to figure it out, well not figure it out, but get a better working understanding. Also, a part of our lesson this week we started learning the basics of creating a website using what we’ve learned so far with HTML and CSS. At first, I thought we were learning very basic things and it would be a long time before we actually knew enough to create a functioning website, but I was wrong. That was actually a pleasant surprise and a bit of an incentive to pay attention a bit more, because what we are currently learning isn’t just boring basics or busy work that has nothing to do with web development but actually the real deal. This exercise was a great opportunity to put some of those new CSS skills to work. My goal is to really use that a lot for my final project site, so I would like to spend some more time learning some CSS tips and tricks. So, this week I’ll probably Google somethings to see what other people recommend or have done to achieve their desired site ‘aesthetic’ and also use the ‘command+inspect’ tip that Prof. Greg showed us for some of my favorite sites.

CSS

Leave a reply

I found that I was a quick learner when it came to HTML and it was a basic programming language. CSS added a slight complexity but it wasn’t anything I couldn’t handle. With HTML you’re setting a basic framework for your website, so it doesn’t look that fancy. When I made my prototype HTML page, I added so much HTML code and it looked complicated through Sublime. When I put the file into my browser, it was such a simple page. I thought I accomplished so much, but I just made a paragraph with a title and posted an image. With CSS you can really see a page come to life. While working on the Codeacademy assignments, it was helpful that the coursework moved step-by-step. There’s many aspects to CSS and multiple ways you can manipulate a page, so sometimes its hard to keep track of what you’ve changed. After learning CSS, I can only imagine how long it must take a web developer to design a more complex website. Now that I know how to inspect the styles of websites that I go on everyday, it’s interesting to see the work that someone put in to creating it. CSS is definitely my favorite programming language I’ve learned.