Tag Archives: CSS

Long weekend of pizza and coding

Leave a reply

This past week/weekend has taught me a lot about the world of coding — hours can fly by without you realizing it. However, that doesn’t necessarily mean that you’re completing numerous tasks…you could have gotten no where. For a few hours on Saturday, as I coded with a few classmates, that’s how I felt. That I had done so much work customizing my WordPress site, but was not getting the results I was hoping for. For example, I finally had success creating a custom post type (YAY!!), but after creating the meta boxes (following the guidelines of the Reading List example Greg showed us in class), the meta boxes weren’t working. The information was not being echoed correctly, or at all. That was infuriatingly frustrating. Today, it’s still not working. After putting that to the side, I worked on creating two other custom post types, had written all of the code and was ready to conquer these additional post types (TV Review & Restaurant Review). To no avail, I realized that WordPress doesn’t allow for multiple custom post types. Even after hours of Googling the answer, I haven’t been able to figure it out. Any help is appreciated!

Update on my final project site:

  • I’ve created three custom post types with meta boxes as plugins. They don’t work properly, but i’ve created them.
  • I’ve updated the CSS of the child theme as much as I could to my satisfaction for the layout/display of the site. I incorporated Google fonts, HEX colors, and updated the main menu navigation.

What’s left to do:

  • Continue working on getting the custom post types and meta boxes to work!
  • Adding two plugins: Instagram feed and Contact form
  • Inserting content

The next few days should be interesting. I am really hoping to be able to get the customizations I set out to do done and to successfully complete the project. Below are a few questions I have:

  • How do we add multiple custom post types?!
  • how do we get our meta boxes to echo the information we put in them?

Big shout out to Allie, Jaclyn, and Lucy for all their help this weekend!

Final Project Edits And Final Thoughts

1 Reply

I really enjoyed seeing everyone’s final projects last class — it felt good to know we all faced similar struggles and it was awesome to see the progress we all made.

This past week, I made a couple of changes to my final project based on feedback from my classmates, including more CSS code to change the color and look of my content. I added social media links to my footer and tackled – albeit unsuccessfully – the issue of my custom meta posts not showing up in my blog’s ‘archive’ and ‘recent posts’ sections. I was able to work around the problem with a plugin that allowed me to create separate ‘recent posts’ and ‘archive’ feeds for my book reviews. Although it’s not the solution I would have wanted, it will do for now. There are still things I’m not happy about with my site – in particular how my meta boxes and custom fields are functioning within my posts. I hope that as I continue working on the site, I can work through these issues.

Overall, I really enjoyed working on my final project. I’m pretty proud of my personal site; I’ve wanted to create one for a while so this was the perfect opportunity. To be able to say I coded some of it is an added bonus. Going forward, I would like to keep it up and continue making improvements to it.

Although I am by no means an expert coder, I’ve really enjoyed taking this class. It was definitely the most challenging course I’ve taken in the Georgetown program, but coming into the class with zero coding experience, I am really happy with how much I’ve learned these past couple of months. I enjoy coding and would like to be able to do it regularly in some capacity moving forward, even if it’s just making edits to my site.

I’m looking forward to listening to our guest speaker next class and hearing more from my peers regarding how their adjustments went.

Started From The Bottom, Now We’re Here

1 Reply

It has been a wild summer semester. I walked into this class (a week late) with unknown expectations for the class, the semester, and the material. To be honest, my only interactions with code were back when we had AOL Instant Messenger and MySpace and I wanted to customize something on my profile. Now, after being able to take a step back, I feel like I have learned so much more. I definitely would not have been able to learn what I did if I attempted to learn code on my own–I need the hand holding at the beginning to get comfortable. While I still feel like a total noob when it comes to code and coding, I also feel a sense of accomplishment for being able to at least (somewhat) understand HTML, CSS, JavaScript, and JQuery and PHP, and being able to create my own site using developer code. Like, what?! I’ve realized that coding truly is another language and I have a greater appreciation for the internet, dynamic and interactive sites and most importantly the web developers on my team. I didn’t comprehend the work that goes into their daily tasks.

As I look back on the class I think there are a few things that I would change to help my fellow Georgetown students on their web developer journeys:

  • Offer this class during a Fall or Spring semester. I think the extra weeks and shorter class times will make all the difference.
  • Continue using Codecademy. I think that was my saving grace.
  • Start the WordPress project from the beginning. Find a way to incorporate the final project from the beginning.
  • Work through Codeacademy-like lessons together in class. W3Schools helped, but I think being hands on would be even better.

I really enjoyed this class. I feel a sense of pride knowing that I have made it out alive on the other side with only several bumps, bruises, and maybe a few tears later. I hope my coding journey doesn’t end here and that I’m able to continue learning and developing these skills, but more on that in the next post!

