One place for hosting & domains

      Editor

      How To Set Up Your CSS and HTML Practice Project With a Code Editor



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will set up the folders and files necessary for exploring CSS and building a website. Using a code editor, you will create a project directory for our website, a folder and file for our CSS code, a file for our HTML code, and a folder for images. This tutorial series uses Visual Studio Code, a code editor freely-available for Mac, Windows, or Linux, but you may use whichever code editor you prefer. Note that certain instructions may need to be slightly modified if you use a different editor.

      How To Create HTML and CSS Files and Folders

      After opening your preferred text editor, open up a new project folder and name it css-practice. You’ll use this folder to store all of the files and folders you create in the course of this tutorial series.

      To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called css-practice:

      Gif of process of adding a project folder in Visual Studio Code

      Next, create a new folder inside css-practice and name it css. Inside this folder, open up a new file in your project directory and save it as styles.css—this is the file you’ll use to store our CSS style rules. If you are using Visual Studio Code, you can create a new folder by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the css-practice folder, selecting “New Folder” and creating the css folder. Then, click Right Click(on Windows) or CTRL + Left Click (on Mac) on the new css folder, select “New File”, and create the file styles.css as illustrated in the gif below:

      Gif of how to add CSS folder and file

      Save the file and leave it open.

      You also need to create a file to add our HTML content—the text, images, and HTML elements that will be rendered in the browser. In the project directory css-practice, open an additional new file and save it as index.html in the same way you created the styles.css file above. Make sure to save this index.html file in the css-practice folder and not in the css folder.

      Next, you need to add a line of code in the index.html document that instructs the browser to use the styles.css file as our style sheet. To do this, you’ll use the HTML <link> tag and link to the styles.css file. Add the following code snippet to your HTML document:

      index.html

      <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">
      

      This code snippet tells the browser to interpret the HTML code according to the stylesheet located at css/styles.css. Make sure you don’t erase this line while adding or deleting content to your index.html file throughout this tutorial series. Save your index.html file and keep it open.

      Finally, create an additional folder inside css-practice and name it images in the same way that you created the css folder above. This folder will be where you save any images you use in this tutorial series.

      You should now have a project folder named css-practice that contains the folders and files necessary for exploring CSS in this tutorial series:

      • A folder named css that contains the file styles.css
      • An empty folder named images
      • A file named index.html

      If you are using Visual Studio Code, your editor should now display the following file tree and the open files:

      Visual Studio Code Editor with file tree displayed

      Notice that the file names include extensions (.html and .css) that refer to the type of content they contain. You will add content to these files in our hands-on exercises in the tutorials that follow.

      Debugging and Troubleshooting CSS and HTML

      Precision is important when working with HTML and CSS. Even an extra space or mistyped character can keep your code from working as expected.

      If your HTML or CSS code is not rendering in the browser as intended, make sure you have written the code exactly as written in the tutorial. Though we encourage you to manually write out the code for the purpose of learning, copy and pasting can be helpful at times to ensure that your code matches the examples.

      HTML and CSS errors can be caused by a number of things. Check your markup and CSS rules for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. You should also make sure that you don’t accidentally use “curly” or “smart” quotation marks like and " that are often used by word processors. Curly quotes are designed for human-readable text and will cause an error in your code as they are not recognized as quotation marks by browsers. By typing quotation marks directly into your code editor, you can make sure you are using the right kind.

      Also, each time you change your code, make sure to save your file before reloading it in the browser to check your results.

      A Quick Note on Automatic HTML Support Features

      Some code editors—such as the Visual Studio Code editor we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.

      Conclusion

      You are now ready to proceed with the tutorial series. In the next tutorial, you’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.



      Source link

      How to Update Your Old WordPress Posts With the Block Editor


      Since the Block Editor is now the default tool for creating new WordPress content, site owners are having to address the question of what will happen to their older posts and pages. This content will inevitably need updating since the Classic Editor plugin won’t be around forever.

      Fortunately, there are methods in place for handling this exact situation. If you need to make changes to an old post, you can easily do so without any help from the Classic Editor. This makes it much easier to bring your old and new content into alignment.

      In this post, we’ll discuss the Block Editor (you might know it by its nickname: Gutenberg) and then we’ll show you two methods for updating your old posts using this new tool. Let’s get started!

      Understanding the Differences Between the Classic and Block Editors

      For many years, WordPress users created new content for their websites in a visual editor, now known as the Classic Editor. It consisted primarily of one large field where you could add text, images, and other media.

      The WordPress Classic Editor.

      The main downside to the Classic Editor was that some elements — such as tables and content columns — required coding or extra plugins to implement. This arguably made the publishing process more complicated and time-consuming than it needed to be.

      To address that issue, the Block Editor was created. It enables you to use a system of ‘blocks’ to create content in WordPress. Each block holds a specific type of content, such as a paragraph, an image, a table, a list, or just about any other element you might want to add to a post or page.

      The WordPress Block Editor.

      With blocks, WordPress users can create more complex content without the need for coding. Each block has individual settings so you can customize specific elements. Additionally, you can more easily move content around the page to create columns or other unique layouts.

      Generally speaking, the Classic Editor is considered the ‘simpler’ of the two options because of its interface. There’s just one field where all of your content goes, as opposed to many separate blocks. However, the Block Editor is built for ease-of-use and can be more user-friendly — especially for those new to WordPress.

      Get More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Switching Over from the Classic Editor to the Block Editor

      The Block Editor has been ‘live’ since December 2018 and now serves as the default editor for anyone running WordPress 5.0 or later. However, some users have chosen to disable it in order to continue using the old – or Classic – editor.

      If you’ve been using WordPress for some time and are familiar with the Classic Editor, using the Block Editor may not seem very appealing. After all, it still has compatibility issues with some plugins and themes, and learning a new interface isn’t the most fun way to use your time.

      However, there are a few reasons to embrace the change. To start with, the Block Editor should streamline your content creation. Once you get past the learning curve, adding blocks can be much faster than stopping to code a table or columns by hand. More importantly, you may want to make this transition for the sake of your site in the long term. While right now you can keep the Classic Editor in place using a plugin, WordPress plans to stop support for that system eventually.

      For now, support is promised until 2022. However, once updates are no longer being released, having this plugin installed on your site could pose a security risk. At a certain point, moving over to the Block Editor will be in the best interests of your website.

      What the Block Editor Means for Your Existing Content

      Fortunately, old posts and pages created in the Classic Editor are preserved in their current format with the Block Editor. Each one features a single, large block called a Classic block. All of your text, images, and other content will be found inside this block, unchanged.

      A Classic block in the WordPress Block Editor.

      The Block Editor’s effect on your theme and plugins is a little more complicated. There have been compatibility issues between the new editor and some themes and plugins, so it’s possible that enabling it will cause problems on your site.

      In particular, page builders and other plugins that affect the way the WordPress editor looks and functions tend to have trouble with the Block Editor. However, updates have been released for many of these plugins to fix these issues. It’s a good idea to check each of your major plugins (especially any that affect the editor) to see if they are compatible.

      The Block Editor should be useable with just about any theme. That said, it works better with some than with others. Ideally, you’ll want to use a theme that has been updated for use with the Block Editor or a theme that was created after the new editor’s release and built with compatibility in mind.

      The best way to avoid any potential issues is to create a staging version of your site. Then you can thoroughly test for any problems before updating your live site.

      How to Update Your Old WordPress Posts With the Block Editor (2 Methods)

      Of course, you may not want to leave your old WordPress content as-is. Fortunately, you can update your old posts, pages, and other content types in the Block Editor. There are two primary methods you can use, and each has its pros and cons.

      Before you can use either of them, you’ll need to make sure you have the Block Editor enabled. For most sites, this is already the case.  In other words, if your site is up-to-date and you haven’t done anything to disable the Block Editor, it should be currently active. Therefore, you won’t need to do anything.

      Otherwise, either deactivate the Classic Editor plugin or upgrade to WordPress 5.0 or above to automatically switch your site over to the new editor. Then, you can use one of the following two techniques to work on your existing content.

      Method 1: Continue Editing Your Posts in a Classic Block

      As we described earlier, existing posts and pages will be converted into Classic blocks. If you want, you can edit your content inside these blocks, just as you would in the Classic Editor.

      All you have to do is open the post you wish to update, and click on the Classic block. When you do, you’ll see the TinyMCE toolbar appear at the top of the block. It should look very familiar.

      A Classic block in the Block Editor with the TinyMCE toolbar.

      You can edit within this block exactly as you would in the Classic Editor. If you need to access the Text Editor, you can do so by clicking on the three-dot icon to the right of the toolbar, and selecting Edit as HTML.

      The Edit as HTML option in the Classic block.

      When you select this option, the block’s content will be shown as code, and you can edit it as needed.

      Editing a Classic block in HTML.

      To return to the Visual Editor, simply click on the three-dot icon again and select Edit Visually. That should be all you need to update your old posts using the Classic block.

      Method 2: Convert Your Old Content into Blocks

      The other option you have available is to convert a post or page’s Classic block into new blocks. This will divide up your content up into individual elements, just as if you had created it using the Block Editor.

      To do this, click on the three-dot icon and select Convert to Blocks.

      Selecting the Convert to Blocks option in a Classic block.

      Your post should then split up into separate pieces. Each paragraph will become its own block, as will every heading, image, list, video, button, and element.

      An old Classic Editor post converted into new blocks.

      You can click on an individual block to edit the content within it. While this process usually goes off without a hitch, you’ll want to make sure that each element of your post has converted to the correct type of block.

      For example, if a pull quote from your old post has converted into a regular paragraph block, you can change it by clicking on the leftmost icon in the block toolbar.

      The Change Block Type option in a block.

      You can then select the correct block type from the options listed. Once all of your blocks are set to the correct types, you can use the toolbar at the top of each to make any specific changes related to alignment and placement within the post. You can also make edits related to each block’s type, such as by altering text styling or image size. In other words, you can now use the Block Editor’s full range of capabilities to work on your content.

      New Kid on the Block (Editor)

      Updating old posts is a smart way to freshen up your content and give your site a facelift. If you’re worried about how your old posts will fare in the age of the Block Editor, however, never fear. You can easily make changes to your old posts and pages.

      While you’re updating your WordPress site, why not upgrade your hosting service too? Our DreamPress plans include 24/7 WordPress support to help with all your Block Editor questions.



      Source link