BEGINNERCOURSE
Foundation HTML, CSS + Javascript
Want to learn how to code? This is the perfect place to learn how to confidently make your own websites from scratch.
Taught by
Lawrence Gosset and Rik Lomas
Taught by
Lawrence Gosset and Rik Lomas
Our course offers digital materials, support from expert instructors and the technical tools you need all in one place.
It's designed for absolute beginners and those who know some code but want to develop confidence and understanding by building real sites.
Go at your own pace and by the end, you'll be comfortable in making your own websites without assistance. Pretty cool!
A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s it!
Anyone who is looking to create websites from scratch and to work with other coders. We’re not trying to turn you into a professional web developer, but this could be the first step.
This course is a great next step for students that have taken our Plan, Design + Code Your First Website course.
Most of our students work in the creative industries – designers, strategists and copywriters are the most common jobs – but you can work in any sector to join the course.
This course is a great foundation for the skills you'll need to become a front end developer. Continuous learning is a must in this career, and that's why we've created courses such as Javascript for Designers and Advanced CSS + Javascript to cover more advanced topics. We always encourage students looking to change careers to practice lots and never stop learning, regardless of where and how they do it. That said, many of our students have gone on to become front end developers and we have many success stories to prove it!
That depends. We usually recommend it to get up-to-date with modern HTML and CSS, and best practices for code today. But you may also want to take a look at our Javascript for Designers course as an introduction to JavaScript, if you're feeling pretty confident in your HTML and CSS skills. If you decide to refresh your HTML and CSS skills with this course, by the end of it, you'll have a well-rounded "foundation" that can build into any of our more advanced JavaScript courses.
This course is quite different from a code bootcamp, but in a good way! We're self-paced, with lifetime access to the course and ongoing support. We're online-only with a community of SuperHi students and alumni from all over the world, that you'll join as soon as you're registered. And while we can't promise you a job, we have a lot of help and support around things like your résumé, portfolio and cover letter, including a Slack community where job opportunities are shared regularly. All of this has helped many of our students change careers and get jobs after completing courses with us, at a fraction of the price and time commitment as a bootcamp (there's no need to quit your job to learn!).
Nope! Our Foundation course is designed for beginners who are brand new to code.
By the end of Foundation you'll be able to make websites completely from scratch that look and feel however you want, with interactive components, take a look at our Hall of Fame to see some of the sites our students have built, many of which had only taken Foundation. This course will teach you the core languages that power the internet. Our courses (and the web!) open up from there.
All our course videos are taught using the SuperHi Editor, but you'll be able to apply everything you'll learn to a code editor of your choice. Many students go on to use other code editors, for example, if their workplace has an existing standard. Our Editor is designed with many smart features to help avoid wasted time looking for things like a typo or missing bracket (which is why we made it!), but the same code concepts apply to any editor.
We don't have any sample videos from the actual course, but take a look at our tutorials for a feel of our teaching style. Expect something like that, but much more in-depth.
Yes! This course covers responsive design.
In this first chapter, we learn the basics of writing HTML and CSS by creating a photography portfolio website with a parallax scroll effect.
Diving deeper into learning about HTML and CSS, we build a single-column website and make its layout responsive by adding media queries. We also learn about more HTML elements and the CSS box model.
We learn how to add more complexity and flexibility to our responsive website layouts by creating a multi-column site for a flower shop called Furneax's.
We talk about new layout styling techniques such as flexbox positioning, which is a powerful tool for controlling the flow of content with minimal code.
We learn the basics of Javascript, which allows us to turn static websites into something dynamic and interactive. We use a Javascript library called jQuery to create a shop website that has a filtering menu and a toggling feature on mobile devices.
We add interactive flair to our websites with hover transitions, transformations, and a menu that toggles open and closed with jQuery. We also add to our toolkit of layout techniques by learning about absolute and relative positioning.
We remix our Sally Hart portfolio site from Chapter 1 by creating a lightbox modal effect with Javascript and jQuery.
In this chapter, we use Javascript to create interactive effects based on how far the user has scrolled. We also define conditional logic using if/else statements and math.
In this final chapter, we create a full-page slideshow that can change slides automatically without user input.
Lawrence is a full-stack web developer and teacher who has also taught over a thousand people how to code. He was previously an instructor at London code school Steer.
Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.
Lesson 01
What is the World Wide Web?
Lesson 02
What is SuperHi?
Lesson 03
Writing our first HTML
Lesson 04
Writing our first CSS
Lesson 05
Sally Hart Photography Part 1
Lesson 06
Sally Hart Photography Part 2
Lesson 07
Sally Hart Photography Part 3
Lesson 08
Sally Hart Photography Part 4
Homework 01
The Pen Is Mightier Than The Sword
Lesson 01
Project overview and initial HTML
Lesson 02
Header and hero section HTML
Lesson 03
Getting content into columns using CSS floats
Lesson 04
Using background-position and vertically centering text
Lesson 05
Multiple columns using fluid percentage widths
Lesson 06
Remaining HTML and a quick look at symbols
Lesson 07
Styling up quotes sections
Lesson 08
Rounding corners using border-radius
Lesson 09
Sharing CSS classes between elements
Lesson 10
Figuring out responsive breakpoints
Lesson 11
Removing floats and responsive styles
Lesson 12
Responsive styles and hiding elements
Lesson 13
Adding multiple media queries and fine tuning
Lesson 14
Styling specific elements using nth-child
Lesson 15
Fixing the header and using drop shadows
Lesson 16
Using the Chrome developer tools to inspect websites
Homework 01
Lola’s Cookery School
Lesson 01
Project overview
Lesson 02
Initial HTML
Lesson 03
HTML continued and initial CSS
Lesson 04
Header position and active link style
Lesson 05
Introducing inline-block elements
Lesson 06
Varied element widths using classes
Lesson 07
Footer styles
Lesson 08
Header styles using flexbox
Lesson 09
Photo grid styles using flexbox
Lesson 10
Positioning elements using absolute position
Lesson 11
Changing element and color opacity
Lesson 12
Offset absolute position using negative values
Lesson 13
Smoothly transitioning CSS properties
Lesson 14
Changing element layer order using z-index
Lesson 15
Responsive tweaks using flexbox
Lesson 16
Hover transitions for navigation links
Lesson 17
Adding character to transitions using timings
Lesson 18
Grayscale image transitions using CSS filters
Lesson 19
Adding the list view page and initial HTML
Lesson 20
List view hover effect image styles
Lesson 21
Adding list separators using CSS content
Lesson 22
List image hover effect using transitions
Homework 01
NASA
Lesson 01
Project overview
Lesson 02
HTML structure using outer and inner containers
Lesson 03
Initial CSS and using 2x assets
Lesson 04
Hero background positioning and copy column
Lesson 05
Final navigation and products HTML
Lesson 06
Navigation and products style using flexbox
Lesson 07
Adding product overlay initial HTML and CSS
Lesson 08
Positioning the overlay using absolutes and rgba
Lesson 09
More playful hover effects using transition timings
Lesson 10
Initial breakpoint for tablet layout
Lesson 11
Responsive styles for tablet to mobile
Lesson 12
Mobile responsive styles
Lesson 13
Adding show filters link
Lesson 14
Using unordered list elements to style up the filters
Lesson 15
Final filter list style tweaks
Lesson 16
What is Javascript and jQuery?
Lesson 17
What types of data do we have in Javascript?
Lesson 18
Using the Chrome Javascript console
Lesson 19
Attaching our Javascript files to the page
Lesson 20
Showing and hiding content on the click event
Lesson 21
Building a navigation toggle using jQuery
Lesson 22
Getting attributes and using variables
Lesson 23
Using the this keyword in Javascript
Lesson 24
Filtering the products selection using jQuery
Lesson 25
Adding and removing the active link style
Lesson 26
Overriding CSS styles using !important
Homework 01
The Hexagons
Lesson 01
Project overview
Lesson 02
A quick look at the head and body tags
Lesson 03
Initial HTML
Lesson 04
Header and navigation slideout styles
Lesson 05
Vertically aligning navigation using transforms
Lesson 06
Overlaid offset text effect using absolutes
Lesson 07
HTML finishing touches
Lesson 08
Offset text overlay continued
Lesson 09
Final lookbook section CSS
Lesson 10
Silky smooth rotate and scale transforms
Lesson 11
Using translate, scale and multiple transitions on an element
Lesson 12
Hamburger icon positioning and z-index
Lesson 13
Toggling CSS classes and states using jQuery
Homework 01
Valencia
Lesson 01
Project overview
Lesson 02
Project setup
Lesson 03
Modal overlay CSS
Lesson 04
Increasing clickable area and changing cursors
Lesson 05
Positioning modal content in the center
Lesson 06
Hiding the modal and adding script tags
Lesson 07
Showing our modal on click and blocking default link action
Lesson 08
Closing our modal using a separate function
Lesson 09
Getting and setting HTML and using the this keyword
Lesson 10
Using variables for setting the HTML
Lesson 11
Making the design responsive
Lesson 01
Project overview
Lesson 02
Project setup
Lesson 03
Building a scroll function that counts the pixels to top
Lesson 04
Hiding and showing the header on scroll
Lesson 05
Setting the background color on scroll using extended if/else statements
Lesson 06
Progress bar HTML and CSS
Lesson 07
Setting the bar CSS using jQuery
Lesson 08
Figuring out how far down the page we have scrolled
Lesson 09
Setting the bar width dynamically
Lesson 01
Project overview
Lesson 02
HTML structure
Lesson 03
A look at the CSS
Lesson 04
What does overflow do?
Lesson 05
Initial transition using interval functions
Lesson 06
A little bit about arrays in Javascript
Lesson 07
Moving to the next slide dynamically
Lesson 08
Putting the slide functionality into separate functions
Lesson 09
Finding how many slides we have using .length
Lesson 10
Wiring up the prev/next buttons and cancelling intervals
Lesson 11
Setting the text for our current slide
Lesson 12
Making the slideshow loop through
Lesson 13
Passing data to functions using arguments
Lesson 14
Creating a function for moving the slide
Lesson 15
Making the arrow keys work for navigation
Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?
View student workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
