Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
In this course, I will walk you though developing your own, Responsive and Interactive website from scratch. And when I say scratch, I mean it. Unlike some lessons and courses out there on the Internet, this course shows you how to build everything, without using any bloated frameworks, plug ins, libraries, or even jQuery. You will be learning everything from the bare bones.
How this course is taught
I have been a web developer now for over 8 years, but I was once in your shoes, and I have created my course, based on how I and other developers would have liked to learn web development.
Every video goes straight into coding and creating an amazing site. I have done away with any guff or filler that you may find on other learning materials and create a no nonsense course. There are no confusing lessons nor any ramblings. There is just honest and direct teaching that I am sure you will love.
I have split this course into 3 sections.
HTML The foundations of any webpage. The HTML is the content of your site, and I help you build and layout your site in the correct method. Also the HTML will be SEO optimised as we use the correct elements for each section.
CSS This is what makes your site look awesome and visually pleasing. The course goes through how to style your site efficiently. We go through things like reset CSS to give a constant look across browsers, without any bloat.
Also the lessons will go through using the correct selectors, to target specific elements that you want to style.
Finally we will be making our site responsive, by using different methods, such as percentages and media queries, to make your site look amazing no matter if you are viewing it on a desktop, tablet or mobile.
Why else should I take this course
Once you have completed this course, you will be able to develop your own websites, from scratch without any reliance on anything. Your sites will be so fast and so optimised that you will be able to blow the competition out of the water, if thats not enough.
So with all that and a Money Back Guarantee, Click the 'Take this course' button and start your journey in becoming a great web developer.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Introduction and HTML|
This is the start of your journey, on how to build a website from scratch. In this lesson, we will be breaking the ground on building our web page.
The lesson will be going through the main tool that you will be using to build your master piece, a code editor. Once you have installed your code editor, you will start to create the file structure and then laying the foundations of the first page, the index.html.
We have the full project hosted on our github page, which you can find at https://github.com/thejsdojo/fromScratch
Want to see the site in its final form, then check out http://boxfreshkicks.com
In this lesson, we will finish of the layout for the HTML. Adding each section, and constructing the divs and classnames in a way to help style it further in the CSS lessons.
|Section 2: CSS|
Now that the HTML is complete, you will now want to style the page to make it look awesome. To do this, you will create and link up our CSS files and also use a reset stylesheet, to build a consistent look to our webpage across different browsers.
You will need the reset code from Eric Mayers http://meyerweb.com/eric/tools/css/reset/
This lesson, we will go over using special web fonts for our web page. Due to the nature of websites, we can only use the fonts on our site that is already on the visitors computer or device. However using the font face css property, we can use our own web fonts to make our web site look even more awesome.
Google have a fantastic library of free to use web fonts. You will be selecting two of these fonts and then adding them to our web page.
You built your web page to have separate sections with different styling in each section. In this lesson, you will be styling up these sections to make them look great. You will also be laying the foundations in making our web site responsive.
There is no point going through all this hard work, if our web site cannot be viewed correctly on mobile and tablets as well as desktops. In this lesson, we will be using css media queries to target different screen sizes, and making our site adapt and respond to each screen size, so it easy to use and looks great, no matter which device you are viewing it on.
Now that our site is looking awesome with CSS, we now need to make it interactive and get our visitors attention. Firstly you are going to build a slider that will rotate a different promotion to our users on a set interval.
You will create the slider in the HTML, then using CSS3 you can use CSS animations and 3d transforms to get an amazing slider that animates smoothly on desktop and mobile.
With the HTML, CSS and the JS connected to your page, you now need to get the slider moving on a set interval.
In this lesson, we will be going through some of the JS and programming basics, to build functions that you can call to get our slider animating for your visitors.
This is our victory lap. We will be adding the final part to our site, the contact us form. This will be a real contact us form, and you will be using a technique called AJAX to send your data to a third party API, who will then process this data and turn it into a email.
If you wish to follow along with this course, you will need to sign up to a free account to Mandrill - https://mandrill.com/
I learned web development over 8 years ago, and since then I try to continually learn as much as I can. I am is forever reading blog posts, reading books, and watching youtube tutorials (unless I gets distracted by fail clips).
When not hunched over my desk, fighting with the keyboard, I enjoy training in Mixed Martial Arts, cycling and watching sports.