Tag Archives: CSS

In the end, it’s back to basics.

It’s so hard to believe this semester has come to an end.

When I entered this class, I wanted to enhance my knowledge of HTML and CSS (the only two coding buzzwords I could come up with at the time), and become more adept at communicating with the web development teams I work adjacent to. During our wrap-up class period last night, I realized how much further we had gone into the world of development—to varying degrees of success.

I’ll be finishing up my degree this summer and transitioning to a new life and new job shortly thereafter. As I’ve begun to seriously consider what my new options might be, I’ve noticed a lot of jobs that list basic web development skills in the nice-to-have category. In my own hiring experience, I have always responded well to communications specialists who also demonstrate basic coding skills.

Given this, I’d like to go back to some of my first goals for this class. Rather than develop a plan that will make be a better “web developer,” I’d like to focus on gaining real competency in some more basic things that will make me a stronger communicator. I’ll prioritize CSS as a first step, and hope to become really facile with the syntax and also in my understanding of everything CSS can manipulate. (Sorry, it doesn’t look like I’ll be creating any CSS paintings any time soon…)

I plan to go back to the Codecademy lessons we completed in class, and will likely look for additional tutorials on YouTube and Lynda as I find the time. Because CSS “clicked” for me at least a little bit the first time around, I’m hopeful that I can maintain a comfort with it as I make it a part of my regular practice. This will coincide nicely with a Design Communications course I plan to take this summer, where I will study the fundamentals of functional design as it relates to print and digital publishing.

I’m hopeful that I can continue to work and learn alongside development and design teams in my new role, whatever that may be, so that I can continue to learn this new language I’ve been introduced to.

Thanks for a great class and a challenging semester!

The little things

I’ve actually really liked the feedback process here. It’s very collaborative and helpful to get the perspective of others who are on my level to get an idea of what they are seeing and what I’m not. I also liked giving the feedback — it was comforting knowing everyone else was having problems similar to mine and I enjoyed helping others get through those problems.

I’ve been trying to button up the little things on my site, including this little dropdown arrow that Greg pointed out, doesn’t appear when the menu is activated. Spoiler alert: I haven’t figured it out yet.

From what I’ve been able to tell, the menu is using a state-based CSS indicator (not sure if that’s the right word) that is hated online. I’m able to manipulate the element by calling the class and adding a box (that’s one piece of customization I did), but I have no idea how to access it when the menu is expanded. I eventually just put a post on a forum for the site and am waiting for a response from the folks who know better!

I’m still thinking of ways to improve the site — I embedded my resume in order to keep people on the site, per Greg’s suggestion, and I’m playing around with more styling like typefaces and getting rid of the bold for hyperlinks.

The first week of final project work…

I spent the weekend working off-and-on on my final project. When I sat down for my first intended work session, I felt immediately overwhelmed. I’ve never taken on a project like this one before. There were too many apps to be aware of: GitHub, MAMP, FileZilla, a tab of local WordPress testing, and a tab of the live site. Not to mention tab after tab of “how do I…” queries.

But as I spent more time on this project, I noticed more and more similarities with the work that I’m used to doing. For one thing, you can’t do it all in one sitting; you have to get up and move, to do something else, walk away and return. For another, there won’t just be one unfinished project; there will be many unfinished sections—the same way you move on to another paragraph when writing, even when you know you’ll have to come back later to tighten the language, add more context, or reassess the flow.

I’ve made some progress, but it was slow and buggy. I was elated to see that I have two functioning custom post types appearing on my life WordPress site. Then, I was immensely frustrated when I couldn’t figure out how to display those post types. I started working on my custom CSS as well, but didn’t get too far with it, because I thought I needed to add more content before I could really decide what properties I wanted certain classes and IDs to display. Back and forth, back and forth.

I’m coming to class with a lot of questions. But at least having questions means I’ve made some progress. Here are a few:

  • I copied the custom post type code from the Reading List example, but I can’t figure out how to add more than one meta box. When I tried simply duplicating the code, I threw an error on my test site: “invalid post type.” Undo, undo. Save. Walk away.
  • I have two custom post types built into my live site now (yay!): one for event posts, and another for job posts. I was hoping I would be able to use CSS to differentiate these posts visually, but when I refreshed my site, I couldn’t even figure out how to display these different posts! Research, research. Over my head. Save. Walk away.
  • I also have some wish list items that I imagine would be relatively do-able, but won’t focus on too much because I’m not sure they’re feasible with our timeline. But I’ll ask here, anyway: I would love a feature that would connect the data from my “event date” meta box to a calendar widget elsewhere on the site. That way, each event would appear both as an independent post, and as part of a collective calendar. Is this possible? And how hard would it be?

