Tag Archives: HTML

Learning the basics to code

Leave a reply

Coding is an important skill more than ever today. It seems to be a skill employers are looking for more from aspiring journalists today. Learning the basics to it today reminded me of learning how to do different math problems back in high school or college. Not because the basics to coding are as complex, but because the process of learning of them is similar. Learning how to do a math problem usually starts by watching the teacher complete a similar problem on the board. Often, you will follow along and understand the steps the teacher is taking, nodding along as the teacher arrives to the answer. But, once you sit down to do a problem yourself, it is impossible to evaluate how well you grasp the material. Without the teacher’s help, you’ll come to understand what confuses you or what steps you’re forgetting.

Similarly, when I was going through the Codecademy exercises, there were times when I would run into trouble and use their “show me a hint” feature, which was usually helpful. But if I was still stuck, I eventually noticed that you could ask for the solution. While I appreciated that feature when I was stuck, I also think it offered a bit of false comfort. I could nod along and tell myself I just had a minor error and *basically* had everything right, that is not actually the case.

With coding, minor mistakes have enormous consequences. Or so it seems to a beginner. Forgetting to close a tag or include a quotation mark can make the difference between the code functioning or not. As we go along, I am trying to figure out the best way to learn through Codecademy — when to struggle with the code and when to ask for a hint, or when to struggle with the code and when to ask for the answer. Moving to the next slide was helpful in itself because, just like a math problem, sometimes you need to just look at a new problem.

Yikes.

Leave a reply

We’re at the halfway point (or near it, at least). Just when I thought things were going great and I was excited to put what I learned into action, it all blew up in my face. I thought I had a pretty good grasp on jQuery but this week, it slipped through my clutches.

Here are a couple things I learned:

  1. If something doesn’t sound familiar, ask for help immediately. Don’t assume it is just another way to say something you already know.
  2. Write down thorough notes when doing the Codecademy lessons. I did this with my HTML and CSS lessons, but stopped writing as much when I got to JavaScript and jQuery. Once it was time to create something of my own, it was harder to recall the step-by-step.
  3. Attention-to-detail is key. Coding is particular. One wrong character and all the slides that were previously hidden show up again, even though you just figured out how to get your button to work after spending hours just figuring out that you had to load the jQuery before the JavaScript in your HTML (true story).

If you couldn’t tell, this week was challenging. This video helped me a little, but I still couldn’t quite get it and I still don’t know exactly what it is that I don’t know.

Here are a couple specific questions I had:

  1. When working in JavaScript, do you use language from both jQuery and JavaScript? Or is it that once you load jQuery, you have to use it the whole time?
  2. How do you increment/decrement in jQuery(/javaScript?)?
  3. What am I doing wrong when trying to increment that makes all of the slides come back up?

Anyhoo, jQuery will not take me out without a fight. I’m coming to class with my pencil ready, and my mind clear.

Here’s a sneak peek of what you can expect for my midterm:

Diana O. Eromosele is a software developer at Newsela. She is also the founder/developer of categorizedtweets.com, a tool that sorts politicians’ tweets out by issue so constituents can easily take a quick look at what they care about. When she’s not busy coding, Diana also teaches web development languages. She has a journalism background. Look out for my profile to find out how/why she made the switch!

An Uphill Battle

Leave a reply

It is no secret that the gallery assignment was a tough one. The entire class — not an exaggeration — struggled with completing it. So what is the gallery assignment, anyway? Our class was tasked with creating a homepage (easy-peasy) that contained a slideshow of photos (not so easy-peasy). The HTML portion of this assignment was like a walk in the park. A few brackets here, a heading there, and throw some divs in the mix — you’re good to go. The CSS was a little tougher. Figuring out the exact numbers I need for “top” & “width” (what the heck is auto??) & trying to decide if my position should be relative or absolute probably took me a solid two hours. But, CSS turned out to be no match for the evil-two-headed-monster that is JavaScript & jQuery. Missing class didn’t help, but I think even if I were there I would have still had issues. Dollar signs, squiggly brackets, and commands that didn’t make sense to my human brain — all hope felt lost.

I tried, tried, and tried again to understand how to make it work. The internet was helpful, but also confusing. Every source had a different way of doing a slideshow, so there were no basic commands I could turn to. I was plugging and chugging in different things from W3 schools, Youtube, Wired, and some smaller sketchier sites. I spent hours trying to make it make sense. I left and came back. Still nothing. I left again and came back again, and still nothing.

It just didn’t work.

So how does my tale end? I eventually gave up. I plugged in an automatic slideshow from W3 schools and begged for forgiveness in the /* comments */. It wasn’t a proud moment.

Still, all was not lost. We took the time in the class period following the assignment to really dive into how to do it. All was explained, untangled, unmangled, and demystified. For now, the battle was won and our men could return home.

