Tag Archives: week2

Something New

Leave a reply

Learning the CSS format and how it actually works was very unique. Although, I did more of the topics that were needed, I still learned a lot. As I said last week, I was still on the edge of understanding web development and how it all truly worked out. Learning this format was also way more complex than learning basic HTML.

CSS focuses on the style of the web page. I felt I was actually learning much more in these exercises. Along with more detail came more confusion. This did introduce a new world to me, but with new things come new thoughts. I kept wondering how all of these codes were memorized by coders. Do they do it so much that it becomes as a second language? Or is there some form of a code cheat sheet going around with all the common languages and tips to help? I know I personally had a difficult time remembering things, especially while things were being added on. Maybe I should make myself a sheet with the code meanings and tips to help me memorize the codes.

CSS is interesting, to say the least. I think this is the part I truly enjoy of this web development series. As I said before, I never thought of web development as a career choice. If I can truly gain a liking for this and find enjoyment, I would truly go into this field. Using this class to explore this option is also exciting. I never thought I would be able to do this. I know I am no where near expert level, but I do find enjoyment in this even if it means I have to find extra training after school. If this is something I truly enjoy, I would not mind finding that extra help and push.

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.

Putting it all Together

Leave a reply

This week was fun since it was the first time I felt like I was “coding.” We took everything we had recently learned and put it all together in an effort to make a homepage. The beginning of this process started with the Codecademy assignments that helped refresh some of the concepts we had learned while also adding new things to help improve our first page. The concepts tied in with the readings that also made it easier to complete the assignment. Sometimes for me it is hard to fully comprehend the readings without seeing the active visuals, so I attempted to code my assignment while simultaneously reading. This proved to be somewhat effective, but still a bit challenging. Another issue I had was trying to fight images that looked right based on things I had read right here. I realized it was more about the presentation on different devices, but it still helped with my attempt to throw images in there.

The final issue I had was trying to put my safe code from Sublime into my repository on GitHub. Even looking at the reading on GitHub I still had issues and ultimately just had to continue clicking around saving and re-saving the different documents that I finally was able to include it. Even then I felt like it was still placed in wrong, I still felt good about finding a solution to my issues. I look forward to what next week will bring to my already growing knowledge.

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.

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.

Wins and losses from my first homepage

Leave a reply

This weeks work made me warm up to Codecademy a lot more than I expected. I really enjoyed learning about CSS and seeing what more “front-end” web design looks like.

After this week I definitely want to focus my time on front end changes during my bigger projects. First, it more closely reflects the type of web development I would do at work, and secondly I enjoy making things look pretty. CSS gave some immediate gratification when it came to making changes, and learning about all the options I had when it came to color, sizes, and fonts was really interesting.

There were some minor things with Codecademy that I didn’t like. Perhaps the main thing was that if I got stuck on a lesson that had 3 or 4 different steps, the program would often give all the code for those steps, not just the one I was stuck on. That make it harder to learn the later steps, since they were already done for me.

I also had some struggles with getting Sublime Text and GitHub to play nicely together. I was able to make some basic code, save it, and drop it into my monitor and see it, but when I imported it into GitHub I couldn’t find the code. I tried looking around on the internet to see where I went wrong, but to no avail.

If possible, it would be nice to do these things in class together as a trial, so I know if I’m moving in the right direction or not. With the on your own work I felt like I was poking around in the dark, which to some extent is fine. However, since some of these concepts are so new to me, it would be really helpful to see things get done in class so I get a better idea of the flow of these programs, like GitHub.

 

Adventures in Creating a Homepage

1 Reply

Using HTML and CSS

Now I understand what Prof. Linch meant by having an idea of what you are developing before you begin. When building my new homepage, I started putting in code before I really knew what I was doing… and about 30 minutes later, I deleted most of it and started over with a vision! (see below)

screenshot of homepage

A couple challenges I faced that required a Google Search were:

  • How to link certain text within a paragraph and not the entire graph, or having to have the text on a separate line
  • How to download an image from the web and use it, legally cited of course, on my page; then how to display it on my homepage
  • Why my background color displays in Safari but not Chrome (Still unclear, ha! Something to do with fact my HTML file is saved as Chrome and my CSS file is saved Safari? Is that default — I didn’t select that.)
  • Several failed attempts to link my HTML and CSS files 🙁 But alas, some tiny edit made it click! (I think I simply removed a forward dash before style.css!)

My next challenge will be to further the CSS styling on my homepage. I plan to visit a few sites I know I like the look and feel of, and study the source code to see how they have been developed. There was so much to learn about CSS styling in our Codecademy lessons this week — I would like to play around more with opacity, overlapping content, margins, padding, etc…

I appreciated the w3school’s article, “Responsive Web Design – Intro,” especially the images of the expanded desktop, smaller tablet, and compressed mobile display. The article did a good job explaining what responsive design is, how it works and should look, and how to program the tool (though a lot of practice is warranted). Seems like a practice every programmer should utilize this day in age for UX given that mobile is taking over as the top device on which user access the web. Once the article gets into “grid-view” and “media query” I got a bit lost and was wishing I was taking a lesson in Codecademy:) On a related note, I found the alistapart article outdated and hard to follow — give me some images!

Cheers!!

Jane

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.

Creating My First Real HTML code

1 Reply

This week’s homework was very exciting. Although the Codecademy modules took a long time to get through, I learned valuable ways of coding to create a fundamentally sound and aesthetically appealing website. When creating my website, I wasn’t sure where to being, and what type of website I should create. I began thinking of my favorite things, one being going to my country club Gibson Island on the Chesapeake Bay in Maryland. I have been going there since I was around four years old for different camps and such. It truly seems like a hidden gem that more people should know about, it is a beautiful place. Therefore, it is in my thought process to create a better website for Gibson Island when it comes to my final project. Although  my coding on that particular website needs a lot more detail, I think it is a good starting point.

When doing this week’s modules, I found myself a bit more confused about the different types of things going on. I can’t exactly say that I completely understand what a “class” is or what the true purpose of a “div” is other than to create a grouping, but am a little unsure as to why there would need to be different groupings.

During the readings, especially in A List Apart- Responsive Web Design  I was kind of shocked that you need to code in different ways for different devices. I guess that makes sense, but it opened my eyes to the fact that not all screen sizes can read code in the right way, which is the reason some websites don’t look correct when used on a cell phone. It is because they are unresponsive I have learned.

Overall, I am becoming more and more comfortable with the language needed to create an HTML website with the use of CSS.