I Learned HTML and CSS, Now What?

in Front-end

So you’ve played through our newest course, Front-end Foundations (and if you haven’t, well, get started!). You’ve begun your training and can find your way around HTML and CSS, but where do you go from here? Surely there’s more to modern web pages than just some basic HTML and CSS, right? Well, if Front-end Foundations is like dipping your toes in the water, then mastering front-end development is like conquering the breaststroke. But fear not — we can help you learn the tools you need to get there.

You can start by learning to apply your knowledge from Front-end Foundations with our new Soup to Bits screencast. Here you’ll gain more practical knowledge for building a web page from our course instructors. They’ll walk you through planning, coding, and uploading a simple portfolio page with HTML and CSS, while putting the skills you learned to work.

HTML5 & CSS3

From there, you should head over to our second course in the series, Front-end Formations, and get up to speed with HTML5 and CSS3 development. HTML5 isn’t a brand new version of HTML, just a way to categorize the updates to it. You’ll still have div tags, as learned in the first course, but you’ll also have specific versions like a header, section, and footer. You’ll also still have form text and checkbox inputs, but you’ll additionally learn about input sliders, date pickers, and smooth file uploads. In Front-end Formations, you’ll take the HTML you learned and add in some of these great new features to take your skills a step further.

Front-end Formations sample site

Now you’re ready to decide what you’re most interested in. Do you like writing code to build and lay out web pages? What about writing code that manages user interaction on a site? Or maybe you want to focus on designing beautiful websites? There’s no wrong answer, it’s just a matter of choosing the avenue that most appeals to you.

Design

In Front-end Foundations, we displayed all of the content for Recipe World and Open Source Records in a certain way, but why did we pick that layout? If finding the answer to that excites you, then design might be the right fit for you. Play through our Fundamentals of Design course and learn things like selecting the right font, arranging a web page on a grid, and choosing colors that work well together.

Fundamentals of Design, example of color challenge.

More CSS

Is creating complex, multi-column layouts and concentrating on a responsive, mobile-first approach more your style? Then you should check out our CSS Cross-Country course, where you’ll learn more advanced CSS topics like dealing with floats and efficiently managing images with sprites. Move on to our Journey Into Mobile course from there, which covers designing for mobile, creating adaptive web design concepts, and best practices.

Journey Into Mobile, responsive site demo.

Interaction

If you’re more interested in producing interactive content that responds to different user actions and behaviors, you should jump right into our Try jQuery course. In this entry-level course, you’ll learn the basic building blocks of jQuery 2.0 using video tutorials and programming challenges. After that, try the sequel, jQuery: The Return Flight, where we teach you how to use Ajax to add more interactivity to your projects and how to organize your code with plugins and Promises.

Try jQuery sliding photos demo.

Pre-processing

Anyone who works on modern websites should be able to write CSS with a preprocessor. At Code School, we teach Sass, one of the most stable and professional-grade extensions in the world. It’s a great way to organize and write reusable CSS, so take our Assembling Sass course to learn the basics. Then, play our Assembling Sass Part 2 course to dive into more advanced techniques.

Remember, you don’t have to stick to just one focus — try design, and then move onto mobile. The best way to find your favorite focus is by simply diving in and experimenting. Many front-end developers become proficient in all four of these areas, but the most important part is that you get started and find your best fit. If you’ve mastered HTML and CSS, let us know how you got there in the comments below!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Jon Friskics

Content Producer and Developer at Code School. Enjoys building iOS and web apps, and then figuring out the best way to teach people how to build their own.

Might We Suggest