But, whispers lingered in the air of a more terrifying conquest looming in the near distance. The natives call it: “A whole entire website, like seriously.” I fear what is to come, will my men survive?

Tough Week at the Office

Leave a reply

This week was not fun. Coming off of last week, which was the beginning of the JavaScript learning, I was anxious to be able to add a new kind of code to my work. The Codecademy assignments, at first didn’t feel to difficult but definitely started to pick up compared to html and css. However, the main difference when it comes to all 3 coding languages we’ve learned, was JavaScript was significantly more difficult to apply than the other two. I had little to no difficulties applying the Codecademy lessons to the assignments we had in the beginning.

With this gallery though, there felt like there was no end in sight. I sat down on Monday and figured out out my html that was already started in class, add the css aspects of the code and after about 45 minutes in my confident was pretty high. I thought to myself “hey look at me, coding, nice.” Little did I know this confidence and enthusiasm would soon fade.

I first took a look at what we had done in class and tried to use that as a base to move forward. The problem being that I really had no idea where I was trying to go. I got the gist of the assignment, hide some photos, press a button, the photo shows up with a new caption, going back and forth back and forth. The buttons weren’t too hard and neither was adding the images. It’s when it came to hiding the photos and having the captions show up I had difficulties. I tried to go on YouTube and watch videos that would show me how to get where I wanted to be. I, without any hyperbole, watched different Youtube videos for 2 hours on Monday night looking for guidance. I even texted 2 different classmates to see if they had any idea. What was funny was when they told me they were going to text me for help. That’s when I figured this may not come out the way I wanted. All in all, it was a good to experience the struggle for now I must guide myself until it all comes together.

The Genius of jQuery

Leave a reply

So up to this point, I understood that everything had its place on a separate file. It’s kinda like how people in the different schools stick to each other. But here we are as journalism majors, taking a very computer science-y class. We’re bridging that gap and putting our different skillsets together in order further our journey into the coding world.

I think learning jQuery after being introduced to HTML, CSS, and Javascript is much like our figurative bridge we made between journalism and web development. jQuery makes it easy for developers to target HTML elements and make them interactive. Much like the hierarchy system in HTML, the Document Object Model (DOM) is set up like a family tree. We can even refer to elements as parents, children, and grandchildren of another element within the code.In addition to targeting elements by familial relationship, we can target them by closeness to a current element. Another pretty cool function is the find method. This is a way to target a singular method out of a group of descendants to an element.

Going into this week, I was pretty nervous about learning something new. JavaScript kinda killed my confidence, but jQuery helped me redeem myself. I understood the concepts and caught onto the coding formats pretty quickly. I’ve also come to realize it’s much better to at least grasp the concepts rather than just be able to regurgitate out code.

 

Week 3: Challenge Accepted

Leave a reply

So far, we have learned about the different parts of a website such as the head, body, and paragraph in HTML. The following week, we learned how to make these parts look pretty using CSS, which is a language that focuses on the styling of a website.

Up until this week, I hadn’t had any major difficulty getting through the Codecademy lessons. The way I was powering through the lessons made me think coding was not as scary as I originally thought. I even found myself really getting into manipulating CSS to make a web page design more colorful.

This week’s JavaScript unit seriously challenged me. It was so different from HTML and CSS. I can’t say that I liked it if I’m being honest. However, I do understand the importance to learn this programming language. JavaScript uses three data types (strings, numbers, and booleans) to organize information. The lesson on using booleans made the most sense to me because it was a different way of writing an “if, then” statement.

The area where I started to get confused was with the arrays. I understood the concept but when I was applying it, I had to re-do my code a couple of times. When I got it wrong, I would look at the solution, go back, and correct my own code. It helped to see the solutions so that I could see where I went wrong. Also, I kept forgetting that sets of numbers start with 0 in JavaScript!

One concept I found interesting was how DOM elements relate to jQuery. Combining JavaScript with HTML using the library was much easier in comparison to combining it using syntax.

Overall, I appreciated this week’s challenge with JavaScript. I’m quickly learning that coding involves a lot of problem solving. With this perspective, it makes it easy to get excited about learning more.

HTML & CSS

Leave a reply

Before completing the Codeacademy assignments, I was nervous about the complexity of HTML and CSS. I was expecting to use a series of zeros and ones to create a simple webpage. I was shocked to learn that I could type in phrases such as “<title>, <body>, and <p> (paragraph)” to add headings and content to a page. The basic structure of HTML was very straight-forward and, after a while, I began memorizing the tags. Creating ordered lists and tables was fun but very tedious because each set of data needed a tag. I liked using CSS to customize the pages because, at first, I was curious how my plain page that I created would turn into a decent looking website. I still find it confusing differentiating between class and id and when to use them. I intend to fiddle around more in CSS to become more familiar with the tags.

