# data[].attributes.headline
Build a Personal Website with HTML and CSS (Part 1)

# data[].attributes.subject
Build a Personal Website with HTML and CSS (Part 1)

# data[].attributes.body
https://medium.com/@ianjsikes/build-a-personal-website-with-html-and-css-part-1-3013fb5dacd4

# data[].attributes.attachment_link.readable_text
This guide will show you how to build a simple website, with no previous HTML or CSS experience. The final product will look something like this:

Note: This tutorial was made for a workshop for Santa Monica College Computer Programming Club. Some information may be missing from the text.

The first thing we'll do is create a folder to hold our project, and the base file of our site, called index.html. Here is what your folder should look like:

Next, open index.html in our text editor. If you're not sure what program to use as a text editor, you can use Sublime Text 3, Visual Studio Code, or Atom.

Let's start with the basic structure for a HTML page.

HTMLis made up of "tags" (the things surrounded by < >). I won't discuss every tag used here, but the most important thing is that the content of the website goes between the <body> and </body> tags.

If you double-click on the index.html file on your computer, it will open in your browser.

We've created a functioning website! It's pretty empty though. Let's add some more content.

These are called header tags. They indicate topics or important info. Headers range from <h1> to <h6>.

Links

What's a website without links? We want to add some links to our various social media accounts. We can use the <a> tag to create a link, like this:

The href property in the tag holds the URL the link goes to. The text between the tags will be what appears as clickable, like this.

Lists

We want to list multiple links on our site, so we will use an HTML list. The code for a list looks like this:

Our list will be wrapped in <ul> (unordered list) tags. Each item of the list will be wrapped in a <li> (list item) tag.

Let's combine what we know about links and lists to create a list of social media links on our site.

So we have an unordered list, and each list item contains a link. We can easily add more links to our list.

Next, we'll add to the content of our site is a short bio. We'll use the <p> tag (short for paragraph) to contain it.

Images

All that text is a little boring. Let's add a profile picture to mix it up. Take a picture file you have and put it inside an img folder in your project, like this:

We can display that image on the page using a <img /> tag. Let's put one at the top of our page.

The src attribute tells the browser where the image is in relation to our index.html file. The width attribute forces the image to be 200 pixels wide. <img /> tags do not need closing tags. They are self-closing.

Here is what our site looks like now that we've finished adding all of the content:

Before we can start styling our page, we need to group certain elements together. Here is an illustration of what I mean:

We'll use the <div> element to divide our HTML into logical groupings. We need to add three div s to achieve that.

This won't actually change the appearance of our site at all, but it will allow us to later reposition sections of content.

Classes

It's hard to keep track of what each element does. Later, when we style the page, we want to give names to our elements to specify which ones to style. This is what the class attribute is for. A class attribute can go on any tag. Let's add classes to our file.

We're finally ready to get to styling with CSS! I'll cover that in Part 2.

Check out Codecademy and Free Code Camp for some great free guides on HTML (and many other topics). W3Schools is also a great quick reference.

Experiment with adding more social links, rearranging the order of your content, or adding more images.

# data[].attributes.attachment_link.title
Build a Personal Website with HTML and CSS (Part 1)

# data[].attributes.attachment_link.description
This guide will show you how to build a simple website, with no previous HTML or CSS experience. The final product will look something like this: Note: This tutorial was made for a workshop for Santa Monica College Computer Programming Club. Some information may be missing from the text.

# data[].attributes.headline
Tutorial - Practical exercise: step by step creation of a website using HTML5 and CSS3

# data[].attributes.subject
Tutorial - Practical exercise: step by step creation of a website using HTML5 and CSS3

# data[].attributes.attachment_link.readable_text
Things get a bit more difficult once you reach the CSS stage. Indeed, it takes work (and sometimes a few tricks) to obtain a result similar to the mockup. I say "similar to" as you'll never obtain the same result to the nearest pixel.

You need to grasp this clearly: the aim is to obtain the closest possible result, without seeking perfection. Even if you obtain what you consider to be "perfection" in one browser, you can be sure that there'll be differences in another (older) browser or on a computer other than yours. We're thus just going to do our best and that will already involve quite some work, as you'll see.

To format the design, I'm going to proceed in several steps. I'm going to deal with the following items, in the order indicated:

1. Custom fonts.

2. Define the page's main styles (website width, background colour, default text colour).

3. Header and browsing links.

4. Banner (representing the San Francisco bridge).

5. Main section of the page's body, in the center.

Custom fonts

For the purposes of the design, my graphic designer used three fonts on his mockup:

You can find these fonts in the file I got you to download above. If you haven't done this yet, I strongly recommend you download it now.

