Jubilee Austen's portfolio site is almost finished. All the HTML and content are on the site. The CSS is finished.
All that is left to do is validate the code for any errors and then get the site live on the web. Today's post is covering lessons 20 and 21 in Skillcrush 101. Lesson 20 is about finishing your code and checking your HTML & CSS.
Lesson 20 isn't just about double-checking your code. This is where you'll look at whether your site is compatible with different browsers. Once all the tests pass, it is time to launch your site.
Lesson 21 talks about domains and web hosting. Skillcrush introduces FTP and how it can help you get your code up on the internet. Both of these lessons wrap up the Jubilee Austen portfolio site and allow students to put the finishing touches on the guided projects.
Today’s Agenda
- Validate your HTML & CSS code for errors.
- Test for cross-browser issues.
- Launch your website.
A Note on Today's Items
There are four new items you'll need for today's mission. The first item is an HTML validator. An HTML validator is an online service that runs your code to find errors.
The validator will notify you what these errors are and where you can find them in your code. Skillcrush recommends the W3.org HTML validator. You can upload your HTML file or you can just copy-paste your code then the validator does the rest.
===> Click here to run your code through the HTML validator
When you check for cross-browser issues, you will need to download different web browsers to test your website. Every web browser is different and its default settings will affect how websites look. Computers will often have browsers pre-installed on the computer, but you'll have to download a few other browsers.
I have a PC so my computer already comes installed with Microsoft Edge (basically Internet Explorer). This means I won't be able to check for browser issues for Safari. While I could find a non-native version of Safari for PC to check, it isn't recommended since Apple and Microsoft don't offer support for these non-native versions.
When it comes to checking for cross-compatibility issues, just stick to the most popular web browsers. Although I have Microsoft Edge installed on my computer, I'm going to do most of my cross-browser testing on Chrome and Firefox. Just click the links below to download these browsers to your computer.
===> Click here to download Firefox!
===> Click here to download Chrome
Domain and Web Hosting
Finally, you'll need a domain and web hosting. Domain and web hosting are something you'll have to buy, but tons of services can fit every budget. You can buy both your domain and hosting from the same provider or you can mix-match these services.
Every developer has an opinion on which provider they use so I recommend doing some research first. In one of the Facebook groups I use, another member had this advice when picking a domain and hosting provider.
"Determine what you need in a hosting company, understand what their plans offer you, and make your decision. How much traffic do you expect to have... do you want to have dedicated hosting vs shared hosting? Are you looking to save money? Or are you looking for a performance-first website?"
Once you know the answers to these questions, you can start looking around to see which providers will offer you everything you are looking for as well as what the standard performance looks like for every provider. During the holiday season, many providers might be offering special holiday deals. Feel free to check out these providers to see what deals they are offering.
Although this post is about domain and web hosting, I won't be buying domain and web hosting to launch this portfolio site. Instead, I will walk you through the process you take to connect your domain and web hosting as well as how to use FTP to upload your files. If you aren't quite ready to buy domain and hosting, feel free to follow my example and use CodePen to display your new website for now.
FTP Client
As soon as your domain and hosting are connected, you can transfer your website files to your hosting provider's web server. Developers often use the File Transfer Protocol (FTP) to help get everything on the web. FTP allows you to get access to your hosting provider's web servers.
Think of it as a link to connect your computer to the hosting provider's web server. These can be free while others require you to pay. In some instances, the hosting provider will provide their customers with one.
Every FTP client is different, but they are similar since they always ask for your username, password, and server domain. Skillcrush's demonstrations use Fetch as their FTP client. Fetch is $30, but Skillcrush suggests Filezilla as a free option.
===> Click here to buy Fetch!
===> Click here to download Filezilla
1. Validate your HTML & CSS code for errors.
The first part of today's agenda is validating my HTML & CSS. Think of this step as the editing stage writers use when they write a book, blog post, or essay. Developers validate their code for any errors they might have missed and just make sure everything is working smoothly.
Developers are after all mechanics of the tech world where their job is to fix what is broken. Flatiron School Dean Avi Flombaum always says that developers need to get used to working with broken code because that is what a developer does. If everything worked just fine, they would be done for the day.
I'm going to start with my index.html and see if any of the HTML needs to be modified. Skillcrush encourages students to use the HTML Best Practices lesson as a checklist to evaluate code for errors. You can also run your HTML code through the HTML validator at this stage.
I recommend doing both techniques since you can often spot errors right away when you look at your code. The HTML validator will then catch any errors that are left. Once the index.html file has passed the tests, it is time to check the CSS.
There isn't a validator for CSS, but Skillcrush encourages students to use the CSS Best Practices lesson as a way to double-check their code. I also like to double-check my site with the original design comp provided to help me spot potential style issues.
2. Test for Cross-Browser Issues
Before you can launch your website, it is important to check your site on the most popular web browsers to see if any errors pop up. There are many web browsers available and every browser has different default settings for displaying HTML & CSS. This means Chrome will have different settings from Safari.
Regardless of these differences, developers have to make sure the websites they create look the same on every browser. Once I downloaded my web browsers, I just copied the link to my local site into each web browser and compared them to each other. As I look at my site on different browsers, I need to pay attention to the layout of my site and the content.
If there are any differences on any of these web browsers, I need to go back to my CSS and tweak the code. Feel free to use the dev tools in each browser to help you look for any issues with your code. If you used a boilerplate, you are ahead of the game since this helped minimize some of the cross-browser issues.
However, it won't eliminate them all so you still have to check your code. As you check your code in each browser, Skillcrush created a list of questions students can use to help them find cross-browser issues. Use these questions as a checklist to help you spot some of the most recurring cross-browser issues.
- Does your layout look right?
- Is all the content displaying correctly?
- Is everything readable?
- Are your images in place?
- Do all your links work?
- Are your web fonts displaying as expected?
3. Connect your domain and web hosting
The final objective for this project is to get this site live on the web. I won't be making this site on the web since I already have this project available as a CodePen project. Nevertheless, it is still important to know how to set up your domain and hosting since you will be doing this in the future with other projects.
If you are looking to get a job in tech, having your domain name is a great way of branding yourself and helping build your online presence. Connecting a domain and web hosting does cost money, but there are plenty of options available for every price range so you can mix-match according to what you can afford. The first thing you need to do is buy your domain and hosting.
A domain is your site name on the internet as well as your URL. A site's URL is the same as an address to a building. For example, a website has the domain britishpandachick.
This makes the URL britishpandachick.com. So if you visited this URL, you would see the britishpandachick.com. When you purchase your domain, you need to see if the name you want is available.
Skillcrush encourages students to pick names that are easy to remember. Think about some of your favorite websites you visit and what they have in common. These names are all easy to remember and easy to spell.
As you pick out a domain for any web project you make, think about the website's ultimate goal and what it will be like after it is launched. Once you have that idea, just input your domain name to see if it is available. Many domain providers have sections that allow users to see if a domain is available.
If it isn't, the services will suggest available alternatives. If your name isn't available, try experimenting with different variations of the name you want. Skillcrush also encourages students to look at top-level domains which just means there is a different extension for the website.
Some of these top-level domain extensions include .net, .me, .ly, .co, and plenty of others. Once the domain has been decided, it is time to turn straight to web hosting. Web hosting costs money since hosting providers use the cost for security maintenance as well as customer service if you use it.
Some web hosting providers offer extra features you can buy for your site, but these are optional. Hosting varies for each provider so feel free to use the tips I mentioned earlier for choosing the right hosting provider.
Putting It All Together
The domain and web hosting have been purchased. At this point, your provider takes time to get everything set up. This will take some time depending on which provider you choose.
If you bought your domain and hosting from separate providers, you'll have to manually connect the two yourself. Those who purchased both packages from the same provider can move on to the next step since this is already done for you! Connecting your domain and hosting is going to vary depending on what providers you use, but these steps are similar and will have similar names for each component I mention.
- Log into your hosting provider and go to manage domains.
- Click host new domain.
- Add the new domain name you'll be hosting.
- Pick the extra security features or bonus features you want (Optional)
- Click done when you're finished.
If you have any questions, contact your customer service rep to help you troubleshoot. At this point, your domain is added to your hosting package. It is time to connect the domain to the web hosting provider's nameservers.
First, you need to find your hosting provider's nameservers. These are often using ns1.hostingprovider.com, ns2.hostingprovider.com, or ns3.dreamhost.com. When hosting providers e-mail your information, these will often be included in the e-mail.
You can also find this information in your account info. Once you have the nameserver information, go to your domain provider. Click on the domains section and click the domain name you want to change.
Look for the nameservers area (these might be at the bottom). You'll be changing those nameservers to the ones for your hosting provider. Click modify servers then replace all the domain's nameservers with the ones from the hosting provider.
Just click ok and you're done. Sometimes this process might take 24 hours so be patient. Remember if anything seems off, don't be afraid to reach technical support for help.
How to transfer your files to the web
Remember the e-mails your web hosting provider and domain provider sent you with all your information? That e-mail has everything you need to know to access your FTP. You need the username and password from your web hosting account and then the separate domain your domain provider uses.
Once you get this information, you are ready to go into your FTP client. Once you log into your FTP client, go into a folder with your domain name. This folder call also is named something like public_html folder for some web hosting providers.
Inside that file, take a minute to do a little bit of tidying up by deleting starter files. Next, go to your computer and select your local web files. All you need to do now is just drag-drop them into your domain name folder in your FTP.
It should take a minute to transfer over. Once it's done, go to your website and all your content will be live on the web.
Mission Accomplished!
Jubilee Austen's portfolio site is finished, but I want to congratulate you fellow readers since there was a lot of information covered today. You learned about validating your HTML & CSS code for errors, domain and hosting, FTP clients, and the process needed to get these items on the web. If you are following along during this demonstration, you should have a website live on the web that you coded yourself.
Although I didn’t launch my website live on the web, you can see the finished project on my CodePen account below. Tomorrow, it is time to start a brand new project. Remember that bonus project I mentioned earlier in this series?
It is time to tackle the last big project of Skillcrush 101. I’ll be using this post as a review as I translate the final design comp into a website.
This post was originally published on November 22, 2017 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on DEV.
Top comments (0)