Tag Archives: CSS

Final Project Woes

Leave a reply

We are getting closer to the due date of our final project, but I am still having some difficulty with somethings. Fortunately, I have been able to add a little color to my child theme. I tried to add color to the theme both though adding the color code to the code files but also on WordPress. I am not sure which of the two made it work, but I am not too concerned I am just excited that my site has a little color and no longer reflects the sterile walls of a nursing home. I have also decided to incorporate a poll as a plug in. I am pretty excited about this addition to the site, because polls are one of my favorite things about Instagram’s latest story update. So of course, it would be the perfect addition to my finsta site. I have looked up several different strings of code for online polls, some of them do not exactly align with the things we learned in this class, but I plan to use a piece of each of them to create sort of a Frankenstein of polls. I am also thinking about incorporating a ‘poll’ tab to my side bar modification if I can get the code together. If I am able to combine the poll code and make it work, I would like to have a page of a bunch of different polls people can take. Some of them would be your typical four option poll and others would be two option polls, sort of like a ‘would you rather’ poll. My theme also calls for a header without a menu bar, so I am going to try to see if I can incorporate some of the new fonts I downloaded to used there. If anyone has any suggestions about either of those things, please let me know. Help would be greatly appreciated.

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.

Progress (Sort of)

1 Reply

My site is coming together. Well, sort of. I have a lot of pieces floating around in cyberspace. The biggest piece, however, is my first customization: the interactive map. I downloaded the Leaflet map plugin, which uses an open-source JavaScript library for creating interactive maps. The API is pretty well documented, but there are some things I couldn’t figure out.

Once I input the shortcode to create my map at the location I wanted it and then created the marker for one of my sites, I was able to figure out how to program it to include photos on the markers. But I quickly realized that I did not understand the interface. Before I installed the plugin, I was convinced that I had missed the mark and that none of my customizations would be code customizations because they could all be done with plugins. When I started the work, I figured out that you can type code into plugins (duh). Then, I realized I don’t understand the relationship between plugins and APIs.

Troubleshooting my map plugin helped to give me a basic understanding. I know that a plugin contains groups of functions and is written in PHP. I know that the Leaflet map plugin uses a JavaScript library. This part confused me. When I was writing code for my map, I was confused about which type of file to create in Sublime Text. I settled on JavaScript but as I was typing my code, my mind wandered to if I should create HTML and CSS files to accompany it. At that point, I knew I was overthinking.

Though the map plugin boasts about its well-documented API, it’s still a little hard to understand for me as a beginner. It has lists defining elements, events, methods, and options, (?)  but I get confused about what exactly to type since programming is very specific.

I also had problems with issues with FileZilla. When I tried to connect, I kept getting an error message.

I have one lingering question. What is the relationship between an API and a plugin?

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?

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.

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.