Table of Contents |
In the last section, I showed you some of the problems Web Developers encounter while building and maintaining a website. In this section, I’m going to show you more of the details that go into a web page. I’m coding a new version of the page that service providers use to sign up and manage their profiles. Camila mentioned that we are expanding services for other animals. The new version I’m creating will allow the providers to add additional details about the services they offer and the types of pets they can provide service to.
Before I start coding, I review the requirement wiki to see the new fields we are adding, and then Monique (Software Engineer) and I quickly sketch out how she will structure the data. I create a mock version of the web service that will connect to the website. This allows me to make my development changes without waiting for her part of the changes.
I make those changes to the service and then focus on the HTML changes. I look at the existing webpage to see if there are any components or modules that I can repurpose or reuse. The design Mori (UX) gave me is different from what we already have. The navigation of the site stays the same, but the profile section will just need some tweaks and then it can be repurposed. I told you a little bit about how HTML uses tags to structure the elements. There are specific tags to use when you’re building different things.
Looking at a Sophia page with search results for HTML, how many of the HTML tags on the right do you recognize now? Kind of fun, huh? HTML tags are an easy way to structure documents and websites, but there are other benefits too. Screen readers and other device accessibility software use the HTML tags to assist users in navigating sites. Developers can use the alt attribute to provide alternative text for visual elements like images.
Let’s return to my work on the Poodle Jumper website. Once the HTML elements are in place, I work on a few tweaks to the CSS. CSS is where we define the details about the font, spacing, styles, and colors for the page. The style of the new page is very similar, so I don’t have to do too many changes, but getting them to look just right takes attention to detail.
That’s the beauty of CSS, the styles cascade or flow from page to page once you’ve established the formatting. Not every web developer likes this part of building a website, but it is my favorite. The satisfaction I get when I see a beautifully executed web page is the best. Many web developers underestimate how much work it takes to get everything just right.
Every time you write new code, errors can happen. Errors can come from typos, syntax errors, or making an error in the logic. When a developer searches for issues and fixes them, it is called debugging. When I started developing websites, I dreaded the process of debugging. It can be difficult to know what the different error messages mean and how to fix them. I’ll talk about debugging more in the next section.
I’m still waiting on the database changes from Monique (Software Engineer), she’s been busy with another task, so I take the opportunity to show Mori (UX) and Jose (Product Manager) what I’ve I’ve built so far. They like the progress but had a suggestion on changing the order of the fields. When requirements change, it can be frustrating. I’ve learned it is part of the process, so I structure my work in small chunks to make it easier when things need to be changed. Once the database changes are complete, we’ll be ready to wire it up and finish testing.
Source: This tutorial was authored by DEVMOUNTAIN and Sophia Learning. Please see our Terms of Use.
