Build a responsive and interactive web site from scratch

Learn the foundations of HTML, CSS and JavaScript and gain the confidence and skills to build and website from scratch.
3.3 (5 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
32 students enrolled
$20
Take This Course
  • Lectures 10
  • Contents Video: 2 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 English

Course Description

Are you looking to start out in web development, or are you a front end developer, with some HTML and CSS skills but looking to branch out further into JavaScript, well this is definitely the course for you.

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.

JavaScript My favourite section. The course will show you exactly how to program common components found on most websites, just using plain JavaScript. Once you finish with my course, you will be able to build your own,

  • Responsive Sliders
  • Reveal mores
  • Contact us form, which sends real emails.

You will be able to build these components from scratch using plain JavaScript, without any dependences (such as jQuery). The course also demonstrates some of the common programming techniques such as,

  • Variables
  • Functions
  • Loops
  • Ajax
  • JSON objects
  • APIs

A lot of developers rely on jQuery and other libraries, however any developer worth their salt should know plain JavaScript, and you will finish the course, knowing a lot more than some of the professionals out there.

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.

  • Access to the course community, where I am extremely active and on hand to answer any of your queries.
  • Hours of video, that is top quality and in full HD, taught by a native english speaker (I am from England).
  • I love teaching, and I am committed to anyone that takes my course.
  • 30 day Money Back guarantee if you are not happy with my course.

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.

Matthew.

What are the requirements?

  • None, we cover all the basics in the course.
  • I will show you step by step on how to build each section. Your page will be build from the ground up.
  • No expensive software or equipment needed. You can use Windows, OS X or even Linux
  • The course is given in english by a native english speaker (I am from England).

What am I going to get from this course?

  • Build a web site from scratch without using any frameworks or libraries
  • Create a web page using HTML
  • Build a responsive page that will look great and desktop, tablets and mobile
  • Build a interactive page using JavaScript, you will be able to build sliders and contact forms from scratch
  • Style a web page using CSS to make it look awesome
  • Select web fonts from google fonts and use them on their web site
  • Understand and use CSS resets to give a consistent look and feel across browsers
  • Build your own interactive components with JavaScript without relying on jQuery or other libraries

What is the target audience?

  • This course is perfect for web developer newbies or developers that are familiar with HTML and CSS but wish to expand their JavaScript knowledge.
  • There is no prior front end (html, css and JavaScript) knowledge needed. I walk you through everything in the course
  • All you need is a computer (Windows, OS X or Linux) a passion to learn

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction and HTML
12:40

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

10:24

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
10:28

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/

08:57

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.

15:20

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.

15:28

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.

Section 3: JavaScript
15:03

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.

10:03

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.

11:43

Now that the slider is looking good, we now need to get our show more elements working. In this lesson, we will go through the JavaScript that is needed to get each 'Show more' working.

We will create a single function that will work for all three columns, so that if we expanded more columns, our Javascript will work perfectly.

16:19

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/

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Matthew Phillips, Senior Front End Developer specialising in Mobile, JavaScript and angularJS

Hi there, I am a Front End developer specialising in mobile development. I am very passionate about JavaScript and I love using AngularJS.

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.

Ready to start learning?
Take This Course