A Deep Dive Into HTML & CSS

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

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. 

Who ever thought…

Who would have thought that I would have interest in a Web Development class? I have no experience in web development and coding and it is all very new to me. Learning about HTML and the rest of the coding systems gives me insight into the world of code. Using Codecademy and jumping straight into HTML gave me a little worry, but as soon as they continued to go through the steps and explain them, I began to worry less. Once I began understand the pattern of the HTML layout, it became easier as it went on. We were also introduced to GitHub and that also threw me a curve. Although both concepts were foreign, the reading and tutorials both were very helpful and informative.

Learning new codes is introducing me to a new world and I new skill that I never had prior access to. As an African-American women, I believe that we do not know much about this industry let alone, dominating in it. I believe that this is a skill that will help one stand out and if possible, able to excel at the skill. I hope to be able to gain the basic skills when this class is over and be able to increase in my knowledge.

Coding for Dummies(me)

The introduction to HTML this week has shown me that it is the most complicated simple thing I’ve encountered. Even lesson 1 which started off very simple then became into almost a new language (which it is). Although it was a bit tough, I found myself actually enjoying the work I was doing.

After the coding lessons it is quite interesting to see how websites are broken down into a couple of <p>’s, <h>’s and a few backslashes. While it is obvious that if you write some certain letters and numbers together a website will be produced, it is crazy how truly simple this process is and that it can also be learned on a basic level even for free. Although it is said that memorizing these tags tags, can lead to being fairly fluent in this type of coding, it is shocking that there is a belief that something such complex could be easily understood through a basic series.

After seeing the first lessons of coding, I can’t help but think that I was born too late. I feel like if I had expressed an interest in coding while being born 10/15 years before, I could be the creator of Facebook or any other popular social media. The act of just adding more numbers and letters right under previous ones in such a fine tuned manner seems like it only took a matter of time. I do know it is obviously a lot more than the way I’m explaining it, but I appreciated that these lessons even gave me the confidence to feel this way about websites.

 

A Hidden History

I’ve always thought that computers were something created in recent years. It is always correlated with the younger generations of the late 90’s to present day. I was shocked to learn that the use of computers date back to the 50’s. Although they weren’t fast-running laptops for commercial-use, I assumed the technology would’ve been nearly prehistoric. Something as simple as an ATM machine was a huge advance in technology in the 70’s. When someone thinks of a computer, the description is usually a machine used to search the internet. Computers actually come in all shapes and sizes. Their job is to perform tasks that are programmed into them and we fail to acknowledge the other forms that exist around us. I also thought coding was a process that became popular in the 2010’s. It seems like a complicated language of 0’s and 1’s. According to the Software Guild, the first coding system used was Autocode in the 50’s. I found that interesting because during that time there weren’t high-tech cellphones or flat-screen televisions. I thought coding was something too complex for programmers back then to use. Software engineers have been using coding for years to create multiple programs and it provides a set of instructions for the machine. Coding plays an important role in a majority of technology I use today. Reading these articles provided me with an insight into the world of programmers and software engineers. I don’t put in much thought when I Shazam a song or type in a question into Google. Someone had to work the back-end and program the machine to perform my requests. I’m excited to learn more about what goes on behind the scenes and I expect to take away a few skills that I can apply towards my own projects. In our growing technological society, it is important to be aware of all components required to create websites that we go on every day.

 

HT-a whatta?

After diving into actual HTML this week — I have discovered it is not so hard after all. Of course I save my full review for once I am beyond lesson 1 on Codecademy. Lesson 1 went fairly smooth, with only a few times I had to resort to the “solution” button. It was usually simple stuff that should have been easy to catch. For example, I thought I had this code instruction 100% right and could not figure out why I wasn’t advancing. The issue? I was writing under <h2> instead of <h3>. It’s the little things.

It’s been said that if you can memorize the basic seven tags, you can be pretty fluent in HTML. It’s incredible to me, that these seemingly complex sites can be broken down into a bunch of <p>’s <h>’s and backslashes. I understand that writing will produce an output, but I still struggle with why does the computer/site know how to do that. What does that programming look like?

This week’s dive into (intentional) HTML usage makes me reflect on my youth. I’ll start with MySpace. At the tender age of 8, I was customizing my profile’s HTML with different font styles and colors. How did I forget all that? I have seen interesting literature about these types of introductions into HTML/CSS. That they can actually be more beneficial for adolescents to learn how how to code rather than a Codecademy model. Notably, especially in keeping young girls interested in computer languages. I think this could be an interesting thing to discuss in one of our lectures. In my teen years, I was no longer this expert coder but had my fair share of fun with Google’s inspect element. I once added a class called “Underwater Basket Weaving” to my junior year schedule and posted it to Twitter. People got a kick out of that. I’m excited now, though, to use “inspect element” to actually understand what the heck is going on under this screen. 

Beautiful is better than ugly

I never thought of coding as poetry. I never really thought of coding as anything. My mind refuses to accept that a bunch of zeros and ones can equate to anything other than a bunch of zeros and ones. How the technology we interact with everyday is the brainchild of math and science rather than magic. How can the intricacies of our apps, sites, and platforms be narrowed down to a wire? But the answer is in the term: coding languages. Languages. What encompasses a language? Grammar, technique, vocabulary, and so forth. And what sprouts of a language? Art, literature, film, expression, and poetry. I linger on that last one. The Zen of Python awakened a new meaning to those zeros and ones. A set of 19 aphorisms bordering on the intersection of prose and poetry unravel a complex set of ideas into concise proverbs. After all, simple is better than complex.

It really is so simple. Something created by humans, for other humans. What is a language if not a reflection of humanity?

