If before this tutorial you've only tried creating layouts using online services, it's time to install a code editor that allows you to save the results of your work on your computer or server.
In fact, unlike many programming languages, it's possible to use only Notepad or another standard text editor on your system for doing markup. That's how the websites were designed in the '90s and early 2000s. After all, HTML and CSS work in the browser, which means that our task is to provide it with the right data.
And now you can do just that, but the development of editors has brought many useful features that are not available in standard text editors:
Nowadays, there are many different editors. In this lesson, we'll focus on one of the most popular solutions from Microsoft - Visual Studio Code. This is a powerful tool that can be used not only for layout but also for programming in any language. After setting it up, you'll have a tool with which you can both design layouts and write programs.
You can download the editor from the official website. It's perfectly well set up to work with HTML and CSS straight away, so you can start experimenting now.
Simply create a new file with Ctrl + N and save it with a
.html extension. For example,
index.html. Copy the following HTML code and watch the editor highlight all HTML tags
<section> <h1>Layout Fundamentals at Hexlet</h1> <p>At our "HTML\CSS Developer" profession you'll learn many popular techniques that are used in layout creation.</p> <p>You'll learn about CSS, preprocessors, and a little bit of programming. Study Bootstrap and learn how to test your code using special utilities.</p> </section>
Try adding any HTML element to this markup, and you'll see that the editor will start offering you different options for tags that fit the combination of characters you have already entered.
Note also that the closing section tag has turned red. This is how the editor tells us that there is an error in the markup. It has to do with the fact that we haven't yet finished the tag and closed it.
As an interesting example, try entering the ! symbol in a blank HTML file and pressing Enter. You'll get a basic layout of an HTML document with all the basic tags and meta tags that are used in real projects.
This is possible thanks to the Emmet plugin built into Visual Studio Code. We'll get acquainted with how this plugin works in a future lesson.
Now, create any file with a
.css extension. For example,
style.css. The code editor will detect that this file uses CSS and add a special highlight for this language.
You can see that the selector, the name of the property, and its value are highlighted in three different colors. It's a great way to navigate through large CSS files.
These are the basics of working with HTML and CSS in the Visual Studio Code editor that'll be of use as you begin. As you work with this editor, you'll also get to grips with the excellent plugin installation system. So you can customize the editor to suit your needs and tasks.
Of course, the choice of editor to work with is not limited to one solution. There are now quite a few different code editors on the market that you can use. Among them, there are both paid and free. Great free solutions also include:
You can try different editors and stay with the one you like best. Remember that an editor is nothing more than a tool. It won't do all the work for you, so you only need to get used to an editor once, there's no point in changing it.
The Hexlet support team or other students will answer you.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.