Learning how to use the web inspector to read a websites HTML was very interesting. Websites that we visit every day like Twitter, Google, and YouTube begin with basic HTML code and fan out into complex styles. After learning the basics of HTML, I was able to identify the tags in the code of a Google page. It’s interesting how all the information comes full circle and you’re finally able to apply the information you learned to the real world.

After using all the new software, I found GitHub to be confusing because of the new vocabulary I was never exposed to. The software layout was kind of confusing as well because I wasn’t sure where things were located. I’ve never heard of a repository, nor did I understand the function of GitHub itself. I see that it can be compared a social media site for web developers to share codes and tips.

A Lesson in Troubleshooting

Leave a reply

This week, we got hands-on with HTML and CSS. I was eager to start linking my HTML with CSS and make a fancy website with different colors in the navigation bar and all these intricate designs. In class, everything went smoothly. I was using all the HTML I learned on Codecademy and having a blast.

During the readings, things got a little fuzzy, but it was nothing I couldn’t handle. I found the reading on responsive web design interesting. It made me realize, once again, how much of the internet we take for granted. Before the reading, I assumed that whatever you coded for a desktop website would just magically convert and appear in a mobile format. Little did I know, people type in a bajillion commands to make these things happen. It just reinforces the fact that computers are just machines that do whatever they’re told to do. They’re not evil machines that will take over the world. They’re the tools of evil people who use them to take over the world.

Anyway, all the Codecademy exercises went smoothly and I felt I had a firm grasp on the material. I did one each day, and on the final day, I created my prototype homepage. I figured it would be a piece of cake. I input all the HTML and CSS and linked them together. I made my font white, or at least I thought I did. When I loaded my prototype, none of the CSS that I had applied to my fonts was showing up. I opened a tab of Codecademy from each lesson, and I stared at the final code on each lesson for at least 20 minutes. I realized my error was in the HTML, in where I had placed the class identifiers. I got it together, uploaded the repository, and I submitted my homework. I was so proud for taking my time and submitting my homework early.

At least I thought I uploaded the repository. Since I didn’t put a summary description, my work did not upload to GitHub. I figured that out the hard way, after I had already submitted. The moral of the story is, I was wrong a couple times, but I fixed it and I learned something new. I think this class will be interesting and beneficial for me. It really forces me to think.

A Deep Dive Into HTML & CSS

Leave a reply

This week we got to really dive into writing HTML and adding flair with CSS. In class we got to design a very basic webpage. Mine was simply “Welcome to my site” & “My name is Jessica and I am writing on my site” beneath it. For our homework assignment we were able to add a little more glamour. While I was working on it I thought I was doing such a good job and it felt like it was even taking awhile. Revisiting it about a day later, it looked HORRIBLE!! It looked so plain, ugly, and basic. But I guess it’s all in the process. That all goes to say, I’m excited to keep exploring the world of CSS. On Codecademy, one of the lessons prompted us to link a CSS sheet and it turned the boring HTML into a masterpiece. Get ready “Welcome to my site” — big things are coming.

Readings this week focused on utilizing inspect element to its fullest potential and responsive web design. Focusing on the latter, responsive web design is critical in today’s age. We are constantly switching between laptops, phones, tablets, and in some cases even our watches. User experience design is at the forefront of technology and web design. How can our users be more engaged? How can our design be as efficient and intuitive as possible? Responsive web design is just the first step. The W3 School article broke down how to customize essentially every aspect of a site — from templates to videos — to be able to make these aspects automatically configure to a given device’s mentions. Something as simple as an image scaling to fit varying dimensions can make a user’s experience that much better. The small pain of an in-cohesive site, truly makes a difference in how a user thinks and feels about whatever brand or service or personal blog your website is trying to promote.

The world, at my fingertips

Leave a reply

Let me just start with a confession: I spent way too much time playing around with the web inspector and changing people’s website photos to pictures of dogs. The web inspector has to be my favorite part of this week’s lesson. Aside from thinking about how useful it’d be in planning out my next pranks, I enjoyed the web inspector tool because of its potential usefulness as a learning tool.

While I was playing around with the code to make changes that I thought were funny, I also had a chance to identify the different elements making up the html code for the websites. I was able to recognize most elements from the Codecademy lessons. I noticed, though, that there were a lot more things I hadn’t yet gotten to. I feel like I have a good grasp of what I’ve learned, which is progress on an ever-changing road ahead.

I also liked how useful the features on Github were for building on a code. Though I didn’t fully understand the intro exercise when I was doing it, after further examination and meditation, I recognized how useful the branch system is to the user. GitHub is essentially a social media network for web developers. Pretty cool if you ask me.

The Codecademy exercises showed me that learning to code is not impossible. I immediately recognized that there would be a lot of information, but I was prepared this time (I already had a Codecademy account because I tried to learn before). I took notes to create a reference list of tags and what they do. Now, I know that learning to code is just like learning any other skill. When you really take the time out to learn and practice it, it’s not so bad.  I’m excited to see what I can learn how to do next.