The Final Stretch

1 Reply

This week I found myself feeling satisfied and relieved to be taking a break from coding my final project. I went into the last class knowing that I wanted to complete a few tweaks to my WordPress site, wanted to collaborate with my classmates on figuring out the final pieces of code, and coming to terms that I don’t fully understand why my code doesn’t always work. I found myself Googling more than I had anticipated that I would be, and I relied heavily on a number of PHP and CSS code testers to be test my code. At times, I was confused as to if I was making updates to my local or live site…I have a case of “too many tabs open at one time” syndrome. In a way, it was good. It forced me restart my thinking from scratch and gave me a minute to walk away from the code.

Admittedly, I have grown frustrated with the Final Project. I had a feeling I would. I spent SOOOOO many hours trying to get all of the custom post types to work, then getting the meta boxes to work. The frustration quickly turned to anger. I’d be ecstatic if someone could look at my code and find how to improve it so it could echo the information correctly (or at all) the actual post.

Another major shout out to everyone in class the other day. Thanks for helping answer all of my questions!

I’m happy to be able to take a step back from the code. My plan is to quickly jump back into my WordPress site and continuously develop the site, content, and my coding skills. I hope to be able to go back to Code Academy and re-work on the lessons at a slower pace to allow me to soak in the information.

Onward and upward. I hope everyone enjoys the site.

Github: https://github.com/amaliaks/Final_Project_Amalia

Site: http://threecheersfourfood.com/

Another trying week

Leave a reply

This week was a culmination of putting a lot of the languages we’ve touched on together. And it went poorly. The slideshow project was an interesting take on putting all the pieces together but it still felt overwhelming.

I’ve found that learning all of these concepts has been hard because we haven’t really gone through them together. In a different class I took last semester, Data Journalism, we went through a lot of technical platforms like SQL and Python, but we went step by step together. Only then did higher level concepts start to make sense.

It would be really helpful if we had class time where we went through things like how to make a slideshow step by step, so we could see how something came to fruition, before we are expected to create one on our own. Like Greg said in class, teachers do teach you how to write a sentence, but they don’t release you into the wild to then write an essay. To take that metaphor we had in class to its logical conclusion, you’re leaving out important building blocks like essay structure, paragraphs, and thesis statements. I feel like we only cover abstract concepts in class, only to have questions moved past because we don’t really go over assignments or take a look at the building blocks we need.

While some could say that Codecademy is what bridges that gap, I’ve continued to have problems with that as well. Currently the interface seems to delete sections I’ve done or doesn’t add a check mark to things to say items have been completed. That’s been really hard, especially when I’m trying to figure out why some lines of code are right or wrong.

I understand why a lot of the class is geared towards making sure we can figure out how things are broken on our own, but I feel like I’m operating at a huge handicap every week because I don’t quite understand what the best practices are to begin with. It would be really helpful to work on foundational things in class so that way outside study can be used to hone things, not figure out what square one is.

As for my Midterm, I will be interviewing Matt Callahan. He works at The Washington Post as a designer, but mostly does what we call “enterprise” templates. These templates are for our bigger stories and are always custom designed using jQuery and JavaScript.

 

First Coding Experience — The Struggle Is Real

1 Reply

This week’s assignment taught me several important lessons, the first being that this class is likely going to be the most challenging course I have taken thus far at Georgetown University. As a student in the Public Relations and Corporate Communications program, I have been relatively well equipped for my classes thus far – crisis communications, public speaking, event planning, digital analytics are all skills I use in my daily life. I thought that web development, although not a skill I use often, would fall in line with these other classes as a sort of ‘second-nature’ skill. I can now say, after two weeks and numerous hours staring at my computer screen, I was wrong.

To begin, coding is very rational, as Codecademy explained the abbreviations are largely based on logic (e.g. px stands for pixel), the codes are straightforward (e.g. font-size equates to the size of the font), and almost all of the codes open and close with the same pattern (e.g. <tag> content </tag>). Yet, the system is so, incredibly fickle and specific, that I find myself struggling to understand the nuances between a <div> and an <id> and how an <h1> tag is different than a <div category =intro> if there is only one intro tag in the document? (I could continue with this stream of consciousness for pages, as I struggled with these differences for hours, but I will spare you that pain.)

I also struggled because I would then try to Google the questions in my mind, but I found I did not have the correct wording to find the answers I sought. I could envision in my head the piece of code I saw in previous Codecademy exercises that I was trying to recreate, but my search queries of “how to make a div connect to CSS” or “how to make a picture fit in the textbox CSS” resulted in nothing of use, which was frustrating.

