My first html project

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Ravirs1/html-project-1

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

These are the most usefull website for a student. By using these website there is a probability that most of the student will learn many things.
There are also so many websites available you can search it on google.
For a web application developer point of view,
it is very important to start with HTML first and then move to CSS and then JavaScript.

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but «HTML 2.0» was the first standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01,
and this version was published in 2012.This is the basic building block of web application development. This is just simple text or basic building block.The latest version of HTML is HTML5.

CSS is used to control the style of a web document in a simple and easy way.

CSS is the acronym for «Cascading Style Sheet». This tutorial covers both the versions CSS1,CSS2 and CSS3,
and gives a complete understanding of CSS, starting from its basics to advanced concepts.CSS is the beauty of the web.

JavaScript is a lightweight, interpreted programming language.
It is designed for creating network-centric applications. It is complimentary to and integrated with Java.
JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.

Источник

How I Build My First Project in HTML and CSS

I have some people DM on Twitter asking me how I build my first project. So I figured I’d write this post. How everyone learns programming is unique and my approach is not the best. But it worked for me, so I believe it’s worth sharing. I have left JavaScript out as this will be a story for another day. So without any further ado, here are the exact steps I did to learn HTML and CSS.

Watch and code

I started from absolute zero when I go through the first video of HTML Crash Course from Traversy Media. I watched and coded along and while the video length is 1 hour, it took me 3 days because it was a new concept to me and wanted to pay attention as much as I can. The word HTML may seem like a big word and scary words but surprisingly it was easy to understand. It’s all about open tags and close tags. As long as you understand what each semantics does, then that is good enough. The second video I watched after HTML is CSS Crash Course from him again since I liked his teaching style. Similar to the first one, it also took me another 3 days to complete the tutorial. I was amazed at how CSS can turn any ugly websites into beautiful ones and giving a unique identity to these sites. The third video I watched after CSS is Build An HTML5 Website With A Responsive Layout and the most important one because from here I learn how he will use HTML and CSS to build a professional website and also make it mobile-friendly. While I was watching and coding along, I was shocked at how powerful these tools are. By the end of the video, I was thinking, «Hey, I can make a website!» Armed with HTML, CSS, and responsive web design tools, I am ready to build my first website!

How I picked a project idea

This step is not that hard really. Instead of sitting down and brainstorming project ideas, I simply just copy from existing websites. The main benefit of doing this is you are taking away the burden of coming up with designs, type of website, and more which is time-consuming. That way, I can skip all of these steps and just focus on polishing my HTML and CSS skills. What I choose to make is the clone of Postmates. I liked their designs and it looked like something that I can reproduce it. I also borrowed a few styling from Quiqup and added some of my original styles.

The building process

1. I used the finished codes from the last tutorial as the foundation for the project.
2. I split the project into 11 pages which includes Homepage, About us, log in, career, privacy policy, etc.
3. If there is something else that I want to build but I don’t know how I’ll go to W3Schools and learn those missing pieces.
4. When I got stuck, I’ll go to Google and type exactly the problems I have in the search box. I usually go to Stack Overflow, but any other sites will work fine.

After a month of building and hitting my head against the wall, this is the final result of my project.

I have intentionally left bad designs and codes behind because this project will serve as a reminder of how far I’ve come since the day I started coding and wanted to show you that I used to be bad in coding. It is living proof that everyone started from the bottom.

Conclusion

In a nutshell, what I did is watching Traversy Media’s crash courses videos on YouTube, and also mobile-responsive video just to see how these tools are put into practical use.

Then I used these newly acquired skills to build a website and got the project idea by copying existing platforms. Finally, I used Google to find ways to build a website and troubleshoot my problems.

Now that you know how I build my first project with HTML and CSS, I hope these will encourage you to build your website. I know this is going to be hard, but you can do it!

Do you still have your first project? If so, post it on the comments below to help inspire more code newbies.

Источник

Create Your First Local HTML/CSS Project

Introduction
In this article, we’ll cover how to take CSS skills and use them to create a basic web page built entirely from the tools you have on your computer. Before you proceed, you should already be familiar with the basics of text editors, local files, and directories.

Step 1: Create a Folder Structure For Your Web Page
Let’s create a folder structure to support your web page. A well-designed folder structure will help you quickly navigate to the HTML or CSS files that contain your code.

First, open Finder (in Mac) or Explorer (in Windows). Next, create a folder (also known as a directory) called DevProject. This folder will contain all of the files for your HTML and CSS project.
Open the DevProject folder. Inside, create the following items:

1. A new file called index.html (use your preferred text editor)
2. A new folder called resources

The index.html file will contain the HTML code for your web page, while the resources folder will contain all of the necessary resources needed by the HTML files (CSS files, images, etc.).

Next, open the newly created resources folder. Inside of this folder, create the following:

1. An additional folder named css The css folder will contain the CSS files needed to style your web page.

Finally, open the css folder you just created. Inside of this folder, create the following:

1. A new file named index.css (use your preferred text editor) The index.css file will contain all of the CSS styling rules that will be applied to your web page. This overall folder structure will help support your workflow as you add files or resources. At a high-level, here’s what it should look like:

*Step 2: Add Content To Your Web Page *
Great! With your folder structure, HTML, and CSS files all in the right place, we can add content to the web page.

First, open the index.html file in your preferred text editor. Next, add the required boilerplate HTML code:

After you add the boilerplate HTML code, feel free to also add the following items:

1. Your own title between the tags
2. Your own content within the tags. If you need some quick, pre-written content, feel free to use the following and modify as you wish:

Finally, open the index.css file in your preferred text editor. Add the following pre-written CSS rules to the file (feel free to modify as you wish):

Be sure to save your changes for both files!

Step 3: Link Your HTML File and CSS File
As it turns out, the HTML content you added will not be styled by the CSS rules unless index.html and index.css are linked together. In the

section, link the stylesheet to the HTML file.

You might be wondering why the href attribute is set to ./resources/css/index.css. This is because you must specify exactly where the index.css file lives within your folder(s) relative to where index.html lives (otherwise, the two files won’t link).

Again, make sure to save your changes!

Step 4: View Your Project
Great work — let’s take a look at your web page in the browser.

Open your preferred web browser. In the menu bar, click on “File” and then click on “Open File…” (or equivalent). Navigate to your index.html file and then click “Open” (or equivalent). The browser should load your web page. What do you see?

At this point, feel free to make changes to your HTML or CSS code. Keep in mind that in order to view any new changes you make, you’ll have to refresh your browser.

Review
You successfully learned how to:

1. Create a folder structure to support both your workflow and your web page
2. Add HTML content and CSS styling to respective files
3. Link the HTML and CSS files together
4. View your web page in a browser (and refresh the browser to view new changes)

In general, the four points above are a strong starting point for your own developer workflow.

As you learn more, you may modify the workflow to fit your specific needs. At this point, feel free to modify the content of the web page or create an entirely new project.

Источник