This week obviously was very different seeing how we don’t have a formal class. JavaScript has probably been one of the most interesting lessons thus far. From what I’ve understood just from Codecademy and our brief Google Hangout, the program seems to be what makes a website move. The “script” is the what the website follows which causes things such as but not limited to: drop menus, highlighting hyperlinks, and pop ups on the page. Which makes it the most interactive lesson that we’ve had up to this point. Interactive in how we interact with the websites mechanics. The lesson was a bit difficult trying to remember the terms, and then applying that when moving on to the next lessons. I think it will be helpful to see this lesson again in person to fully grasp what it is I’m learning. Overall though it was enjoyable to learn a new step in my coding development and look forward for what is to come next.
Week 3: Challenge Accepted
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
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.
One Cup of Java(Script), Please
This week was all about JavaScript, and no that isn’t a fancy latte you’ll be be able to find at your local Starbucks. Rather, JavaScript is “is a scripting or programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at.” This looks like the unfollow/follow feature on Twitter, Google giving you search suggestions while you type, and yes, JavaScript is even responsible for those pop-up ads we adore.
JavaScript is the third layer of website, client-side programming. Combined with HTML & CSS, JavaScript makes webpages dynamic and more interactive. HTML, CSS, and JavaScript are all client-side programming because the language is interpreted by the client — which in most cases is our web browsers. Our web browsers read these languages and then present us with the finished product. The opposite of client-side programming languages are server-side programming languages. Server-side programming languages “deal with dynamic content. It runs on the server. Most web pages are not static since they deal with searching databases.” These programming languages structure web applications, query the database, and encode data into HTML. Examples of server-side programming languages are: PHP, C++, Python, and Java. Yep — sans “Script.”
Practicing JavaScript on Codecademy, I learned that they are three essential data types in this language: strings, numbers, and booleans. Strings are any grouping of words or numbers surrounded by single quotes. Numbers are well… numbers, but we don’t put these in quotes. Lastly, a boolean is either going to be the word true or the word false. These also don’t go in quotes. These are the building blocks of JavaScript, similar to nouns and verbs in our own language. To see what we’re trying to say in JavaScript, we simply use console.log and a pair of parentheses. JavaScript also has some pretty neat math functions. It can do the basics (multiple, divide, add, subtract) and it can even find a modulus. Now, what exactly does that mean? That’s a question better served for Google.
Something New
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
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
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
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.