In public relations and writing, there is no one answer to any solution. There are numerous ways to write a speech, pitch a story, structure a corporate campaign, etc. Thus, I think the exactness of coding is something that I will struggle with, especially given that I do not fully understand why one code works whereas another doesn’t, even if they serve (to my knowledge) similar, if not identical, purposes. I am hopeful that as my knowledge of coding grows, this confusion will subside and I will find it easier to differentiate between tools, tags, labels, numbers, etc.

At this point my biggest question is better understanding the purpose of a div, and how to use that div, and the offshoot of a category or a class, in CSS coding.

Introduction to CSS and Designing a Page

Leave a reply

Readings: Responsive Design

Going through this week’s readings, what stood out to me the most was the point Ethan Marcotte made in his article about the “more adaptive approach” being the way forward in web design. I think it’s important to keep in mind that technology is constantly changing, and as Marcotte points out, creating technology that adapts rather than just “tailoring disconnected designs to each of an ever-increasing number of web devices” is the only way to keep up.

Coding: CSS Intro & Homepage Prototype 

I really liked the way Codecademy introduced CSS in its lessons. For the most part, it was easy to follow along with the instructions and explanations. The trickiest lessons to understand were the last two on creating boxes and styling images. I think some of the explanations about sizing using pixels and percentages went over my head — as did the explanations about changing an element’s position on the page — and I will try to review these bits before class on Wednesday.

Despite how easy Codecademy made it seem, I had a much harder time putting together the prototype homepage than I anticipated. I thought the best way to start the process was to model my page after one of the pages from Codecademy and modify the code and content. The two things I struggled with the most were changing the color of the background and getting the text to move the way I would like. Initially, I wanted to change the background color to a plain white and fix the main image at the top of the page to have the text move over it as you scrolled. I think I did manage to change the background color after a couple of attempts, but, no matter what I tried, I couldn’t figure out how to configure the image and text to behave the way I wanted. I think my problem with the text came from not fully understanding Codecademy’s lesson on positioning.

Lastly, adding the code to GitHub also presented some challenges. Although I found the tutorial really helpful, following the steps the first couple of times, I kept receiving an error message that told me my repository failed to publish without any clear explanation about why. I finally got the files to appear on my account but am not sure exactly how I did it.

Google is a Girl’s Best Friend: My First Attempt at Coding

1 Reply

This week’s prototype homepage assignment was my first attempt at creating a webpage using HTML and CSS. It would be a huge understatement if I said that I struggled with this assignment. I decided to create a prototype homepage for a personal portfolio site/blog, and creating just a single page with HTML and CSS took a great deal longer than I had anticipated it would. I was grateful that I had completed the Codecademy lessons 3-8 earlier in the week, as it gave me more time to work on creating the homepage over the weekend.

I encountered a number of issues when coding the HTML and CSS for my homepage, the first being perhaps the most simple element of all—linking my CSS stylesheet to my HTML code. I’m going to be honest and say that it took me more than an hour-and-a-half of troubleshooting to resolve the issue and to correctly link my style sheet. This brings me to the title of this blog post—Google really is a girl’s best friend when attempting to code. I cannot begin to explain how many times I Googled various aspects of HTML coding and CSS styling while working on this assignment. I found that referring back to the Codecademy lessons was often not enough, and that I needed additional assistance from the w3schools site and other sources to correct my code. Some of the issues I struggled with included figuring out how to add margins around the text and image on my homepage; applying the classes, IDs, and div concepts to my HTML; and creating and styling a navigation bar. The latter concept was referred to during the Codecademy exercises, but I had to enlist the help of Google, a w3schools tutorial on navigation bars, and a classmate (thank you, Amalia!) to fully comprehend how to create a navigation bar at the top of my site. I’m still not entirely pleased with the formatting of my navigation bar, as I wasn’t able to figure out how to increase the space between the various links/tabs. I hope to resolve this issue in the coming weeks. I also want to figure out how to get my h1 headline and navigation bar to appear on the same line, rather than stacked as they currently appear on my homepage. Does anyone know how to do this?

I read the articles on responsive web design after I had begun working on my homepage. These articles reiterated the “mobile first” mentality that seems to be pervasive among programmers and developers. With the majority of sites being accessed on mobile devices such as phones and tablets, it is important that a site’s design accounts for the different screen sizes that viewers are using to access the information. This “mobile first” mentality is also something that public relations and marketing practitioners consider when creating content for their target audiences. Making your client’s or brand’s content easy to access from a variety of devices ensures that your audience will be able to access the content using the method that is most convenient to them, thereby allowing it to reach a broader audience. I’m still a bit confused about the concept of media queries and how to apply them in my code, but I am sure this is something we will cover in class in the coming weeks.

