Online College Courses for Credit

+
Sample Web Development Project

Sample Web Development Project

Rating:
(0)
Author: Devmountain Tutorials
Description:

Analyze the steps that the web developer takes to make sure that the website works effectively.

(more)
See More
Fast, Free College Credit

Developing Effective Teams

Let's Ride
*No strings attached. This college course is 100% free and is worth 1 semester credit.

47 Sophia partners guarantee credit transfer.

299 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 33 of Sophia’s online courses. Many different colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial
what's covered
This section will explore a sample web development project by discussing:
  1. UPDATING WEBPAGE HTML
  2. CSS AND ERRORS

1. UPDATING WEBPAGE HTML

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.

Image show a list of sample code with coding symbols
HTML Tags

 Image shows a browser with the Sophia.org website on the left with a search for HTML and four search results listed. On the right is the inspect console of the browser showing the HTML structure.
HTML Code

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.


2. CSS AND ERRORS

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.

 Image shows the CSS for a website
CSS Code

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.