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.
Learn how to build a responsive website from scratch!
I'm an instructor at Steer - code school based in London. At Steer, we believe in project-based learning and design-led programming courses. This course is suitable for complete beginners to code.
On the course I’ll lead you through each step needed to create beautiful, bespoke websites of your own.
You’ll build a single column site that'll introduce you to the basics of HTML. Together we’ll look at elements like html, head, body & section, and work out where each of these should be used to correctly structure your content.
Once we’ve covered all of that we'll move on to CSS, looking at selectors, classes, properties and more.
Finally we'll look at making your site responsive - showing you how to make sites look good across different screen sizes.
By the end of this course you'll have a beautiful food-blog style site which you can use as a template for your own projects. This course will ensure you have all the knowledge you need to take your first steps as a web developer.
What am I going to get from this course?
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Introduction|
Find out what you'll learn on this course and check out the project you'll build - 'Munch'!
In this lecture I'll show you the tools you'll need and where to get started. We'll use 'Hello World' as an example of displaying text in the browser.
Download the following free tools to your computer to follow along:
1) Google Chrome https://www.google.com/chrome/browser/desktop/
2) Atom Editor https://atom.io/
Where to find the exercise filesPreview
|Section 2: Setting up your project & structuring your HTML|
HTML tags explained
Setting up your HTML with a doctype
In this lecture you'll learn about the <html> element and see how to write opening and closing tags.
Syntax highlighting in Atom
Structuring your HTML
HTML title tag
Adding comments to your code
Meta tags: Adding a site description
Meta tags: Setting up for responsive design
|Section 3: Adding content with HTML (Part 1)|
Adding content to the body with the header tag
Adding an h1
Adding a logo with the image tag
Creating your site navigation
Adding new content using the section tag
Wrapping content with the div tag
|Section 4: Adding content with HTML (Part 2)|
Dividing up your content
This braised pork with thickened soy gravy and pak choi is the perfect fit if you are craving comfort food. For this recipe I used flat noodles, perfect for soaking up all that delicious gravy, but if they’re not your bag then you can easily substitute in something else. This dish is rich and warming whilst remaining fresh tasting, thanks to the pak [...]
Adding content for the second post
Dividing up content for the second post
HTML iframe attributes
This warm pan fried rainbow trout & fennel pasta salad has the benefit of looking
luxurious and tasting amazing whilst being quick and easy to make. In this specific
instance, I used Mafaldine pasta which looks beautiful on a plate but it tastes just as
good with other pasta shapes. This is a great one, ideal for a midweek pick-me-up or
|Section 5: Styling your content with CSS (Part 1)|
Setting up your CSS
Linking your CSS files to your HTML
CSS syntax: Testing your links
Using Google fonts
Applying CSS rules to the body
Defining general font rules for your site
Constraining content on your page
Centering content on your page
The Box model
Setting the text and background colour
|Section 6: Styling your content with CSS (Part 2)|
Styling the header
Styling the h1
Styling the navigation
Creating hover effects
Styling the post section
CSS classes: Creating a "post-content" class
Creating and styling a "post-details" class
Styling the footer
|Section 7: Responsive design|
Introducing responsive design
Creating a fluid width
Creating fluid images
Resizing the iframePreview
Reducing padding and margin for mobile screens
Display properties: Making your navigation stack
|Section 8: Creating a second page & adding a form|
Creating a contact page
Recap : Boilerplate HTML
Creating the header for the contact page
Embedding a map from Google
Creating content for the contact page
Introducing forms: Creating a name input field
Adding an email input field
Adding a drop-down select box
Adding a multi-line text field
Adding a submit button
Adding a footer to the contact page
|Section 9: Styling up your form|
CSS styles for the contact page - styling the form
Styling the form input fields
Styling the textarea
Styling the submit button
In this lecture we take a look back on what you've learnt and suggest the following sites to help you progress further:
Congratulations on completing the course! Don't forget to add a rating :)
Steer is a code school based in London. Over the past 3 years, we've taught over 1000 people to code on practical courses. Amongst our students, we’ve seen many designers, entrepreneurs, and people from great companies like Apple, IDEO and Samsung.
Whoever you are, wherever you’re from, diving into a new skill can be tricky. Our courses focus on a hands-on approach to learning, so that you’re putting things into context from the word go.
Now, we’re bringing our classroom online. We’re combining the same teaching ethos that has helped thousands of people take their first step with code, with the flexibility of learning when you want, where you want.
Whether you’re looking to become a web developer, have an idea for a great new website, or simply want to learn a new skill, our courses can help you get to where you want to be.