So many questions…

Developer Profile: Ryan Schneiderman

Ryan Schneiderman is the younger brother of a good friend of mine, Jason. They’re both developers — Jason works at Bloomberg and develops applications for the Bloomberg Terminal, a key piece of technology that traders, banks, and financial institutions worldwide use to get information on the price of a stock, for example, as fast as technologically possible. Though Jason doesn’t really use any of the technologies we’ve been exposed to in this class, he suggested Ryan would be a good choice.

Ryan graduated from Tufts University with a computer science degree last year and has been working as a freelance web developer since then. He recently finished a complete website for his father, a successful photographer in Vermont.

The first stage was architecting the overall project. He wanted to figure out what backend framework to use. Schneiderman eventually went with Django, which is a high-level Python web framework, mostly because he saw that a lot on job applications and assumed it was one of the more marketable backend architectures to learn. It turned out to be a really good framework to use for the website.

The first step after deciding to use it was to research a bunch of tutorials on how to use it, and then started to get simple “Hello World” pages working. He used Amazon Web Services to host the website. It was an early major hurdle, Schneiderman said, to know that he could host a Django application on AWS and then, from that point forward, it was just a matter of writing code.

The first thing he tried to do was just to display one of his dad’s images on a page with nothing else, just an image by itself on the front page. That in itself contacted all of the different parts of the application, from the database, to the view which queries the database and sending that information to the front end.

“I remember when I did that it was like the first  ‘eureka’ moment,” Schneiderman said.

A lot of the early process was troubleshooting. it was a lot of Stack Overflow, Googling, some YouTube videos. Every step of the way Schneiderman said he gained a little better understanding of what’s going on, then chunking away, getting a breakthrough, and hitting another obstacle.  Learning a new language or framework is a lot of small little victories that contribute to a greater understanding along the way.

“It was more a mental hurdle than anything else, just to stay the course and keep chipping away,” he said.

To design the prototype for what he wanted the site to look like, Schneiderman just used pen and paper just to figure out the aesthetic, the organization, what he wanted to have on each page.

As for giving his non-programmer father ability to use the site, Schneiderman said Django allows for a templated admin page that’s attached to the website. It’s basically an interface for the database, so you can upload images.

Django comes with a decent template structure to interface with the database from a user perspective. So that was actually one of the things that Schneiderman felt very fortunate to have chosen Django because otherwise he likely would have had to build an application that his dad could use to upload.

Most of the communication and collaboration between Schneiderman and his dad was on the functionality of the front end, which ended up being mostly HTML, CSS and JavaScript, including some React.

React is a JavaScript framework that allows for updated and state-based JavaScript. So for example, you can have constant rendering of different content that doesn’t require completely reloading the page.

On Schneiderman’s website there is a gallery that displays cascading images, and then when you click on the images, it enlarges it and then will take you to a separate page. And what you can do on the page is click on arrows that act as a slideshow and it gets you to different images. That function of moving through the images meant he had to reload the page every time.

But when he built the same slideshow on React, it was basically instantaneous. The tradeoff was that in order to do it, the page had to load more content up-front. So when the page is first loaded, all the images that you could possibly click on are already loaded, which takes a little longer.

This is as opposed to having one image on the page, then clicking through and sending a request to the backend to get a different image, so it was definitely worth it.

“If you’re planning on implementing anything dynamic on the front end, I would highly recommend looking into React,” Schneiderman said.

There was a lot of JavaScript, mostly interacting with dynamic content. For example, some images are vertical or horizontal, different sizes and proportions. When the page was loaded, Schneiderman wanted certain styling to be as a function of what the sizing of the image would be and of whether the image would be matted or framed.

With Django, there are certain tags where you can access content from the backend in the front end without having to do really complicated queries.

“It’s literally curly brace, percentage sign, and then whatever you named your image in the backend. Very simple,” he said.