I was able to upload my prototype homepage without issue using the GitHub desktop app, but I did find that the interface of my desktop app was different from what was featured in the “Getting Your Project on GitHub” article. Despite this, I found creating a new repository and adding my code files via the GitHub app to be relatively straightforward.

Here is my GitHub prototype homepage repository.

First Coding Experience & Responsive Design

1 Reply

Responsive web design:

My current employer, The Howard Hughes Medical Institute (HHMI), is completing their two-year “responsive redesign project” of our external website. It wasn’t until 2015 that our leadership understood the important of UX design and the increasing use of smartphones as our primary web browser. Through the first reading, it explained how we need to consider not only the minimizing of a website on a computer screen, but also consider different size phone screens, tablets, etc. The width of the screen can alter the layout of the page, including the number of columns on a page, images and the content on the page. W3C created a list of media queries to help web developers when creating responsive designs.

Important concepts found throughout the readings:

  • Mobile browsers are the present and future. Web sites should be flexible enough to be able to adapt to new technology.
  • Media query: allows web developers to target certain device classes and “inspect the physical characteristics of the device rendering our work.” (from Responsive Web Design)
  • Fluid Grids
  • Flexible images
  • Viewport Meta Tag: <metaname=”viewport” content=”width=device-width, initial-scale=1.0″> (from w3schools) tells the web browser how to control/scale a webpage’s dimensions based on the scale
  • Design for a mobile application first.

Experience with coding homepage prototype:

If we are being honest, coding the homepage prototype took longer than anticipated and I have a new-found appreciation for web developers and complex websites. I can’t imagine the time and planning that would need to go into creating a webpage that is both responsive and complex. While coding for the homepage, which I created for a food blog, I ran into trouble translating some of what we learned through the Codecademy lessons to the assignment. I struggled most with the lack of being able to see in real time the effect that one small piece of code was having on my site and went into panic-mode when two lines of CSS code altered the entire feel of the site. My biggest struggle was finding ways to create exceptions to rules that I had created within the CSS code early on that affected the layout of the page once I began adding content. I couldn’t find an easy way to create rule exceptions within the code and instead found roundabout ways to add in additional lists. How can we create rule exceptions?

Secondly, what I struggled with this week was adding in an image. I spent close to two hours trying to link an image I had on my desktop to the code and have it display correctly. Eventually, I decided to choose different pictures that were already uploaded to my Facebook page and used those URLs instead. Despite searching endlessly on Google for an answer to my question, I still am unable to link an image that is on my desktop to the HTML. Does anyone have any experience or advice for how I may be able to do this?

Finally, uploading to GitHub was no easy feat. I had created a repository using the desktop app, but it wasn’t properly uploading the files I had created using Sublime. Through Google, this article and the help of my fellow classmates (thanks, Jaclyn!), I was able to upload the files successfully. The article has been bookmarked for future use.

Looking forward to creating a responsive design and using other coding languages, I’m nervous, but excited to see what I can create!

Learning a new language: HTML/CSS

Leave a reply

When I started the exercises for Codecademy, it took me back to the MySpace and AIM days when we would add in basic code, like bolding or italicizing words, into our basic profiles to make them unique. What I learned was at a different level, of course, but reminded me of the different purposes that coding could have for different audiences. I agree with what Mindy McAdams said in her post—sometimes it’s best to start to learn the fundamentals before diving into a project. While I learn by being hands on, if I were thrown into a project right now to code, I would feel overwhelmed, stuck and frustrated. By going through the exercises, I’m teaching my brain how to think and “speak” in a different language. Now, I’ll have to commit to the practice, practice, practice analogy. In continuing to read McAdams’ article, though, what is the added benefit of having a separate CSS document? Is that a personal preference or is it easier to use and read when collaborating with others? I suspect, that in general, it is cleaner and an easier way to set what a style guide is, but it could get lost.

The browser web inspector is a phenomenal tool. I’ve tried it via Google Chrome, and it’s interesting to see how Google created their webpages. Moreover, it shows how other websites, like Flickr, can embed tag upon tag upon tag to keep your images and content safe from copy/paste mechanisms and free from copyright infringement. This theme is important as I continue to think about the necessity for communicators, like journalists and those in PR, to understand the basics of HTML and CSS. We have to continue to dig deeper to find the truth and to protect what we know to be true.

While reading and completing the exercises, I had a few questions—

  • During the Codecademy exercise, it mentioned that using spaces (or the “enter” key) helps create cleaner code. Why is that the case? Should we be adding spaces as a best practices into our code? If so, where?
  • I am still having trouble understanding the difference between HTML/CSS and programming/scripting languages like JavaScript. What are the differences?

Profiles:

GitHub: