Explore Free CSS Tutorials – GameDev Academy

How to use Inline CSS: Beginner’s Web Development Tutorial

Cogentx — Fri, 03 Jun 2022 19:37:07 +0000

When it comes to changing how your website looks, inline CSS can be a real lifesaver when used properly.

In this tutorial, we’re going to quickly show you how you can use inline CSS to quickly apply your styles from your main webpage. We’ll also help you understand when to use inline CSS – since it isn’t the best choice in many situations.

If you’re ready to add a new tool to your web development kit, let’s jump in!

A Quick Overview of HTML & CSS

While HTML provides the essential structure and content of your website, CSS (Cascading Style Sheets) provides the look and feel. Without CSS, modern websites would not function as they do. When developing a website, there are three ways to apply CSS styling: inline, internal, and external. The focus of this tutorial is to show you, by example, how to apply Inline CSS directly to individual HTML elements. Not only that, but we’ll help you understand appropriate use cases between the three – so you can use inline CSS with newfound confidence, skills, and in ways that work for your personal responsive website!

Applying CSS Styles: An Overview

Inline CSS styles are applied by assigning a string directly to an HTML element’s style attribute. It allows you to style an individual HTML element directly within your HTML document without any impact to other elements on your web page.

Since Inline CSS is applied directly to an HTML element, there is no requirement to first define CSS selectors like Internal and External style sheets (by which we mean there’s no separate CSS file).

Let’s illustrate the differences by applying a single style to a header

HTML tag on a super simple website. Here is our website with no CSS.



   
  
    My Super Simple Website

Inline CSS: HTML Style Attribute

Notice the style attribute on the

header element. We define the style by assigning the attribute a string containing normal CSS properties. Multiple CSS rules can be applied but it’s important that each rule end with a semi-colon.




  My Super Simple Website

Our header is now centered on the page.

Internal CSS: HTML

My Super Simple Website

Notice that our web page looks the same. The key difference, other than the

My Super Simple Website

Notice that with the inclusion of our Internal Stylesheet after the reference to the External Stylesheet has altered our design completely but still does not resemble the style we want.

Keeping both the Internal and External Stylesheets as is, let’s now add Inline CSS to the

header tag providing the exact design styles we want to this HTML element. Again, those styles are: font-style of italic, a color of blue and text aligned to the center on the page.

h1 {
  font-style: none;
  color: red;
  text-align: left;
}



  
    
    
  
  
    
	My Super Simple Website

Notice that we have applied our Inline CSS to the

header by setting its style attribute to a string containing three CSS rules separated by semi-colons.

Learning Resources

Learn more about including CSS in a web page (Inline, Internal and External) from CSS expert Kevin Powell in these two video lessons Introduction to CSS and External CSS.

Continue your CSS learning with this free HTML & CSS 101 – Web Development Fundamentals course or take your skills to the next level in just over an hour with this free COMPLETE COURSE – Learn HTML and CSS in 80 MINUTES. You might also consider trying this HTML Tutorial for Beginners from Programming with Mosh or decide to master the foundations of all web development with this premium Full-Stack Web Development Mini-Degree.

Conclusion

By applying proper syntax for Inline CSS to our website’s

header HTML tag (including applying multiple styles), we were able to test a new design for our website’s
header tag. We also considered the proper use of Inline CSS and the Order of Precedence in relation to Internal and External CSS Stylesheets, so we were able to target a single HTML element without impacting the CSS styling of any other HTML elements on our website.

While there are plenty of cases to not use Inline CSS, it is still a useful tool that can help you out of tough situations as you build your websites. Nevertheless, we do encourage you to learn other CSS skills including how to make an external CSS file, what each CSS property does, how to create a unique style, and so forth. After all, it’s better to use a separate CSS file if the alternative is a messy block of code.

We hope you take these newfound skills to the next level, and master the art of CSS so you can get your sites to look exactly how you’d like them too!

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

How to Add Google Fonts to Your Websites and Webapps

Lindsay Schardon — Sat, 12 Mar 2022 01:00:39 +0000

You can access the full course here: Intro to Web Development with HTML and CSS

Tutorial

In this lesson, we look at a great resource for adding different fonts to your website.

Google Fonts

