
A brief overview and welcome to the course!
In this lecture we will plan your website so you don’t waste your time building something you will not use, or vice versa.
In this lecture we will learn the tools used throughout this course. All of them FREE and without subscription.
As of today, the official links for these apps are below:
ATOM: https://atom.io
FILEZILLA: https://filezilla-project.org
GITHUB DESKTOP: https://desktop.github.com
In this lecture we will navigate to the templates page in order to choose the one that best suits our needs, free and without subscription needed.
Here you will find the templates source: http://html5up.net
I also include the template used for this course, virgin. USE THIS ONE.
I also include the template used for this course, already edited. I don't recommend using this one, given that the work is done.
In this lecture we will go over the languages that compose a webpage, very briefly, so you can get an idea of the different languages’ function
In this lecture we will go over the languages that compose a webpage, very briefly, so you can get an idea of the different files’ function and its interactions.
In this lecture we will see how to use Github for keeping a version control of your website
In this lecture we will see an alternative to Github, less secure but much simpler
In this section we will see how to modify the already downloaded template so it suits our needs. This section works with a template A, and afterwards we’ll see how to change the background on a template B.
In this section we will see how to change the web header
In this section we will see how to change the navigation menu
In this lecture we will see how to change the introduction section of the web page
In this lecture we will see how to change the first section of the web page, working with some icons and FontAwesome elements, as well as adding some secondary pages
In this lecture we will see how to change the second section of the web page
In this lecture we will see how to change the last section of the web page, the contact one or modifying some buttons
In this lecture we will see how to change the footer
In this lecture we will complement our page with various useful elements
In this lecture we will see how to change the font of the website, using Google Fonts
In this lecture we will see how to change the background of the webpage, as well as how to resize it so it fills the available space and ‘floats’. Image by David Gallie (Pexels).
In this lecture we will do as in the one before, but using another example, given that we may face it some times. Image by David Gallie (Pexels).
In this lecture we will add some images to our website, as well as deciding where to position them
In this lecture we will learn how to embed Youtube videos into our web page
In this lecture we will learn how to embed a Spotify player into our web page.
In this lecture we will learn how to add a downloadable file, such as our CV or a document, into our web page
In this lecture we will learn how to change the title and add some interesting metadata to our webpage
In this section we will see how to get our website ready for being uploaded to the server
In this lecture we will see how to reduce the images size so the page loads faster.
In this section we will see how to clean the code and comment it so we get to understand what we did in future editions of the content
In this section we will enter the hosting world, learning how to handle it, hire it and put our website online.
In this lecture we will decide a domain name, following some general rules
In this section we will finally go through the path of buying the hosting (which is up to you) and learning how to configure it and navigate through its options. This lecture is exemplified with one particular hosting service, but can work with many others.
In this section we will learn how to transfer the files to the host with Filezilla.
last section! In this section we will see how to create an email account and build a form that emails you every time you get a form message.
In this lecture we will see how to create an email account such as info@yourdomain.com
In this lecture we will learn how to build a form and the php backend so it sends you an email every time somebody has filled out the form. We will see other alternatives, as well.
Looking to have control over your website but don't want to learn coding? This is your course.
Creating a website from scratch can be tedious and quite a nightmare, and getting it online, more of the same. This is why, in this course, you will learn how to modify an amazing template to quickly get results, so you can focus on the things that really matter for you or your personal business.
We are not here to learn how to create a website from scratch, but this course is about getting results, getting your website working as quickly and efficiently as possible. And the most important thing, I will tell you how to hire the hosting and how to upload it.
In this course we will go over these steps:
A light theory about the webpage ecosystem
Conceive your webpage
Choose the perfect template
Modify the template to suit your needs.
Prepare the web package
Get your web online
Design a beautiful landing page for you or your business, with plenty of complements. Become fully independent, owner of your website from end to end. What is the price for a website?
Add Youtube embedded videos, images, Spotify banners, tables, downloadable files, sections. We’ll even learn how to implement a php form and get it working. Google captcha as well!
No need to master any programming languages or software, everything is explained in a plain way, for all publics. Sometimes we may go slightly technical, but nothing that you cannot handle.
The free used software exists for both Mac, Windows and Ubuntu.
DISCLAIMER
We will NOT be using Dreamweaver or other packages, this is not a course on Dreamweaver.
The course does not cover, either, a web with shopping cart or so.
The hosting service is ALWAYS something that you have to pay, the same way you would buy a photography camera for taking pictures, and the same way you would need your camera for going through a photography course.
In this course we will edit the HTML code. Yes, there's black screen, but I believe this approach is a lot faster than learning how to use a new tool like Dreamweaver or so. And it is explained in a way everybody can understand it.
This course gives general guidelines for the different templates exposed at html5up. Knowing this, I cannot handle answering every question regarding individual students’ elements. The design is personal and the path to walk is drawn. The course is very complete, and it covers a wide variety of modifications.
CREDITS
-FX by kwahmah_02, dersuperanton, goldendiaphragm, tim.kahn, Winamice by Freesound.
-Background music by Bensound.
-Picture by Pixabay from Pexels.