Most computers are provided with Trebuchet MS(though not necessarily all, in which case you can download it). The other two fonts are a bit special, however, and are unlikely to be on your visitors' computers. We're going to download them.

As you know, several versions of these fonts need to be provided for different browsers. Dafontonly provides the.ttfformat for downloading. On the other hand, FontSquirrelprovides a font generator to be used in CSS3 with@font-face: you send it a.ttf and the tool converts the file into any other format needed and even provides you with the ready to use CSS code!

I used it to generate the various versions of the two exotic fonts that I'm going to use. Then, in my CSS file, I added the code provided to me by FontSquirrel to declare the new fonts:

In addition to this, you have, of course, to make available the font files. As you can see, I've created a fonts subfolder for the various versions of my fonts.

Defining the main styles

We can now define a few global styles for the whole design of our page. We're going to define a default background image, font and text color, and more especially we're going to size our page and center it on the screen.

With#bloc_page, the block covers the entire page, so I set the width limits to 900 pixels. With automatic margins, the design will be centered.

If you want to create a design that fits the dimensions of the visitor's screen, set a width as a percentage instead of pixels.

I've used the CSS property text-transform: uppercase;(that we haven't seen before) to ensure that my titles are always written in uppercase. Indeed, this property changes the text to uppercase (it can also do the opposite with lowercase). Note that we could also have written the titles directly in uppercase in the HTML code.

The figure below shows you what you get for now with the CSS code. Although we're still a long way from the final result, it already feels a bit like we're "getting there".

The background and page limits start to appear

Header and browsing links

According to the structure I've suggested, the header also contains browsing links. Let's begin by defining the header and, in particular, the logo at the top left. We'll then see how to format the browsing links.

The header

We going to make a distinction between the header and the page body with a background image. The items are positioned using inline-block and we're going to customize the fonts and sizes. Nothing out of the ordinary for the time being.

The browsing links

The formatting of the browsing links is a bit more interesting. As you saw, I created a bulleted list for the links... but such a list is usually displayed height-wise, not width-wise. Fortunately, it's easy to change, as you'll see:

The main new thing is the CSS definition list-style-type: none;, which removes the round image used as a bullet. Each list item (<li>) is positioned as an inline-block, which allows us to place the links side by side as we wanted.

The other definitions don't contain anything out of the ordinary dimensions, colors, borders... All things you already know about. Note that I don't necessarily find the right values on the first try. Sometimes it takes some trial and error to obtain an appearance close the original mockup.

The figure below shows the result obtained using the latest CSS additions.

The header is laid out

The banner

So, let's now turn to an exercise that's a little more difficult but very interesting: the banner! Our mockup has a nice banner representing the San Francisco bridge. This banner on your website may need to change. As an illustration, here's the latest blog of our friend Zozor, who's just visited San Francisco.

The banner is interesting for several reasons:

it has rounded edges;

the description is written on a slightly transparent background;

the "See the article" button is implemented in CSS, with rounded corners;

a shadow gives volume to the banner.

Here's the code I used to produce the whole banner:

This code is fairly technical and full of CSS features. It's perhaps the most difficult part in building this page.

You can see that I've chosen to display the image of the bridge as a background image in the banner<div> block.

I've also given it a position relative to the banner, without using properties to change the offset... Why? Normally, a relative position without an offset serves no purpose... And yet, it was particularly useful to me in placing the "See article" button at the bottom right of the banner. In fact, I've placed the button in an absolute position inside.

Shouldn't the button be located at the bottom right of the page?

No, remember what I told you: if a block is placed in an absolute position in another block which is itself in an absolute, fixed or relative position, it will then be positioned inside this block.
Our banner has a relative position (without any offset). As the button has an absolute position inside, it's thus placed at the bottom right of the banner!

This technique is particularly useful and powerful in building a design. and should be remembered!

Final detail: for the banner legend, I've chose to use transparency with the RGBanotation rather than the opacityproperty. Indeed, opacity would have made the entire contents of the block transparent, including the "See article" button inside. I found it preferable to make only the background color transparent rather than the whole block.

The result is quite nice (figure below).

The banner is laid out

Looks great, don't you think?

To produce the colour graduation of the "See article" button, I've used a background image representing the graduation and I've repeated this image horizontally. You should know that there's a CSS3 linear-gradient property which allows you to produce graduations without having to resort to a background image. As its implementation is a bit complex for the time being, I've chose not to use it in this example, but you can find out about it if you want!

The body

The body, in the center of the page, in our case consists of a single<section> tag (but there could be several tags, of course).

No real difficulties as far as the body is concerned. The "About the author" block is positioned as an in inline-block. We'll play with the rounded corners and shadows and adjust the text margins and size a bit, and here we are!

The hard part here was to manage to place the arrow to the left of the "About the author"<aside>block to give the effect of a bubble. Again, our best friend is absolute positioning. The technique is the same: I positioned the<aside>block relatively (without inserting an offset), which then allows me to position the arrow image relative to the<aside> block (and not relative to the whole page). By adjusting the image offset, I can accurately place it where I want to the nearest pixel (figure below)!

The page body is laid out

The footer

It only remains for us to lay out the footer. It consists of three sub-blocks that I've produced by<div>to which I've assigned idto identify them better. These blocks are positioned with inline-block side by side.

A couple of small points about the footer:

I've used CSS3' multiple background images feature to separate the body from the footer. It includes three images: the separator, the small upwards arrow and a slight graduation.

I've changed the bullet of the "My Friends" list at the bottom right, using the list-style-imageproperty that allowed me use a custom image rather than the standard bullets. There are many specific CSS properties like this one and we can't look at them all one by one in this course, but now that you're used to CSS, you'll have no trouble learning how to use them simply by reading the annex listing the main CSS properties.

Our design is now completed (figure below)!

The footer is laid out

Ah, so you thought you'd finished? Unfortunately, there's still a bit of work to do: we have to test our website on various browsers. Ideally, it's best to do this at each stage in building the design. In particular, older versions of Internet Explorer (IE6 to IE8) need some attention as the result is not necessarily what was expected...

# data[].attributes.attachment_link.title
Tutorial - Practical exercise: step by step creation of a website using HTML5 and CSS3 - nttrungmt-wiki

# data[].attributes.attachment_link.description
Things get a bit more difficult once you reach the CSS stage. Indeed, it takes work (and sometimes a few tricks) to obtain a result similar to the mockup. I say "similar to" as you'll never obtain the same result to the nearest pixel.

# data[].attributes.attachment_link.description
does not involves too much grammar of Head First PHP & MySQL PHP and MySQL, so it is very suitable for readers who has no programming basis or has not a clear concept for websites based on database. As long as write codes following examples, you will reap no little benefit.

# data[].attributes.attachment_link.title
Teaching with App Inventor | Explore MIT App Inventor

# data[].attributes.attachment_link.description
Learn to build mobile apps with App Inventor for Android, then learn how to teach it!

# data[].attributes.attachment_link.readable_text
From PHP and MySQL For Dummies, 4th Edition

By Janet Valade

When writing PHP programs to create your Web database application and communicate with a MySQL database, you have many things to remember. You must spell code correctly and use perfect syntax. This Cheat Sheet provides a reference for quickly looking up the correct syntax for the code you use most frequently.

Use PHP Statements to Create Programs

PHP programs are a series of PHP statements, executed one at a time. Here's a list of the PHP statements (with syntax) that you use when writing PHP programs:

Communicate with a Database through PHP MySQL Functions

PHP communicates with MySQL databases by using a set of functions developed specifically for this purpose. This list shows the syntax of these frequently used functions.

Make MySQL Database Changes with the ALTER Query

The ALTER query is used to change the structure of a MySQL database. This list shows the syntax for the changes you are most likely to want to make:

Access and Adapt a Database with MySQL Queries

PHP communicates with MySQL databases by sending SQL queries. Here's a list of SQL queries, with their syntax, that you can use to access, view, and alter the database:

Knowing the MySQL WHERE Clause Format

The WHERE clause is used to modify a DELETE, SELECT, or UPDATE SQL query. This list shows the format you can use when writing a WHERE clause:

where exp can be one of the following:

Special Characters to Use in PHP Expression Test Patterns

Regular PHP expressions use patterns to test whether the input users submit when using online forms are in the correct format. This table shows characters you can use in patterns.

# data[].attributes.attachment_link.title
PHP & MySQL For Dummies Cheat Sheet - dummies

# data[].attributes.attachment_link.description
When writing PHP programs to create your Web database application and communicate with a MySQL database, you have many things to remember. You must spell code correctly and use perfect syntax. This Cheat Sheet provides a reference for quickly looking up the correct syntax for the code you use most frequently.

# data[].attributes.attachment_link.description
PHP tutorial covering PHP 5 installation on Windows, variables, constants, arrays, conditionals, functions, cookies, MySQL database connection, encryption, PHP and Ajax and more.

# data[].attributes.attachment_link.keywords[]
cascading style sheets (programming language)

# data[].attributes.attachment_link.title
HTML and CSS Tutorial Create Your own Complete Website

# data[].attributes.attachment_link.description
This is only for begineers. This is the video where you can see all about (full) HTML and CSS with in just 4 hour