Schneiderman recommended using YouTube videos to gain a high-level understanding of a new framework, and StackOverflow to get more granular. Google is also useful, but it’s key to use precise vernacular.

If he was to do the same project again, he likely would have used Bootstrap, which is a powerful HTML, CSS and JavaScript library Schneiderman wanted to use to simplify his CSS. Schneiderman styled the site by hand, and regrets not knowing about Bootstrap before.

Schneiderman, who coaches a middle school basketball team on the side, is now developing an app that helps basketball coaches and players facilitate the team building process. The app is within a website that can diagram and animate the plays. This way, players are able to study and learn plays more effectively and more academically, because the only time players are learning a play is in practice.

JavaScript & jQuery: Challenge Accepted

I walked out of the February 12 class feeling somewhat positive that I could rock this gallery assignment. I quickly found out that feeling would not last as long as I would have liked it to when I was put to the test to do the gallery assignment on my own. During Tuesday’s class, my eyes were glued to the screen as my instructor went through HTML and the pseudocode for JavaScript. With Codecademy as my resource and a head start on the gallery assignment, I was not going to accept defeat. This assignment was going to be the best one yet, as so I thought!

Here is a run-down of what happened this week following the Tuesday class:

Wednesday: JavaScript lesson review

Thursday:  jQuery Codecademy review

Friday: reviewed class lecture on Google Drive

Saturday: stared at pseudo code, used YouTube as a resource

Sunday: felt confident, reviewed gallery pseudo code, felt stressed, emailed instructor, desperately emailed 2 classmates for help, met up with 1 classmate, did my best to throw something together, felt defeated

Ultimately, my goal was to meet the deadline, but I became frustrated when I could not figure out how to get my buttons to work. One of the biggest lessons learned from this week’s assignment is that there is not a right way to create a finished product. I believe that my biggest mistake was overthinking that I was not doing the assignment the right way. There are so many ways to get to the final product!

I watched plenty of videos on how to create a gallery and noticed that a few people would use the hide feature in CSS instead of using this feature in JavaScript. Is there typically best practices of when to use CSS or JavaScript? I think it also confused me when I saw HTML, CSS, & JavaScript in one file of code. Do beginners separate the files to understand how each language functions or do some developers separate the files to keep everything organized?

Although I felt very defeated from this assignment, I am not going to let that get me down. I accept the challenge to eventually understand jQuery & JavaScript at the most proficient level that a beginner can be!

Gallery

For the past few weeks, we have been doing various short exercises to learn HTML, CSS and jQuery. We have been doing them separately or only in pieces each time. This week, the gallery exercise was perfectly timed because we got to see a bigger picture of the three languages and see how all work together to create a full project from beginning to end.

It was extremely helpful that we worked in class on the gallery on Tuesday. Since this was our first full project, it would have been hard to wrap our head around the logic of the jQuery code. I would suggest offering more direction in the prompt itself just to give more input into our first project.

The HTML and the CSS parts were doable, but the jQuery part was a little tricky because there were many ways of doing the gallery and it was a little challenging trying to figure out whether to do the long JavaScript version or the jQuery shortcut. 

I used Google a lot to try and find tutorials and all sorts of help online. Many websites mentioned a Lightbox that you download and add into the  code to help make the gallery get set up more easily. Since we are still in the early stages of coding and we have advanced in the learning process, we had to go about it in the long manner and actually explore it step by step. I decided to make the next and previous buttons the focus of my code. The first image was my first slide and the rest followed as we clicked on the next button or the previous button. I found it difficult however to figure out the code needed to have the gallery reset once we go through the entire carousel. I was not sure if I did the first part right but I did not really add anything for the second part. The good news is that my HTML and CSS were not difficult to do and pretty straightforward, but I spent around 3-4 hours a day since Thursday trying to figure out jQuery code. I decided to go with my own logic and something different from the logic we did in class. I realized that I need to spend a few more hours in the next couple of days getting more comfortable with the handlers. I need to become more natural with understand the code and reading it as an actual sentence.  

.showMe more

This week, we had the chance to learn and code using jQuery. It has changed the way people write JavaScript. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML documentation, event handling, and CSS much simpler. What I found hard about learning jQuery is learning all the handlers and figuring the order of the code. For the upcoming days, I need to watch more videos and re-emphasize the knowledge in my mind.