The Internet

The first thing that struck me when first diving into the readings was how much more complex the internet is. As the video mentioned I was one of those people who viewed the Internet as a “cloud,” with all the information circling around up there. It also came as surprise to me how many different so called versions of the internet there are, dating back many years. I will admit some of the readings were almost like a foreign language to me. It took a couple re-reads to fully grasp the concept of computational thinking, and how that actually applies to my life. Simply trying to answer my little questions with abstract or even specific Google searches that relate back to the topic I was originally trying to figure out. Something else that caught my attention was how many different versions of coding there are. As someone who is new to the whole concept of web development, I of course heard of Java and C++ but seeing how many there actually are and where they date back too is pretty incredible to me. The readings definitely peaked my interest for the class and I look forward to the information that will be learned!

On Computational Thinking and The Internet

The first thing that came to mind when I delved into the readings this week was the phrase, “information overload.” It seemed fitting, since our topic is, in general terms, the Internet. I’ve always thought of it as some mysterious cloud constantly dumping information, like the YouTube video said, but now I know that it is actually simpler and, when used right, combats information overload altogether. I also thought it magically appeared somewhere around the 2000’s. I was surprised to see the many different iterations of computers and the Internet dating back decades.

After processing all the information in the readings, I think computers and the internet are designed in detail-oriented ways that answer problems with solutions. It’s kind of like Newton’s third law: To every action, there is an equal and opposite reaction. Programmers input commands, and computers just do what they’re told. When you think about it that way, they don’t seem so mysterious.

These ideas matter because they can be applied to everyday life. Lately, I’ve been doing a lot of research on Ancestry.com. It requires attention-to-detail, especially when you go further back in history. For example, my third-great grandfather, William Batiste, was a black man in Confederate Alabama. Around the same time, there was another black man by the same name and living in the same town, who fought in the Spanish-American War. At the time, I couldn’t figure out if they were the same man or two men with the same name. To differentiate between the two men, I first had to identify some qualifiers that would separate the men. I had two death records, one in 1916 in Alabama and one later in Chicago. Next, I searched for a 1920 census. I found one with my third-great grandmother listed as a widow. That confirmed that the Willie Batiste who died in 1916 was my third-great grandfather. The Spanish-American war veteran moved up to Chicago, where he was discharged after sustaining an injury. To get to this conclusion, I took a series of steps. I had to express the problem (identifying these men), express a solution (find a telling difference)  and then carry out the solution (input a specific search query and connect the dots), just as is shown in the model of computational thinking. 

Another thing that stood out to me was the entire WordPress philosophy. I think the developers of WordPress have a definite feel for their consumers. The general underlying theme is simplicity. The Internet is dominated by consumers. The vocal minority rule the post discusses is reflective of that. Only about 1% of Internet users are creators. However, I think that makes it a bit murky when choosing which features to develop and which comments to ignore. How do we tailor the Internet for billions of people with different perspectives? Is that responsibility on the user him/herself?

 

Course Preparation – Fall 2018

Welcome! Our first class session is Thursday, Aug. 23 from 5:10-7:30 p.m.

Be sure to review the syllabus before the first class.

The readings, site registrations and software installations below must be completed by Tuesday, Aug. 21 by 11 p.m. The analysis post is due by Wednesday, Aug. 22 by 11 p.m.

Pre-course assignments

Required free software to install:

Notes on required software:

  • These three programs must be downloaded and installed before the first class to be sure you can hit the ground running.
  • If you have problems installing that you can’t resolve by searching online, please contact the instructor as soon as possible.
  • After you install them, you don’t have to start using them before class starts, but you’re encouraged to explore what they do and why we’ll be using them.
  • Important: Don’t change any MAMP or XAMPP settings unless instructed.

Be sure to subscribe to the blog to get all the updates posted here:

Analysis Posts

Everyone will receive an individual login for this WordPress site so you can submit the analysis post. If you haven’t used WordPress before, please see the first section on how to post. Be sure to:

  • Add a title that briefly describes the content, themes, etc. of your post
  • Under “Categories,” check the box for “2018 Fall class”
  • Under “Tags,” add one called week0 — with no spaces between week and zero (it will be one of the suggested options when you starting typing “week”). After that you can add other tags that are relevant to what you discuss in your post (e.g. history of programming, computational thinking, etc.)
  • If you don’t want your post’s content publicly viewable on the course blog, please change the “visibility” to “password protected” in the publish box (top-right of the post edit page; see instructions) and enter the password I sent by email. That way everyone in class can read it, but not the wider web.
  • Under the “Notifications” section, always check the “instructor” box, which notifies me your post is ready.
  • Change the status to “pending review” and save

The weekly analysis posts don’t need to touch on every single thing covered, especially this time because there was such a variety of material. Ideally, in the case of a reading/video, a post will explore a particular theme or topic you found most interesting. Choose one (or a few) things and go into more depth.

In the future, if most of the work assigned one week is skills-based or project-based, you can reflect on that experience. Also, as mentioned in the syllabus excerpt, those assignments will be when you want to talk about progress you’ve made and any hurdles.

Some brief explanation can be ok, but definitely avoid summarization for the analysis posts. You don’t have to prove you read everything — if that was the case we’d have quizzes 🙂

The point is to do one or more of the following — or something along these lines:

  • analyze the materials
  • find connections between the materials within a given week (or, in the future, between weeks)
  • relate something to your experience (how it could help you, how it enlightened you about something, etc)

Also, be sure to link back to the materials you reference in your post.

Please let me know if you have any questions by email or in the comments below. I look forward to meeting everyone at the first class session!