To use different style fonts on your website, Google Fonts ( https://fonts.google.com/ ) is a great resource. This site offers a wide variety fonts beyond those installed by default in your browser or operating system. You can scroll through many different examples or even type something in the text box provided to see how your specific text would look with various font styles.

Selecting Google Font

For an example, scroll down and select Goldman.

This takes you to a detail page for this font where you can make selections on exactly what style of this font you want. For this example, select the Regular 400.

Linking to Google Font

Next, click the button in the top right corner of the Google Fonts website that allows you to view your selected font families.

This opens a side panel where you can select how you want to access your selected font. From this panel copy the link tag information, then go back to index.html and paste the links in the Head () section of our web page.

Learn web development on ZENVA.com

This paragraph contains everything you've always wanted to know!

Using Google Font

Back in the Google Font side panel below where we just copied the link information is instructions on how to include the font in your CSS Stylesheet. Copy this information and paste it into style.css in place of the font-family we setup in the last lesson.

body {
    font-size:20px
}

p {
    font-size:2rem;
    /* new Google Font */
    font-family: 'Goldman', cursive;
}

.keypoint {
    font-style:italic;
    font-weight:bold;
    text-decoration:underline;
}

Our Paragraph text now appears with our newly included Google Font. Notice that the everything styling still applies.

Transcript

Hey everyone, and welcome back.

Google Fonts is a great resource if you want to use a large number of different fonts inside of your webpage. Because computers do have quite a large library of fonts pre-installed. But there is still a number of different fonts that are more specific to different styles, to handwritten styles that you might want to include on your website. And in that case, you can visit fonts.google.com, and this is a website where you can get a large number of different fonts, okay.

As you see, you can scroll down, see a preview of what they look like. You can even type something up here and it can basically preview what that text looks like. Okay, so let’s just say we wanna pick a text right here. Let’s just say we want this text right here, Goldman. We can select that, and it’ll bring us to this page here, okay. We want to go get the regular. So we’ll click Select this style right here.

This is then going to allow us to click on this button up here, at the top right, View your selected families. We’ll click on that. It’ll open up this side screen right here. And as you can see, we have this code right here, or this tag, this link tag that we can actually select. We can copy that with Control + C or Control + V.

We can go over to our HTML document, and add this just under where we specify the style sheet, okay. Paste that in with Control + V or Command + V. And there we go. So we are now able to use this Google font now that we have actually applied it to our webpage or to our HTML document, okay.

So how do we actually use it? Well, if we return to the Google Fonts site, you’ll see down here that it says CSS rules to specify families. And what we can do is copy that font-family CSS rule right there, go back to our CSS document. And I’m gonna replace this in the paragraph right here with that new one. So I’m gonna paste that in like so, click Run.

And there we go. We’ve got the new font, now applied to our text right here. And of course you can go through Google Fonts, choose all different ones. You can mix and match them with different spans, with different containers. Google Fonts is a great resource if you’re looking for a specific font, a specific style for your website. Thank you for watching.

Interested in continuing? Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!

Free Course – Learn PureCSS for Responsive Websites

Lindsay Schardon — Wed, 31 Mar 2021 01:00:14 +0000

Create responsive websites with ease by learning PureCSS – a lightweight set of CSS modules with many adjustable features! You can also learn more about all PureCSS has to offer by exploring the full course below!

PureCSS for Beginners

About

With instructions from developer Nimish Narang, this PureCSS tutorial will help you get started with using PureCSS for your web projects. You’ll not only learn how to install PureCSS to your projects with a few simple lines code, but also explore grid layouts and how PureCSS makes them both easy to implement and responsive to any screen size. Regardless of the website you wish to build, these foundations will help you take the first steps into creating modern websites for our mobile-first world!

Free Course – Master HTML & CSS

Lindsay Schardon — Wed, 27 Jan 2021 01:00:07 +0000

Prepare to build websites and web apps from the ground up by exploring HTML and CSS – two of the core pillars of all web development! You can also download the project files used for the course below.

Download the project files

About

Following the teachings of Daniel Buckley, and with no prior experience required, you’ll explore the necessary fundamentals needed to pursue web development. You’ll first discover HTML, or HyperText Markup Language, and the processes for laying out webpages via tags for text, images, forms, and more. After, you’ll dive into the world of CSS (Cascading Style Sheets) and master techniques for adding new aesthetics to your web projects.

By the end, you’ll have the in-demand foundations to start building your own web projects and be able to expand your knowledge into more advanced web development technologies.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Free eBook – A Guide to Development with the Web

Lindsay Schardon — Wed, 14 Oct 2020 09:51:02 +0000

Become a developer with in-demand skills by exploring our free ebook: A Guide to Development with the Web

Following the tutorials of Ashley Menhennett, you will take your first steps into becoming a developer by learning to code for websites – one of the most beginner-friendly fields to get started with in terms of development. You will cover the foundations of both HTML and CSS, two of the core pillars of web development, and learn how you can use them to both lay out your webpages, and style them in unique ways with simple attributes.

Whether you stick with web development or pursue another field of development altogether, this introductory look will help you develop the fundamentals before you expand your skills even further.

Download the eBook here

How to use Media Query Breakpoints

Lindsay Schardon — Fri, 24 Apr 2020 15:00:20 +0000

You can access the full course here: Bite-Sized Responsive Web Design

In this lesson, you will learn how to create media query breakpoints.

Creating Media Queries

For this exercise, you will be setting what are referred to as media query breakpoints. Typically for web design, you will want to set three different media queries. One for desktops, one for tablets, and one for smartphones. As discussed in the previous lesson, this will be done by specifying different screen widths in pixels for the appropriate CSS rules.

You will want to open up the media-queries.html file that is included in the Course Files, in the Project (Start) folder. You will also want to activate the Live Preview so that you can see what is happening as you add code to the file.

The first thing you will want to do is disable mobile browser scaling. As you are going to be doing this with the media queries yourself, you don’t need to have the browser doing it for you. You will be adding code in the block. See the code below:


  
  CSS Media Queries

To fully explain what this code does would take a long time and is outside of the scope of this course. The important thing is that this will turn off what is called browser zoom, or mobile browser scaling, which will ensure that the media queries function properly.

For this course, each of the different CSS topics will be done using internal style sheets. In actual practice, it is usually better to use an external style sheet, but for educational purposes, this will allow you to more easily refer to each topic individually.

The next step for creating the media query breakpoints is to add the

The first CSS rule has an asterisk (*) selector. This means that it will apply to every element. The margin property controls the margins of the page, and setting it to zero will ensure that the full page is used. The next rule is for controlling the body element. The background property is used to set the color of the background for anything in the body of the HTML page. You can use the rbga system to set the color, or any of the numerous other methods CSS provides for setting colors. The order of numbers for rbga is red, green, blue, alpha, with the rgb values from 0 to 255 and alpha from 0 to 1. If you are not familiar with this system, alpha is used to set the transparency of the color. Feel free to adjust the numbers to see the effect it has on the color of the background.

Now you can make your first media query. This will be done in the style block. See the code below:

This code will make it so that when the specified condition is met, meaning that the screen is above the minimum width of 768 pixels, the new body CSS rules will be applied.

The next step is to make a second media query. Copy and paste the first one, then change the value for the min-width and for the rgba of the background. See the code below:

Save the file, then go to your live preview. If you adjust the scale of the window, you should see the three different colors at the different size values you have specified. If the window is at or below 768 pixels, it will be red. If it is between 768 and 1200 pixels, it will be green. Above 1200 pixels, it will be blue.

This particular CSS rule set up is referred to as a mobile-first approach. This is because there are rules that are above the intentional media queries in the style block. These rules will be what is used for smartphones and will be the default unless they are overridden elsewhere.

Now that you have set up some basic media queries, feel free to adjust some of the values to get a better understanding of how the rules are applied. Make sure to save your file before moving on.

Transcript

What I’m gonna do here, this is inside the head area, is I’m gonna open angle bracket, meta, followed by a space and then name equals. And then in quotes, viewport. And then outside of the closing quote there, throw in a space. And I’m gonna go content equals, and then I’m gonna open up another pair of quotes. And then let’s go width=device-width followed by a comma and a space. And then initial-scale=1, just like that. And then close off your angle bracket. This is a self-closing tag here.

So again, you and I could get into a pretty lengthy and detailed conversation about what exactly is going on here but the most important thing here is essentially, what we’re doing is we’re turning off this thing called browser zoom or mobile browser scaling, ensuring that our media queries are going to work and function properly.

What’s the second step? Well, the second step is gonna be to establish our media query breakpoints. And what I’m gonna do here, and I should have mentioned this earlier is I’m gonna build everything here with you inside of an internal style sheet. The first thing that I’m gonna do here is I’m gonna blow out my default browser margins here, so I’m just gonna type in an asterisk here and then a pair of curly braces. And I’m gonna say margin: 0 followed by a semicolon. No big deal, this is something that I do all the time.

The next thing that I’m gonna do is I’m gonna go and set a body rule here. So body and then a pair of squiggly brackets. And I’m gonna say background. And I’m gonna use my RGBA color value. And here’s what I’m gonna specify. I’m gonna go 255,0,0,.25. Now, as soon as I save up my file, there’s Chrome previewing what I’ve done.

Now, what we’re gonna do next is we’re gonna go and establish our media query. So I’m gonna type in an at symbol, this is how we do it, and I’m gonna type in media followed by a space and then screen and, and then a pair of regular brackets. And here’s the first condition, min-width: and then I’m gonna say 768px. And then after the closing bracket there, throw in a pair of curly braces like this.

So as you can see here, all I did is I took body from above, outside of the media query, and pasted ’em into first media query that you and I have established. And all I’m gonna do is I’m gonna change this guy’s background color. What I’m gonna do next is I’m gonna grab the media query that we just inserted and the body rule, and I’m gonna copy that. And then what I’ll do is I’ll paste just below.

And what you and I are gonna do is go and set up a second intentional media query. But I’m gonna change this to 1,200 pixels, change his background color as well. Let’s save up our work. We see a change inside Chrome. As a matter of fact, if I scale my browser window wider, we get kind of this purplish color. If I scaled down, there’s green. If I continue scaling down, that’s what we get.

Interested in continuing? Check out the full Bite-Sized Responsive Web Design course, which is part of our Bite-Sized Coding Academy.

A Bite-Sized Guide to CSS

Zenva — Fri, 25 Oct 2019 15:00:07 +0000

You can access the full course here: Bite-Sized CSS

Part 1

Now that you have a basic foundation of HTML, it’s now time to move on to the next step. The next step is to now learn CSS.

HTML allows you to represent the content on your page, it allows you to tell the browser, give me a title, give me a paragraph, show a table here, show a form here, let’s add these fields to the form, let’s show a list. It basically allows you to create all the content. HTML doesn’t tell the browser how things should look. What sort of font should be used, the size of the font, the background color of the web page, how elements are positioned to each other, how much spacing to give elements, and how much border we assign to a certain container.

All these questions above can be answered by using CSS. CSS allows you to make your web pages aesthetically pleasing.

Working With CSS

When working with CSS it’s always a two step process. The first step is to select an element. Then once you select it you modify it. You apply the CSS rules to change the way it looks.

A good analogy would be this, CSS has a stage where you select an element, the element that you want to modify.

Stage two is that you modify the element, you change its color, you change its font, you change its dimensions. You use all sorts of magic CSS properties to make it look pretty.

Hello World CSS

Let’s now look at some code and do a hello world CSS.

We have a basic page, let’s change the title. There are all sorts of ways to add CSS to a page, but we will look at just one of them for this lesson.

Learn web development on ZENVA.com
Hello CSS

This is a complete page

HTML is easy!

Save this and refresh the page.

CSS is not used for content, it’s used to style content, to make content look pretty.

One way to include CSS on a page is by using style tag, which you need to open and close, and that needs to go above the HTML content.

Inside your style tag you can add CSS rules.

You always need to select an element and then you need to modify it, that is how CSS works.

Part 2

In this lesson you will learn to include your CSS code in a different file. This is so you will not have everything mixed up in one file.

CSS in External Files

The way to include CSS in external files is to create a new file called “CSS.”

So go to File>New File, save this file, and name it style.css.

Next, copy the CSS code we did earlier in he previous lesson, cut it and remove the style tags.

Then paste the code into the new CSS file we created.

h1 { color:red; background-color: blue; }

The last part is to include this file somehow.

In order to include the new file we will use this same link tag which is used to include external files, like CSS or the favicon, but the rel in this case is going to be stylesheet. This is what you type for the attribute. The href will indicate the location of the file. In this case the location of the file is in the same folder as the rest of the page. If it was located in a sub folder we would have to type the name of the sub folder and forward slash.

Learn web development on ZENVA.com
Hello CSS

This is a complete page

HTML is easy!

Save this and refresh the page.

You will see that the CSS is showing up because it was included as an external file.

Normally it is recommended to put CSS into an external file so that you can work separately in different files and the project will be made more manageable by doing this.

There is another way to include CSS, but this way isn’t recommended, but you do have to be aware it exists because you might see it around. It is done by including CSS as an attribute. So you can add a style attribute to the tag and then add CSS rules to it.

Learn web development on ZENVA.com
Hello CSS

This is a complete page

HTML is easy!

So doing it this way in the code above, we do not make a selection because we are already selecting by placing our style attribute.

Save this and refresh the page.

You can see how the text changed to green.

This way is not recommended because you do want to have separation between the content and the presentation of the content, and the best way to achieve this is by putting it an external file.

Summary

Separation of content and presentation is important.

Put all your CSS files in an external file.

Include the CSS file using the link tag.

Inside your CSS file you can then add any CSS code, and you don’t need to add any style tags.

Part 3

In this lesson we will talk about ID’s, and how we can use ID’s to select single elements in our HTML page.

For example if we selected this paragraph here:

Then, if I go and type in “p” that will select all the paragraphs in the page.

h1 { color:red; background-color: blue; } p { color:yellow; }

But, if you wanted to just select this one below:

There are multiple ways to do this in CSS, but you will be shown how to do it through the concept of ID for this particular example.

We can give this paragraph a unique ID. For that we need to add the attribute ID, equal sign, double quotes, and in here we enter the unique ID of that particular element. An ID is a unique identifier. It cannot contain spaces.

You can say something like mainPar, and if you are going to use upper case you need to be consistent with that in your CSS code.

Learn web development on ZENVA.com
Hello CSS

This is a complete page

HTML is easy!

So, the element now has an ID. So, instead of selecting all the paragraphs like this:

We can select them by ID instead, but we need to type in the hash sign, and then the name of the ID, and that will allow us to select a single element by ID.

h1 { color:red; background-color: blue; } #mainPar { color:yellow; }

You can have multiple elements in your page that have different ID’s, but ID’s need to be unique.

You cannot have two elements that have the same value for ID.

Transcript 1

Now that you have a basic foundation of HTML, it’s time to move on to the next step which is to learn some CSS.

As you know, HTML allows you to represent the content on your page. It basically allows you to create all of the content, but it doesn’t tell the browser how these things should look, what sort of font should we use, what should be the size of the font, CSS allows you to make your page pretty. We’ve got this basic page. Let’s change the title. We’ll call it Hello CSS.

There are different ways to add CSS in your page and we’re gonna look at them all but just one of them for this lesson. The one we’re gonna look at requires you to create style tags. And these style tags need to go above the content that you’re going to modify. So if we wanna modify something here, this style tag needs to go above that. Why is that? Because the browser when it reaches the page, it starts from top to bottom. So if it reaches CSS, it knows how it needs to show what comes below.

Let’s make the title red. To select the byte tag is super easy. All you have to do is write the name of the tag, for example h1, if I wanna select byte tag and I wanna select all the h1 elements in my page. And now I use curly brackets and inside the curly brackets I add my CSS rules. The rule I want to add is color red. If I save the page and refresh, we see now the red text. And because it’s a different language, it has a different syntax.

The syntax consists of selection and then curly brackets and inside the curly brackets you add the CSS rules. There’s always a property and a value, a property and a value, a property colon a value semicolon. And you can add multiple rules in here. We could add also background color. I’ll make it blue. And that’s looking quite ugly but it’s on the direction that we wanna go.

Transcript 2

In this lesson, you’ll learn to include your CSS code in a different file so that you don’t have everything mixed up in one file like we do now.

The way to include CSS in external files is to, first of all, create a new file for CSS. So I’m gonna go to File, New File, save this file and I’m gonna call it style.css. Next, I’m gonna grab the CSS code that we had, cut it and get rid of the style tags and I’m gonna put that code in here. The last part as you probably imagine needs to include this file somehow so let’s go and include this new file. We’ll use the same link tag which is used to include external files, in particular cases like the CSS or the favicon, but the rel in this case is gonna be stylesheet.

That’s just what you type on the attribute. And href will indicate the location of the file. In this case, the location of the file is on the same folder as the rest of my page. So if we now refresh the page, you’ll see that our CSS is back because we’re including it in an external file. Normally, it’s recommended to put CSS in an external file so that you can work separately in different files and the project is just more manageable. Also if more than one person is working on the project, it’s easier to work on different files in this manner. I’m gonna also show you another way of including CSS which is not recommended and this is to include CSS as an attribute.

So you can add a style attribute here and add CSS rules to it. For example, you can have color green. So in this case, we don’t do a selection because we are already selecting by basically placing our style attribute. So if we do that, see how this changed to green. But this is not recommended because you do wanna have separation between the content and the presentation of the content. The best way to achieve that is by putting it in an external file.

Transcript 3

In this lesson, we’ll talk about IDs, and how we can use IDs to select single elements in our HTML page. Let me give you an example. I wanna select just this paragraph here.

If I go and type in p, that will select all the paragraphs in the page, but I just wanna select this one. So there are different ways to do it in CSS but I’m gonna illustrate this, the concept of ID, for this particular example. We can give this paragraph a unique ID. For that, we need to add the attribute id=””, and in here we enter the name, the unique ID of that particular element, it’s a unique identifier. It cannot contain spaces. You can say something like “main paragraph”, something like that, so instead of selecting all the paragraphs like that, we can select by ID.

For which we need to type in the hash sign, and then the name of the ID, and that will allow us to select a single element by ID. You can have multiple elements in your page that have different IDs, but, IDs need to be unique. You can’t have two elements that have the same value for ID, they all need to be different.

And it needs to exactly match the name that you selected here, so now, you can select by tag, which will select all of the elements that have the tag, and now you can also select by unique ID.

Interested in continuing? Check out the full Bite-Sized CSS course, which is part of our Bite-Sized Coding Academy.

Working with the Brackets Code Editor

Lindsay Schardon — Fri, 30 Aug 2019 15:00:33 +0000

You can access the full course here: Responsive Web Design for Beginners

Part 1

In this lesson, you will learn how to set up the Brackets code editor.

Downloading and Using Brackets

For editing code, you can use any kind of text editor. Whichever one that you feel best suits you is the best one to use. The only exception to this is that you cannot use word processors like Microsoft Word. They apply extra formatting to the text that prevents it from working with code compilers.

If you’d like to try out the editor used in this course, you can download it from this website: http://brackets.io/. There will be a Download Brackets button which you can click on to get the latest version. The installation process is the same as for any other type of software.

Once you open Brackets, you will see something like this. This is the basic Getting Started project that the software provides.

On the left-hand side, you will see a panel with different files. This is where all the files in your project will be displayed.

For web development, you have to put all the involved files into a single folder. This includes all graphics, CSS, HTML, etc. In Brackets, you can then click on the Getting Started button, which will have a drop-down menu that says Open Folder…. Then you can navigate to the web project’s main folder, though you don’t have one yet. If you then click on the folder’s name, the drop-down menu will appear again, where you can open a new folder or go to one that you have previously loaded.

For dealing with individual files, you can click on them to show a preview. If you double-click on the file, a new section will appear in the left-hand panel called Working Files. This will contain all the files that you have double-clicked on and are editing. When you have finished editing, you can click on the x next to the file name. Doing so will remove it from the Working Files section. This is how Brackets handles the files UI so that you can stay more organized.

That’s a basic overview of the Brackets code editor. If you would prefer using a different editor, feel free to do so. The major editors like Atom, Sublime, VSCode, Notepad++, or others will all work fine for this course.

Part 2

In this lesson, you will learn some tips on how to work more efficiently in the Brackets code editor.

Useful Features to Enable

The first few tips are regarding three different settings in the View tab. They are Line Numbers, Word Wrap, and Highlight Active Line.

By default, Line Numbers and Word Wrap should be on. Line Numbers will turn on the line numbers, which is very useful for doing troubleshooting. Word Wrap will make sure that after a given point, the text will wrap to a new line so that you don’t have to scroll horizontally. The Highlight Active Line setting will not be on by default. This setting will make it so that the line you have selected is highlighted. It can be helpful so that you know where you are working in your code. If you’d like to have it on, click on the setting.

Another helpful setting to enable is found under the Edit tab and it is called Auto Close Braces.

This may already be on. If not, it is advised that you turn it on. It will automatically put in the closing tag when you write the opening tag of an HTML element. This setting will save you a lot of typing, plus you don’t have to worry about forgetting the closing tag.

The last helpful feature is the Live Preview function of Brackets. This will show an update to date preview of the code you are writing. You can find this under the File tab, or by using the shortcut Ctrl + Alt + P, or by clicking on the lightning bolt button on the right-hand side of the screen.

This will open a new page in Google Chrome that will display the current page that you have open inside Brackets. This web page will continuously update as you edit the code in Brackets without you having to manually refresh anything.

This feature isn’t perfect and you may occasionally have to refresh it manually. It also only works for Google Chrome, so if you use a different web browser you unfortunately cannot take advantage of this feature. However, even with these slight issues, it is a very helpful feature.

Hopefully you find these tips helpful for working with the Brackets code editor. They should allow you to work a little faster once you start coding for your web projects.

Transcript 1

Hi there, I wanna welcome you to this HTML 5 and CSS 3 course. My name is Geoff Blake, and I’ll be your instructor, your guide during this course. Now the purpose of this course is to reinforce some important HTML and CSS concepts for you and to help you go further into the world of responsive web design.

So we’ll start things off by getting the code editor that we’re gonna be using, Brackets, set up properly and then we’ll go into a short review of HTML and CSS to really reinforce some key important concepts that are critical for you to know. And even if you’re comfortable with web design already, I’m sure that there’s gonna be some key distinctions, some critical points, that you’re gonna pick up on here.

And then once we get through that, we’re gonna dive into this thing called media queries, where you’ll gain an understanding of exactly what they are and how they work and you and I are gonna create a simple example together to showcase exactly how media queries work.

And then after that we’re gonna jump into CSS Flexbox. Have you heard of this before? This is an improved method for building page layout structures that take very little code to pull off, so you’re gonna see exactly what that’s all about. And then finally, you’ll be introduced to something else called CSS Grids, which is a newer approach for building page layouts and structuring your content.

So I hope all of this sounds great. Without further ado, let’s jump into it.

Transcript 2

Okay, let’s jump right into it. The first thing that we need to do – the first order of business is to get you set up with a code editor. Now there are tons and tons of different code editors available, some are free, some are paid, some are modern and new, others are a little older and outdated. It doesn’t really matter which one you use, and truth be told it really boils down to personal preference, but here I’m gonna be using a code editor called Brackets.

So if you want to use the same code editor that I’m using, head over to Brackets.io, and you can go ahead and download em and install ’em on your side. Installation is very simple, in fact it’s so simple that it isn’t even really worth spending time here walking you through the process. I’m sure you can handle it on your own. If you’re using a different code editor, perhaps you’re using Atom on your side, or maybe Notepad Plus Plus, or Sublime, whatever you want to use it doesn’t really matter I really have to stress that.

The only- the only exception is you can’t use a Word processor, you can’t use an application like Microsoft Word or you know maybe Google Docs. You know something like that, you can’t use that you have to use a dedicated code editor.

Okay, so once you have Brackets installed, he’ll look something like this on your screen, this is what you’ll see here. And lemme kind of give you the lay of the land at least here inside Brackets just to make sure that we’re all comfortable here, we’re all on the same page. Obviously this main area here is our work area. Over on the left hand side you’ll see a vertical sidebar, and you may see something slightly different on your side inside Brackets than what we’re seeing here. You might see code, you might see something like this, okay and that’s perfectly fine.

Now, what I wanna do here is I wanna set up our web project and get that loaded into Brackets, and lemme kind of explain how this works here, because, for whatever reason, a lot of people find this a little bit confusing. I’m gonna drill all the way down to my desktop just for a moment, and sitting on my desktop I’ve got my project folder and it’s inside this project folder where I have all of the files that you and I are gonna be working on.

And I hope you know this already, but again just to make sure we’re all comfortable here, here’s the deal. Here’s how it works in web design in web development. When you’re working on a web project, all of the files that are a part of your project have to reside inside a single folder, so I’m talking about all of the HTML files, all your CSS files, all your graphics, all of your supporting files, any media files that you have, all that stuff has to reside inside of a single folder.

Now as far as Brackets is concerned, here’s how it works. Back inside Brackets, Brackets can only think of, or it can only think about one web project at a time, and this is because typically how you’ll be working is, you’ll be working on multiple files at any given time, not single files. Okay so check this out, what I’m gonna do is go over inside the vertical sidebar over on the left-hand side.

Here it reads ‘getting started’ towards the top, that’s actually a drop-down menu and what I’m gonna do is I’m gonna click on ‘open folder’, and then what I’m gonna do is I’m gonna go and navigate to wherever my web project folder is located. For myself here, obviously, it’s sitting on the desktop there. I’m gonna go and select ’em and open ’em up, and then that loads that project and all of his corresponding files into the sidebar inside Brackets. So that’s how it works, so everything that I see here I also see down on my desktop. Anything that happens here also happens down on the desktop, that’s the deal.

But as I was saying just a moment ago, Brackets can only think about one project at a time. If I want to switch over to another web project, I can go to the drop-down menu up towards the top, and I can go and switch back, for instance, back to ‘getting started’. Then that project loads in. So Brackets does not multitask. Brackets focuses on one project at a time, and we can flip back and forth between those projects from the drop-down menu inside the sidebar,.I hope that make sense.

Now what we can do here this is kinda neat this is kinda cool. We can single click on individual files if we want to kinda get a preview of those files, or what I could do is I could double click on a file and what that does is that actually divides this vertical sidebar in two, top and bottom. We now have a working files area and then of course the project down below. So I can go and double click on some files, I could begin working on those files and then when I’m finished working on those files I can simply close out of them and they get removed from that working files list. That’s the deal that’s how Brackets works -that’s how Brackets thinks. I should say really about your projects and how you can open up files inside your projects.

Transcript 3

Now, before we really get ripping into code and really start working on things, I wanna throw a few tips related to working with Brackets your way.

So here’s what I’m gonna do. Over on the left-hand side, go ahead and double click on Index.html – if you are following along on your site. And these tricks, these tips that I wanna show you will just help things move a little bit faster for you inside Brackets.

The first batch of options that I wanna show you reside underneath the View menu. So I’m gonna head up to the View menu here. Make sure that Line Numbers is turned on. If you’re not sure what that is, that’s the line numbers that appear over inside the vertical column there, over inside the sort of the margin area, if you will. This is really handy when you’re trying to troubleshoot things.

As a matter of fact, I was just troubleshooting something yesterday, and I was writing down on a scrap piece of paper which line number I was working on so I wouldn’t lose my spot. Or, as a matter of fact, just yesterday, as well, I was communicating with another developer and I was showing him a file, and I said, “I think there’s a problem “on line number,” (it escapes me, exactly what line number it was). But, “Line number 12, there’s an issue there, can you take a look at it for me?” Things like this. So line numbers come in very, very handy.

So, from the View menu, make sure you have Line Numbers turned on. Also, I would strongly suggest that you have Word Wrap turned on, as well, to avoid horizontal scrolling. These two options, by the way, Line Numbers and Word Wrap, they should be turned on by default. Okay?

Now, the other option that I wanna show you here is just above those two: Highlight Active Line. You can turn this on if you want. And what will happen is the active line that your cursor is currently on will, obviously, highlight, as you can see there. This makes finding your place inside code a lot easier. It’s entirely up to you if you wanna have Highlight Active Line turned on or disabled. Up to you. Okay?

Now, the next item that I wanna show you, this guy is critical. He’s found underneath the Edit menu, down towards the bottom there. Auto Close Braces. Make sure this guy is turned on. What that will do is, as you begin typing out some HTML code, perhaps something like this, and I go and close a tag or an element, it will automatically throw in the closing tag for me, which is huge. Because if you’re like me, you’re always forgetting to close your HTML elements. Anyway, there you go. I wanted to show you that.

The last thing that I wanna show you is unique to Brackets here as well. It’s a feature that Brackets has that no other code editor has. And this is called Live Preview. Essentially, Live Preview connects Brackets directly to Google Chrome and updates Chrome instantly and automatically as you and I are working on our web projects. So this means there’s no need to save your projects and refresh your browser, and, you know, this sort of thing, constantly going back and forth.

How do you activate ’em? Well, you could head to your File menu if you want, and then head down to Live Preview. That’s perfectly fine. Or you can use your handy keyboard shortcut, that’s fine as well. But I think what most people do is they head for the Lightning Bolt icon way over in the top right corner. Go ahead and click on that guy. And that will fire up a new instance of Chrome, and it will load in the page, the current page, that you have open inside Brackets. And, as I’m saying here, what’s great about this is any change that you make here is automatically going to update inside Chrome for us. No saving, no refreshing, nothing like that, which is great.

Now, I have found that Live Preview can sometimes flake out. Sometimes the connection is lost. Sometimes we do have to do an actual refresh, you know, things like this. The other thing that I wanted to mention, too, is it only works with Google Chrome, unfortunately, and it’s only going to preview the current file that we have open inside Brackets.

Anyway, I wanted to bounce these tips, these tricks, these aspects of Brackets off of you so that you can work a little bit more efficiently with your code.

Interested in continuing? Check out the full Responsive Web Design for Beginners course, which is part of our Full-Stack Web Development Mini-Degree.

Exploring Semantic UI and Setup

Zenva — Fri, 15 Mar 2019 04:00:43 +0000

You can access the full course here: Responsive Admin Pages with Semantic UI

Part 1

An important part of using Semantic UI is getting familiar with the website. It’s a copy-and-paste framework so learning how to navigate the website to find the widgets and frames that we want will save us time in the long run. Here we will take a look at the Semantic UI documentation, examine a few elements to see what the source code looks like, and then see how to add the element to our webpages. For now, we will spend most of our time in the documentation:

In the documentation, we can find the layout and frame elements under the tab “Layout” and the widgets and other components are spread over multiple different tabs. There are different kinds of elements or groups of elements under the tabs: “Elements”, “Collections”, “Views”, and “Modules”.

Let’s quickly check out a few of the components to get a feel for how Semantic UI code works. Each component page gives an overview of what the element is used for and provides various examples with the source code and the output. We will examine Buttons, Cards, and Forms.

Buttons

Buttons are used to trigger some action when pressed; almost every webpage will use buttons at some point. You can find these under the “Elements” tab in the Semantic UI documentation. Some examples of colored buttons with the source code look like this:

In order to display the source code, simply click on the “<>” button shown above. Note how each of the elements is of the type “button”. However, by assigning the class of “ui button”, each button will adopt the basic Semantic UI styling. Adding in the color will choose from one of the predefined colors available.

Cards

Cards are used to display a picture with some information and can be found under the “Views” tab in the Semantic UI documentation. These elements are perfect for displaying some profile information similar to how a playing card may be formatted. A basic example looks like this:

And the source code to generate this is:

Kristy
Joined in 2013

Kristy is an art director living in New York.

22 Friends

Note how this one is a set of elements enclosed in the “ui card” class. The separate classes of “image”, “content”, “header”, “meta”, “data”, “description”, “extra content”, and “user icon” all apply various predefined styles that help make the card look complete.

Forms

Forms provide a way to take in user input, validate the input, and perform some action. A prime example of form usage would be a login system in which users have to enter a username and password and can only proceed to their account page if the input is valid. Forms can be found under the “Collections” tab but rather than explore the element itself, we will focus more on Semantic UI form validation for now. That can be found at the bottom under the “Behaviours” tab. A form setup might look like this:

With the short-form validation rules and criteria looking something like this:

$('.ui.form') .form({ fields: { name : 'empty', gender : 'empty', username : 'empty', password : ['minLength[6]', 'empty'], skills : ['minCount[2]', 'empty'], terms : 'checked' } }) ;

Note how each of the fields has a distinct name and a rule beside it in a dictionary format. Each rule describes a behaviour that must not occur in order to be a valid input. In this example, none of the text fields may be empty, the password must be at least 6 characters long, there must be at least 2 skills selected, and the terms box must be checked in order for the form to be valid and submit to work properly.

So now you have an idea of how Semantic UI builds and styles the elements, let’s take a look at how to add the Semantic UI library to an HTML file. It might be worth checking out some of the completed examples under “Layouts” in the “Usage” tab. There are examples of full page layouts, content, themes, and even a completed login form.

Part 2

Before we can use Semantic UI, we have to install the package and start a new npm project. You’ll have to make sure you have Node.js installed and start up terminal (command prompt for Windows users). Next we’ll run the command:

You may need to add sudo in front of the command or if you’re using windows, run the command prompt as an administrator. Next create a new project folder (I’ve named mine practice_project) and navigate to it:

Next, start a new npm project by running:

It will prompt you to enter some info to create a package.json file. Just hit enter through each of the items and it will fill in the defaults. It should look something like this:

Now add the Semantic UI dependencies by running:

Note the double dash before “save”. It will prompt you to enter some info. For now, just use the automatic setup. Navigate to “automatic” and press enter:

Make sure that the project folder is correct or select “No, let me specify” and enter the correct path:

Save the semantic UI components in the folder “semantic” so just hit enter:

Navigate to the semantic folder and display all items. You should see a gulpfile.js.

Now build the gulpfile.js by running:

That will have created a semantic.json file as well. Now our project is set up and ready to use! We still need to create an HTML file with the correct headers in it. Create a file called index.html with the basic HTML page setup and copy the headers from the Semantic UI “Getting Started” page into the “head” tag.

Your code should look like this:

Semantic UI Pratice

You’re now all set up and ready to begin adding Semantic UI components to your webpage! Don’t be afraid to use your project for your portfolio, as it will be an eye-catching addition as you pursue your hobbies or newfound career skills!

Transcript 1

What is up, everyone? And welcome to our course on an Intro to Semantic UI. My name is Nimish, and I’ll be guiding you through these tutorials, in which we’ll learn about the popular framework Semantic UI, and how to use it to create beautiful, and appealing websites with ease.

So, in this course we’re going to first go into an Intro into Semantic UI itself, discussing what is it, and how we use it. And then we’ll explore the Semantic UI website. Using the website to copy and paste elements is a massive part of Semantic UI and especially in this course. So, it’s good that we get to learn how to use the website properly. Then we’ll move to installing Semantic UI. Then we’ll learn about how to properly structure our pages with the Semantic UI grid.

For those of you who have use bootstrap before you’ll see Semantic UI is similar to that, especially when it comes to the grid layout system. After this we’ll go into some individual Semantic UI widgets and components. We’ll show you how to examine them, select the options you want, choose them, and then copy and paste them into your code, and customize them further. And then we’ll wrap this section up with the final project. And I think that final project is going to take the majority of the time. And we’ll put everything that we’ve learned in these intro sections to the test.

Now for starters, what is Semantic UI? Well, Semantic UI is simply a Front-end framework very similar to bootstrap. If you guys have ever used bootstrap before, this course should be a breeze. And I personally found Semantic UI even more enjoyable to work with than bootstrap. For those of you who’ve never used bootstrap before don’t worry about it, bootstrap is not necessarily a requirement here. We’ll show you how to do things without it.

Semantic UI is powered by LESS and jQuery. And this means that it’s a free, open source copy-and-paste framework. That means that everything on the website is open source. You can literally copy and paste the code and you’re not gonna face any repercussions, in fact, it’s almost encouraged that you do so. And we can use Semantic UI to create web apps, and websites with ease.

So, I mentioned that this is a Front-End Framework, this applies to most of you who’ve never used bootstrap before. A Front-End Framework is simply a library that contains templates for HTML elements with CSS styling. So, that means that, let’s say we were to select a button, where we don’t just get that boring unformatted HTML button. That means the button that we select, with a Front-End Framework like Semantic UI will automatically have a bunch of styling already applied to it. This way the items we choose already look really good, before we personally do anything to add any CSS.

Now we use these Front-End Frameworks to very quickly and easily develop appealing interfaces. They generally contain intuitive and easy to understand syntax, especially Semantic UI and sometimes they even provide some basic behavior as well. So, why use Semantic UI in particular?

Well, Semantic UI makes developing web apps, and websites easier, and faster than if you had to do it from scratch. In fact, it can cut down the time by half, if not more. There’s easy to understand syntax, and it’s lightweight, yet, very, very flexible. This means there are lots of different widgets, and customizations to choose from. And you end up with these beautiful and modern-design looking webpages. Again, the main emphasis on this is the fact that it makes things really, really fast and easy.

We’ll see that we can build up a really good looking webpage in probably less than an hour, maybe like 40 minutes or so. Finally, how do we use Semantic UI? Well, I mentioned that it’s a copy-and-paste framework. So, this means we essentially search through the website util we find the elements we want. We can then choose from a variety of different element themes.

The documentation is very clear, and provides you a bunch of different options for each of the widgets and elements. We can then copy and paste the element with the themes we want into our code, and we can customize a bit further with CSS. Okay, so that is it for our intro. What we’ll do is we’ll launch right into exploring the website. As like I said, a lot of this is gonna be copy and paste, and examining the elements we want. So, let’s get to know how to use our website properly, and that’s gonna be crucial for the rest of the course. So, I really hope you guys enjoy this. I really enjoyed making this course, and I love working with Semantic UI.

It’s a fantastic framework that, like I said, has made building web apps and websites so, so much easier. Okay, cool! Well, thanks for signing up, we’ll see you guys in the next tutorial.

Transcript 2

Hello guys, and welcome back. We’ve got a really easy tutorial here for you, all we’ll be doing is exploring the Semantic UI Website. It’s important that we get familiar with he website structure, as a lot of the next tutorials are gonna be kind of copy and paste from that website into our web pages.

So, what are we going to do here? Well, we’re simply going to head on over to semantic-ui.com. We’re going to explore the website layout, get to know where to find the things that we need. We’ll then examine just a couple of elements really quickly, so that you can get the idea of what the source code might look like and how to grab it and put it in our pages. And then we’ll examine some finished page examples by inspecting the source code there. So, let’s head on over to the browser. I’ve got this one open, this is just Chrome. Opening a new tab, and I’m just gonna search for Semantic UI. So let’s just do a quick Google search, or something. We’ll head to this first link, semantic-ui.com. Okay, so this is the home page.

As you can see, it tells you a little bit about Semantic UI, gives you some code examples. What we’re gonna do is actually jump right in to get started. And don’t worry about the installation, we’ll actually cover that in the next section. I just want to get us used to the website itself. So, if you see on the left-hand side, there may actually just be like a little menu open button. So, if that’s the case, go ahead and click that until you see this menu bar on the left-hand side. So, this gives us access to all of the different components of Semantic UI.

First some Introduction, we’ve got some basic examples under Usage, some global stuff under Globals. We’ve got various Elements that we can use here, so you can see Button, Icon, Image, et cetera. We’ve got some Collections. These will be used to group together different elements. We’ve got various Views. These provide some pre-formatted templates for containing, well, kind of putting a few different views together into one. So we’ve got stuff like Feeds, Card, which we’ll be exploring later on. We’ve got some other Modules. These are just gonna be more interactive elements, like above. Okay, and finally, we’ve got some Behaviors such as Form Validation, Visibility, et cetera.

Okay. So, we can basically just pick and choose what we want to look at in this web page. You don’t look at it all, we’ll be exploring different components as we go. I would recommend that after this tutorial you take a few minutes to get to familiarize yourselves with the website. Otherwise, let’s just take a quick look at some of these Elements. Maybe we’ll go with the Button. That’s a pretty classic one. We’ll need lots of buttons in the tutorials to come.

Okay, so most of the web pages are kind of laid out in this format. We’ll have the Element name, or the feed name, et cetera. And then just a bit of a description. This is just a general button, it’s a possible user action. We’ve all seen buttons before, no doubt you’ve used buttons to get here in the first place. And so here we have the kind of basic description. In this case, it’s just a basic button here. We’ve got an example of what it will actually look like. And if we open up these brackets here, we get the source code that generates that. So it has the example and then the actual source code.

So, no doubt at some point we have all added buttons to some kind of an HTML page. You can use a button tag, just like before. Here you can provide a custom class and then use some CSS to style it, but no doubt, unless you’ve used a framework, like Bootstrap or Semantic UI, it doesn’t look like this right off the bat. Typically, to be honest, it’s kind of ugly right off the bat. We have to do a bit of CSS styling to format it. This is the benefit of using stuff like Semantic UI, is that we can actually just use the pre-built-in classes.

A lot of the Semantic UI classes do begin with ui, and then something, in this case ui button is the class name. And it automatically applies all the styling attached to this class into this button. So, this button might not look like much but there’s actually quite a lot already done for us. For example, we get a nice gray background, we have these rounded edges, a better font than before.

We get this nice on-hover behavior, okay. And we can click it, it says Follow or Following. That’s actually a bit of JavaScript behavior. All right, so if we want to copy and paste the code, we can simply select it here, or we can just do copy code. It will copy it to the clipboard. And again, this is this whole theme of this course is gonna be this kind of copying and pasting items that we want, into our web pages and then a bit of further customizing them.

Let’s say we wanted to customize this button further. You could actually customize the entire ui button class, or you could maybe attach an ID to it and customize things that way. So that’s a very basic button. There’s lots of different variations on buttons that you can see as you scroll up or down. We’re not gonna cover them in great detail here, as we’ll be kind of going into the greater details later on. It’s just that any of the source codes are, I think, hidden by default. So you just need to open and close them by doing that, and then you can kind of see all the different behaviors.

Moving to a different item, maybe let’s check out a Card or something. This is a pre-built view. A card will look something like this. This is the default card, okay. And a card just displays some site content in a manner similar to, let’s say, like a playing card. So we’ve got the picture. We’ve got maybe the name of something, a bit of information about them. Maybe there’ll be like a button, or something that has some extra behaviors. If we want to examine this source code, again we simply open it up.

Okay, and as you can see, there’s this collection with a bunch of different stuff within it. So this is a ui card. Like I said, we’ll be taking a look at these in greater detail later, but as you can see, it’s got a /div, that’s an image. It’s got some content. It’s got some extra content here. And this is just gonna be the stuff down at the bottom.

Okay, so as you can see from the source code, we’re still building up our pages, websites, web apps, whatever, with the HTML source code, but instead of having to type this all out by hand and having to think about exactly what components go where, how it’s all gonna come together and how it’s gonna look, we can simply take a look at this, say okay, this is what I want. We’re gonna copy and paste this code in here, using the Semantic UI classes, such as card or content, et cetera, to add that pre-formatting in. Okay, and then we’re basically just good to go.

Now, the last thing I want to take a really quick look at before we move to the final examples, is gonna be way down at the bottom into Behaviors. So, let’s take a quick look at Form Validation, because we’re definitely gonna use Forms later on, so it’s a good idea to get somewhat familiar right now. But I’m sure most of you, if not at least some of you, have used forms at some point. Well, all of us will have used forms, but some of you will have created them yourselves. It’s basically just a way to enter some input and validate that input.

So we use forms for things like logins, for example, maybe if you were creating an account, we’ll use a form. If you’re creating an order, like you’re maybe ordering something off of Amazon, they’ll be using probably some kind of a form. And so, there needs to be some behavior attached to the form, as well as some kind of validation. Well, Semantic UI has actually provided more than just the front-end, it’s provided a bit of actual behavior here. So, by using Semantic UI’s form JavaScript here, we can actually provide some real validation.

For example, let’s say within our form we have, let’s see if there’s the actual example here. And yes, so the actual example looks a bit like this. We have a First and a Last Name, or First Name and a Username, a Gender, Password and a Skills set, we have this agree, and a Submit. So, there’s gonna be a few rules.

Likely we’ll need none of these to be empty. Perhaps our Password has to be a certain length, or something, and we need a certain number of skills. Well, we can use Semantic UI’s Form Validation to do so. So, we have a type of rule, which is make sure it’s not empty. We need at least two skills. Again, gender, it can’t be empty. Username can’t be empty. Password has to be at least six characters. And we need to make sure that this is checked. Okay? So this is just to quickly demonstrate that Semantic UI goes beyond just providing style themes, it actually provides a bit of behavior, as well. However, we will be taking a look at this in greater detail later. I just wanted to quickly introduce it to you. The last thing we’ll do here is take a look at the Usage.

We’re gonna take a look at some of these Layouts. Okay, and I’m actually gonna leave this rest of the part up to you guys. So, there’s some Pages, for example, a Homepage, Fixed Menu. There’s actually a pre-built login form. There’s some items up here. And these are all just ways to demonstrate some of the Semantic UI widgets, as well as some of the layouts.

So for example, let’s say we want to take a really quick look at this Login Form. We can open it up. And if we want to see the Semantic UI code that generates this, we can do two things: we can do the View Page Source that actually opens up the entire source code on the next page, in another tab. I simply right clicked, by the way, View Page Source; or we can do Inspect, in which case we can actually examine the source code right in the same tab here. Okay. So I’ll leave the rest of that up to you.

Again, these are, actually, I’ll just get rid of that. These are all found under our Usage tab. If you go to Layouts, then there’s a few examples. I encourage you to look at a couple of those examples, view some of the source code to get an idea, explore the web page a bit more.

And once you’re done, head on over to the next tutorial, in which we’ll be actually setting our files up to use Semantic UI. So, thanks for watching. We’ll see you guys in the next one.

Transcript 3

What’s up, everyone? Welcome back. Here we’ve got a fairly straightforward tutorial.

We’re just going to install Semantic UI and we’re gonna get our project set up and ready for us to use, because in the next section we want to jump right into exploring some individual components. So our steps here are going to be to first install Node.js. If you’ve already installed that, that’s great, you can basically skip a step there. After this we’re going to install gulp, that’s only gonna take a minute or so, and then we’ll start a new npm project, we’ll run that npm in it to get ourselves set up and once we have that project ready to go, we’ll install Semantic UI into that project.

We may as well start up an indexed html file and install the necessary headers as well, just so that next section we can launch right into the actual development. So let’s head on over to the Semantic UI website, again this is just semanticui.com, and I’ve clicked on Getting Started, that’s gonna be this link at the top left here. So this actually gives you most of the installation instructions, it doesn’t actually say anything about starting an npm project, so I’ll guide you through the entire process. You can follow this or follow along with me.

So that first step again is gonna be getting your hands on Node.js. If you don’t have Node.js then you can search for it under download Node.js or something like this, and go to that Downloads page and just download the correct installer, Windows or Mac, 32 or 64 bit, depends on which system you’re using.

Once that installer comes up then simply open up the package, install Node.js, and when you’re ready to move on we’ll go to the next part of this, which is going to be installing gulp. So let’s get Terminal up and running. For you Windows users this will be Command Prompt. You want to make sure that you’re running Command Prompt as an administrator or some of these commands may not work. For those of you who are using Macs, just type in sudo before any command to give those administrator privileges. So we’ll install gulp, we’ll do sudo npm install -g gulp, so make sure you have the dash and gulp. Windows users, just enter your password, Windows users, you can do this command without, or npm install without sudo, okay?

So if you’re using Windows, you’re running this on an administrator Command Prompt, don’t include the sudo portion. Okay, so it’s updated one package, that’s good. If you’ve never installed it before it will say success, installation success, or something like that. Assuming that you have no problems there, let’s move to the next portion. So at this stage you do need to have npm ready to use. So we’ll now start up a new project folder. You can do so in the Command Prompt. I find it a little easier to do so in Finder, especially easier for you guys to see.

So I have this Semantic UI project that’s just under Desktop, Zenva, Bootstrap Semantic UI. Just find a good place for your project, we’re gonna create a new folder, I’m just gonna call this something like practice. Ah, maybe that’s, yeah, we’ll do it like practice_project, something like that is fine. All right, and then we’re gonna need to navigate to that practice_project in our Terminal now.

So just take a second to do that. Just going to navigate to where that is now. Okay, and ls we’re gonna to go to, we’re gonna go right into that practice_project folder, or whatever you’ve called yours. There shouldn’t be anything in there right now. We’re going to initialize npm, so I’m gonna do npm init right here, okay? And we can have this package named practice_project, that’s fine, version I don’t care about, or description, entry point is fine, test command doesn’t matter, git repo doesn’t matter, keywords and author, they also don’t matter, license, that’s fine. Is this OK? We’ll just go with yes.

This is just modifying our JSON file, by the way, so if you do wanna specify stuff in there, like a specific author, specific description, please feel free to go ahead and do so, but for me this is just practice, so I’m not gonna bother filling it in. So if we do an ls we should now see this package.json file, so we’re on the right track. Now what we’ll do is we’ll actually install the Semantic UI into this project, so we’re gonna go, actually I’ll make sure we’re doing sudo.

For those of you who are Windows users, don’t bother with sudo, we’ll do sudo npm install semantic-ui –save, like so. All right, and now this is gonna take a few seconds and then it’s going to prompt us to kinda do a similar thing to up here, so it’s going to ask us to use either a custom installation, an express installation, or the default automatic installation, okay? So whichever one is more convenient, which is probably gonna be the automatic one, unless you really know what you’re doing. You can do the custom one if you’d like, but I’d recommend just going automatic for now.

So you see it pops up this, there’s a few options to choose from, you can scroll through them with the arrow keys and then press Enter to select. So I’ll just go with automatic, that’s fine. So yep, you’re using npm, is this your project folder? So do make sure that that project folder is correct. This should be the path to wherever we just created that practice_project, okay? So we’re going to go ahead and select yes if that’s right, or no let me specify and then parse in that complete project path. So semantic should be in semantic/, that’s fine, yes, okay and we’re just gonna go ahead and let that happen.

Okay, so as long as there aren’t many warnings here, this is fine. What we’re gonna do next is install gulp, or rather build gulp, and that will download all of the necessary packages. So if we do an ls now we should see that we’ll have a directory semantic, we’re gonna cd to that directory and we should see this gulp file .js, so now we’ll just do gulp build, okay? And this is just going to download and install all the components, so as you can see it’s downloading stuff like site, form, checkbox, dimmer et cetera and this is basically just installing all of these guys that you’ll see on the left hand side, so it’s giving us access to all of the different components there.

So it should just take a few seconds, maybe 15 to 20 or so, and once that’s done then we basically have everything set up and ready to go. Okay, good stuff. Cool, so let’s do an ls again, actually we’ll do, we’ll null navigate up, so in our project directory we should have node_modules, we should have package-lock, package.json, semantic and then semantic.json here.

All right, just gonna do a little bit of basic html page setup, so we’re gonna do the DOCTYPE html, like so, and actually I think that’s a bit small, so let me make that font a bit bigger, okay, I’ll start with html here and we’ll start with the head. And not loving that four-tab space, we’ll just do two tabs, okay? Good stuff, okay.

So we’ve got html, now we’ll need head and body tags, so we’ll do head, okay, and we’ll need the body tags as well, good stuff. So in our head file we’ll just do the classic, little bit of classic setup, we’ll do meta charset=”utf-8″ is good. We’ll do meta name, so we’ll change charset to name and we’re gonna do viewport, okay, content is going to be width=device-width, like so, and why don’t we go ahead and give this guy a title, whoops, not time, we want title, like so, and this is just gonna be our practice, Semantic UI Practice.

So we can go ahead and clear this and we’re actually done with the Terminal stuff for now. All right, so what we’ll do next is head on over to a text editor of our choice, I’m gonna use Sublime Text, I just really like how it works, how it’s laid out, but it really comes down to personal preference, so feel free to use whichever text editor you want.

What we’re gonna do is we’re gonna start a new file, okay, this one is gonna be simply index.js, so let’s go ahead and save that as, or not index.js, this is gonna be index.html rather, okay? And I’m gonna make sure that it’s in my practice_project root directory. This is, again, that project I just created. So you go into Semantic UI, practice_project, gonna make sure it’s in there. Okay, this will automatically make it an html file. Again, it doesn’t really matter too much which kind of file you’re using or which kind of text editor you’re using, as long as you have one available.

All right, so this isn’t gonna be our final project, we can actually create a different project and really get set up there, but for now this is just gonna be a way to practice using Semantic UI. So the next step is gonna be to copy and paste some of the get started code in here, as kinda typing it out by hand’s a bit of a pain. So we’re gonna go back to Chrome, or whichever browser we have this guy open in, and we’re gonna scroll all the way down to Include in Your HTML, okay? We’re going to just take this, gonna copy it and we’re gonna put it in the file’s header.

So let’s go back to our editor, okay? And we’ll just paste it right in there. Just gonna fix the indentation. Let’s give this guy a save and if we wanna make sure that we are actually using Semantic UI properly and we do have access to everything, let’s just grab one single element and then we’ll include it in that page, so back to Chrome. I’m just gonna grab, let’s say, like a button or something.

All right, just gonna do a little bit of basic html page setup, so we’re gonna do the DOCTYPE html, like so, and actually I think that’s a bit small, so let me make that font a bit bigger, okay, I’ll start with html here and we’ll start with the head. And not loving that four-tab space, we’ll just do two tabs, okay? Good stuff, okay.

So we’ve got html, now we’ll need head and body tags, so we’ll do head, okay, and we’ll need the body tags as well, good stuff. So in our head file we’ll just do the classic, little bit of classic setup, we’ll do meta charset=”utf-8″ is good. We’ll do meta name, so we’ll change charset to name and we’re gonna do viewport, okay, content is going to be width=device-width, like so, and why don’t we go ahead and give this guy a title, whoops, not time, we want title, like so, and this is just gonna be our practice, Semantic UI Practice.

And when you’re ready to move on let’s learn about proper layout techniques. All right, so thanks for watching. We’ll see you guys soon.

Interested in continuing? Check out the full Responsive Admin Pages with Semantic UI course, which is part of our Full-Stack Web Development Mini-Degree.

An Overview of Bootstrap

Zenva — Fri, 08 Mar 2019 05:00:24 +0000

You can access the full course here: Intro to Bootstrap

Part 1

Have you ever tried to build a website or webapp from scratch? If you have, you may have found it to be a lengthy and sometimes frustrating process. The end result often doesn’t look as good as the initial plan and it can be difficult to achieve the desired layout and responsiveness to different screen sizes. Styling a webpage to a production level of finish can take a long time if doing everything from scratch.

This is where Bootstrap swoops in to save the day! Bootstrap is a framework that makes building a webpage quick and easy through the use of grid structures and pre-formatted widgets. It contains a vast library of styled widgets and frames that allow users to quickly build appealing webpages with very little effort.

By using pre-formatted templates for widgets, Bootstrap users save time and frustration that would be spent on styling each individual element. Bootstrap provides well-designed widget and frame templates that look good and respond appropriately without any customization. Base widgets come in a variety of flavours which can be further customized with CSS to provide unlimited and easy-to-use options. For example, on the left is a button with Bootstrap and on the right is a button without Bootstrap:

This is a noticeable improvement and requires only that we assign a bootstrap class to the button element.

Bootstrap is very simple to use. There are 5 basic steps:

Add the bootstrap headers into an HTML file

Find the widgets and layout styles that you want on the bootstrap website

Copy the code for the element from the website and paste it into your HTML file

Add customizations from the bootstrap library to the element

Customize the element further with your own CSS

So now that you know what Bootstrap is, let’s take a look at the webpage to get a feel for how to use it and what options are available.

Part 2

An important part of using Bootstrap is getting familiar with the website. It’s a copy-and-paste framework so learning how to navigate the website to find the widgets and frames that we want will save us time in the long run. Here we will take a look at the Bootstrap documentation, examine a few elements to see what the source code looks like, and then see how to add the element to our webpages. For now, we will spend most of our time in the documentation:

In the documentation, we can find the layout and frame elements under the tab “Layout” and the widgets and other components under the “Components” tab.

Let’s quickly check out a few of the components to get a feel for how Bootstrap code works. Each component page gives an overview of what the element is used for and provides various examples with the source code and the output. We will examine Alerts, Buttons, and Dropdowns.

Alerts

Alerts are used to display some sort of message such as a warning or a notification. Here are a few examples of Bootstrap alerts:

And the source code the generate the outputs looks like this:

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

Note how each of the components is just a div with the class “alert” applied to it and the different alert-options give different outputs

Buttons

Buttons are used to trigger some action when pressed; almost every webpage will use buttons at some point. The basic examples look like this:

And the source code to generate the outputs looks like this:

Note that this time, the element is of type “button” and not “div” like with the alert. This time, the “btn” class is used to provide default style behaviour to the buttons with “btn-option” added to the end to further customize the button appearance.

Not all buttons are of the “button” element type. For example, radio buttons or checkboxes are considered inputs:

Active Radio Radio

Dropdowns

Dropdowns are commonly used in menu bars and provide some hidden options to choose from when a user clicks on the initial button. An expanded dropdown might look like this:

And the source code to generate this is:

Action Another action Something else here

Note how this one is a set of elements enclosed in the “dropdown” class. There is the initial button and the dropdown menu with the menu options as “a” elements

So now you have an idea of how Bootstrap builds and styles the elements, let’s take a look at how to add the Bootstrap library to an HTML file.

Transcript 1

Hello everyone, and welcome to our tutorial series on an Intro to Bootstrap. My name is Nimish and I’ll be guiding you through the next videos in which we’ll be getting an intro into what Bootstrap is and how to use it.

Once we are comfortable using Bootstrap, we can then move on to actually building a few projects and I’ll let Mario take over. So for starters, what is Bootstrap? Well Bootstrap is simply an open source framework that’s used to develop websites and web apps. Basically, anything web related. Bootstrap is generally based on HTML and CSS, there’s a little bit of JavaScript functionality in there, but mostly it’s just pure HTML and CSS. And Bootstrap provides pre-formatted templates for common frames and widgets.We basically use these pre-formatted frames and widgets to help build up our web pages by specifying containers and adding in the necessary widgets.

So why bother using Bootstrap? Well, for starters, Bootstrap just generally makes web development easier and faster. Using Bootstrap allows us to quickly build good looking web pages and web apps with relatively little work. The widgets and frames provided are pre-formatted to already look good. This eliminates the need to go through and painstakingly apply CSS formatting to every single HTML element or frame that we want to add into our web page.

Basically, using Bootstrap we can build up a web page that looks good very, very quickly rather than having to build first the HTML frame and then go through each individual container and element and style it. For example, using Bootstrap, we can just simply add a button to our page, specify it to be off the Bootstrap button class and it will likely already have some kind of color, it will probably have rounded edges, maybe a nice font, on-hover behavior among others. These are all attributes that we would have to specify ourselves if we were not using something like Bootstrap.

Now, we’ll really quickly talk here about how to use Bootstrap then we’ll end this section and head on over to the actual web page itself where we’ll get a better understanding. There are four basic steps to using Bootstrap. The first will be to add the necessary header files to your HTML file, or rather header tags. Once we have those header tags added, that gives us access to the entire Bootstrap framework. We then go online to the Bootstrap web page and we find the widget and frames that we want and basically just copy and paste the code from there.

One of the best things about Bootstrap is that it’s open source, so we can literally take the source code provided and use that right in our web pages. So let’s say we wanted a couple of buttons in our web page. We’d simply go to the Bootstrap web page, find out where the buttons are stored and all the information about them, we could choose the kind of customization we want, and then we can literally copy and paste the code right from the web page into our own HTML file.

Step number three is further customizing widgets and frames by implementing other options. Let’s go back to that button example. There isn’t just one type of button in Bootstrap, there are many other ways we can customize our button. For example, perhaps we’ll want a large versus a small button. Perhaps we’ll want a certain font, or a completely circular button, versus a square button. After this comes step number four, which is to customize our elements further using custom CSS.

Of course, we don’t just have to use everything that Bootstrap provides, we can customize things even further. Let’s say I wanted a very specific width and height for my button. Well, if we were to just use a pure Bootstrap button, it come with a set width and height that varies a little bit depending on the content and the style of button we use. But let’s say I want my button to be exactly 150 pixels in width, well, I can absolutely do that, I’d maybe just give that button an ID, or I’d go right into the buttons class, and then under my CSS, I can add in a custom width and height to that button.

So we can essentially do everything that we would do with a regular webpage, applied to those Bootstrap elements. Bootstrap is really just there to provide us a pre-implemented and pre-formatted widget or frame that we can then customize further.

Okay, so this has been a really quick intro into what Bootstrap is and how to use it, like I said in the next section, we’ll be taking a look at the Bootstrap webpage itself, and getting an idea of how to first grab the elements we want and then how to add them to our code. Thanks very much for watching, we’ll see you guys in the next section.

Transcript 2

Hello, everyone, and welcome to our tutorial on exploring the Bootstrap website. Here, what we’re gonna do is navigate to our Bootstrap website. We’re gonna open up the documentation and we’ll just take a look at a few examples to gain an understanding of how to use Bootstrap.

So, step number one, get to the website. Step number two, open up the documentation part. Step number three, we’ll be examining a few choice elements. And step number four, we’ll be discovering how to add these elements to our web apps, so we’ll be taking a look at the source code themselves. After this, I’d encourage you guys to play around a little bit before moving to the next section just to familiarize yourselves a bit more. So, let’s head on over there now.

I’m just gonna open a new tab here. I’m using Chrome, although feel free to use whichever browser you’d like and we’re gonna search for Bootstrap. We’re gonna go to this first link here, getbootstrap.com, and we’re gonna ignore this stuff. I’ll show you how to download and incorporate Bootstrap a little bit later. What we’re gonna do is head on over to Documentation up top. And we’re actually gonna skip over this Getting Started. This just shows you how to add in the necessary headers, or rather, the necessary tags to our header file in order to actually gain access to Bootstrap’s framework.

What we’ll take a quick look at is gonna be Layout. Although, we won’t spend a ton of time on this because we will be focusing specifically on the grid layout in, I believe, the next section. Just for now, let’s take a really quick look at that. You’ll note that Bootstrap, this webpage, and pretty much all of the pages in our Bootstrap documentation are formatted this way. They’ll have the actual examples of what something will look like using the Bootstrap code, and then the code that is used to generate this.

So, this might be a container class, you’d have some content, and it might look something like this. This might be a fluid container class and it might look something like this, okay? Like I said, we’ll be using grid for the most part and we’ll just take a quick look at that, specifically. Grid is gonna be the basic way in which we’ll lay stuff out using Bootstrap.

It’s actually very easy to use, kind of follows a little bit like the tables in HTML, which will have the overall structure, in this case, just a container. Each is divided into various rows. In this case, this is one row, I believe. The next one is a few rows, so this one is two rows here. And then there are columns for each rows. This is first column, second column, and third column. As you can see, we’ve got the overall container, we’ve got one row, and then we have three columns here. So, that’s your general grid structure.

We will actually come back to this and examine this in greater detail. For now, I just wanna take a really quick look at how the documentation’s formatted. So, like I said, most of the pages are laid out this way. We’ll have the actual element or what we’re trying to understand here. We’ll have the actual example as it would be outputted if we were to run the code.

And then we would have the code that would actually generate that example. So, if we were to literally copy and paste this into an HTML file with of course the correct tags, and we would then run that page maybe on a browser or something, it would look exactly like this. And that’s how the rest of the documentation is going to work. Now, just taking a look at the grid code isn’t terribly interesting, so let’s jump on over to some components and we’ll just take a really quick look at a few of these.

So, Alerts, let’s start with Alerts ’cause they’re the very first element or very commonly used. So, very often, you might click on something and it says you’re good to go or maybe it says you can’t do that, maybe even need some input. So, we’ve all used alerts and we’ve all seen them pop up.

Well here, we get to use the custom Bootstrap alerts class and we might get some nice-looking alerts like this. So here are some examples of our alerts, that’s the main element that we’re looking at up top, and then we’ll take a look at some really quick examples. So, it tells you a bit about it, what it’s used for, and then it shows you some examples of how it would look once the code is run. And then of course the code that actually generates the example above.

So note how there’s no extra CSS, there’s no extra JavaScript or HTML. Simply by calling upon these divs and plugging in the appropriate class, we get this appearance. It gives a nice font, it gives some nice padding, spacing, it’s filled up the page width. It’s got the nice rounded corners, a bit of a border, and a nice color. So, this is actually all specified through this alert and alert-primary-class, and of course, we need to make sure that div role is an alert.

Now, some of the Bootstrap elements, not all of them, in fact, a lot of them actually, are simple divs. They’re divs with a specific Bootstrap class applied to them, perhaps even a role, and then they take on the behavior specified in the Bootstrap framework itself. So, in this case, a div with this class applied and this role will take on exactly this appearance. It will take on an alert’s appearance because we’re using an alert Bootstrap class. And alert-primary indicates that it’s supposed to be this color scheme.

Note the secondary alert is going to be gray. This next one is gonna be a success, and danger, these are going to be green and red respectively. And we’ll actually see the success, danger, primary, secondary, warning, et cetera, we’ll see this color scheme pop up time and time again. So let’s say you wanted to incorporate some of these alerts into your files, into your actual HTML code, you’d simply copy and paste maybe this div.

Let’s say we want that blue alert, maybe we’d just copy and paste this right into the code. If you wanted the whole thing, you can grab it all by copying it like this, or of course, doing the manual copy and paste. So there’s a few more ways we can customize things a bit further. We can have an alert with an example, like so. We can have an alert with additional content. As long as it’s all within the class here, alert, and then something, alert-success, primary, et cetera, well, then, we’ll get the example as shown above.

All right, so that’s a really quick look into alerts. Obviously there’s a lot of elements to cover. We’ll just take a quick look into buttons and maybe something else, and then I’ll let you guys play around a bit on your own. So, this is going to be all of the buttons that are available in Bootstrap. These are just really basic buttons.

There’s a lot of extra customization we can do. Let’s just take a really quick look at the first example here. We have, what, that’s three, there’s about eight or nine buttons here. So, these are the examples. And there’s a code of course to generate them. So this is our primary button. That’s gonna be, this time, a button element. Note that it’s not a div class, but rather a button. The class is going to be btn, to signify that we’re using a Bootstrap button. And then we specifically want the primary one, so we go btn-primary, and it looks like that. The btn-secondary will look like this, success, like this, danger, warning, info, light, dark, and link.

So once more, there’s no further CSS customization. This is exactly how these buttons would look. So that’s really the benefit of using Bootstrap, is that we get this level of customization, we get this level of the buttons and the other elements already looking pretty nice without having to do any of that dirty work ourselves. If we wanted to replicate this, we would have to apply a background color, round the corners, apply a nice font, maybe add some padding.

We’d also need to specify this on-hover behavior. It looks like there’s a bit of a border, and so on and so forth. There’s a lot of different things that we need to do that Bootstrap has already done for us. Not all buttons are of the button element type however. If we scroll down to the bottom, we should see checkbox and radio buttons, for example.

These actually remain inputs because in HTML, they are inputs. We do radio buttons and checkboxes as different types of inputs. In this case, a checkbox or a radio. And so, rather than being a Bootstrap button, it’s actually just a div, and then there’s the input. They still however belong to the Bootstrap button overall class. In this case, with the radio buttons, we have a btn-group. Specifically, it’s a toggle button group. And then we have all the items within it. And we get the specified behavior above. So, it’s not really doing much. It’s just changing in appearance a bit. We have the secondary active, which is why this is the first one that’s selected when the page loads.

And so, there’s a bunch of customizationable options. So the last one we’ll take a really quick look at will be dropdowns because, again, dropdowns are very commonly used. Just a nice way to dropdown a menu of options. So here, we’re on the Dropdown page. Let’s say we just have a single button that when clicked on will provide some options here. Well here, this is a div of class dropdown. We have a button. That’s gonna be the very first one.

Note that it’s a secondary button ’cause it’s gray. It’s a dropdown-toggle type button, which means it’s gonna actually drop something down. There’s the id, and a bit more information about it. And the options are in the dropdown-menu class. This is actually a div here. And we have, each of the options, there’s gonna be a class dropdown-item, and then Action, Another action, and Something else. The href is actually going to do something, maybe navigate to a different page or perform some action. Now, these all belong to the dropdown-item class, just as this belongs to the dropdown, and this button belongs to a btn class.

So, these are all, once again, Bootstrap classes that allows us to access Bootstrap’s already preformatted templates for each of these items. So now you’ve seen three items and learned a very small amount about the grid layout system. What I would strongly encourage you to do is choose a few of your favorite kinds of widgets and interactive elements and just maybe examine them, take a look at some of the code, take a look at some of the examples, and see how these can be customized.

When you’re ready to move on, we’ll talk a little bit more about this grid container system and how we can use it to develop our pages. So, thanks very much for watching. We’ll see you guys in the next section.

Interested in continuing? Check out the full Intro to Bootstrap course, which is part of our Full-Stack Web Development Mini-Degree.

Explore Free CSS Tutorials – GameDev Academy

How to use Inline CSS: Beginner’s Web Development Tutorial

A Quick Overview of HTML & CSS

Applying CSS Styles: An Overview

HTML tag on a super simple website. Here is our website with no CSS. My Super Simple Website

My Super Simple Website

Inline CSS: HTML Style Attribute

header element. We define the style by assigning the attribute a string containing normal CSS properties. Multiple CSS rules can be applied but it’s important that each rule end with a semi-colon. My Super Simple Website Our header is now centered on the page.

My Super Simple Website

My Super Simple Website

My Super Simple Website

My Super Simple Website

header by setting its style attribute to a string containing three CSS rules separated by semi-colons.

Learning Resources

Conclusion

How to Add Google Fonts to Your Websites and Webapps

Tutorial

Google Fonts

Selecting Google Font

Linking to Google Font

Using Google Font

Transcript

Free Course – Learn PureCSS for Responsive Websites

About

Free Course – Master HTML & CSS

About

Free eBook – A Guide to Development with the Web

How to use Media Query Breakpoints

Creating Media Queries

Transcript

A Bite-Sized Guide to CSS

Part 1

Working With CSS

Hello World CSS

Hello CSS

Part 2

CSS in External Files

Hello CSS

Hello CSS

Summary

Part 3

Hello CSS

Transcript 1

Transcript 2

Transcript 3

Working with the Brackets Code Editor

Part 1

Downloading and Using Brackets

Part 2

Useful Features to Enable

Transcript 1

Transcript 2

Transcript 3

Exploring Semantic UI and Setup

Part 1

Buttons

Cards

Forms

Part 2

Transcript 1

Transcript 2

Transcript 3

An Overview of Bootstrap

Part 1

Part 2

Alerts

Buttons

Dropdowns

Transcript 1

Transcript 2

HTML tag on a super simple website. Here is our website with no CSS.

My Super Simple Website

header element. We define the style by assigning the attribute a string containing normal CSS properties. Multiple CSS rules can be applied but it’s important that each rule end with a semi-colon.

My Super Simple Website

Our header is now centered on the page.