I did a mistake while doing the chapters this week. I did the interactive lessons, then the quizzes for all the chapters and then I went back to do the freeform projects for each chapter. The issue was that I got the concepts all confused and when I tried to do the freeform projects I became confused with all the information and the concepts I had learnt. For the future, I am going to do each chapter fully and separately from one another and I am going to do all the parts of the chapter at the same time and not in pieces so that I apply whatever concepts I learnt immediately. This will help me build one new information in a more organized way.

Attempting CSS

For this week’s lessons on Codecademy, I felt more lost and behind than the previous week. It was definitely noticeable the difference in pace, since the lesson had just picked up from where it had left off the week prior. Particularly, I was having issues with CSS, I think primarily because that concept of language is literally something I have never seen before. I know I will have to backtrack and redo the lessons in order to understand how to execute it. Additionally, when I was on GitHub, I felt like I was back in time trying to customize my MySpace account, which was nostalgically hilarious since my HTML skills have only gotten worse since then. I was using GitHub the website version, and the main issue I had was to figure out how to implement CSS on my repository. To be honest, I did not figure it out and looking back my only guess would be that this is something I need to do on the GitHub desktop version.

For the reading, the Inspect and Edit Styles article started off with a screenshot of an inspected element. Even after reading the article from top to bottom twice, I am still slightly confused with elements it discussed, such as examine and edit box model parameters. Personally, all this type of information and learning is completely different than I am used to. I was hoping to challenge myself by taking this class and I think that already by the second week I can feel it. The verbiage that discusses HTML and CSS is very particular and is throwing me off more than anything. I just think that it is dense, and have to constantly look up words and their reference on Google is slowing me down more than I originally anticipated.

Coming together

This week for me represented a big step forward. I was quite nervous to build a prototype homepage from scratch — I was pretty sure I was unprepared to hand-code a full webpage. The assignments for this week ended up taking me more time than I anticipated and that — combined with starting a new job and some light procrastination — pushed me past the deadline.

But however long the work took me to do, in all the work ended up not being as difficult as I feared. My fingers started to type the correct tags with ease and my page slowly but surely came together. The lessons taught some important new information, especially styling conventions, that for the first time for me felt as if they were logical extensions of what we’ve already been learning.

It did take me a little while to figure out an ideal workflow when actually using Sublime Text in conjunction with GitHub. I found myself working past where I should have entered a commit, and therefore felt I had to cut out some code, make a commit, and re-enter it in Sublime Text and make another commit. I also wanted to check my page before a commit, so I ended up writing some code, popping it into a browser, refining it, and then committing. Just logistically, it’s a lot of jumping around on a laptop screen, so once or twice I got a bit lost between different windows on my laptop.

I also started to get a sense for how I should use CSS — I can see how a separate style.css page would be almost required for a larger page. But for our purposes for this assignment, using inline CSS between <style> tags felt more natural and easier to manipulate.

 

The beginning steps of building structure

The highlight of this week in terms of assignments was being able to do lessons on Codecademy! For the longest time I was not sure what HTML and CSS stood for or the difference of these languages. I am happy to say that I finally discovered that HTML stands for Hyper Text Markup Language and the purpose of this language is to structure content on a page. As for CSS, it stands for Cascading Style Sheet and it is the style that dresses up the structure. These languages go hand in hand and often work together to create a beautiful web page. I think the reason why I have always been hesitant of code is because I was afraid of not understanding the purpose of each language. However, these two languages have names that speak for themselves once you know what each letter stands for.

In Codecademy, I was able to pick up on the material pretty quickly. However, I felt like the experience of doing these lessons had similarities to learning a foreign language. During undergrad, I studied Arabic and had to learn different rules in order to read and write. With HTML, there are different headings and tags that can easily go wrong if you do not follow the HTML rules. It is similar in learning Arabic, it is possible to completely change the meaning of a word by not following the rules of which letters go next to each other. It is important to continue practicing a foreign language daily in order to exercise this muscle in your brain. So far, it seems like it will be the same case for HTML & CSS. I feel determined to build the structure and let the rules flow after I continue to practice and revisit these lessons on Codecademy in the future.