Core Web Development 1: Get used to the basics
- 12 hours on-demand video
- 26 downloadable resources
- 28 coding exercises
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Create a web document in HTML
- Design a web document with CSS
- Deploy a web to a web server through Amazon Web Services
- Get your project under version control
- Use a library Bootstrap to speed up your design work
- Use an online development environment Cloud 9
The 2 issues novice learners come to have
1) There is too much to learn
2) They learn from technology oriented people
The suggested orientation for novice learners
- Try to find learning resources mainly focusing on the basics
- Stop learning from the learning resources that don't focus on the basics
Brief introduction to the course
Introduction to Web Development
Creating a web in HTML
Deploying a web
Designing a web with CSS
Designing a web with Bootstrap
The Web and the Internet
The Internet is a giant and global network connecting billions of computers. The Web is a kind of system that is on the internet.
Web development means creating HTML documents to put it briefly. HTML is a computer language that produces web pages.
How the web works
Web browser asks a web server for a HTML document. This is called Request. When the web server receives the request, it locates and delivers in its' storage the HTML document that the web browser requested. This is called response.
Online code editor
- Online code editor is a development tool that enables you to write code online for programming.
- You will be using Cloud 9 for learning the web development.
1) Basic grammar of HTML
- HTML document consists of the tag and the content.
- The tag consists of a start tag and an end tag.
- The <!DOCTYPE html> indicates that the document is written by HTML 5.
- The element represents a tag and a content combined.
- The tag can be nested.
2) Basic grammar of HTML
- The html tag is the root of HTML document.
- The head tag contains general information about the document.
- The content of a head element is important information in terms of search.
- The Title tag displays a title of the document on the tab of web browser.
- The body tag is responsible for creating the contents displayed in the browser screen.
- The h1 tag defines a heading.
- The p tag defines a paragraph.
HTML Elements: Heading & Paragraph
- There are 6 six heading tags, of which the most important heading is the h1 tag.
- The hr tag is used to separate a content.
- The p tag ignores rendering line break and more than 2 spaces.
- If you want to renders a line brake, use the br tag.
- If you want to render text with many line breaks and spaces, you can use the pre tag.
Text Formatting and Link
- The strong, the em, the mark, the del tag render the text with a special meaning.
- The a tag connects two webpages.
- The HTML element contains an attribute.
- The attribute provides additional information about the element.
- The attribute consists of a name and a value.
- The a element has a href and a target attribute.
- The href attribute provides address information of the linked page.
- The target attribute determines where the linked page opens.
The image element
- Use the HTML 'img' element to define an image.
- Use the HTML 'src' attribute to define the URL of the image.
- Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed.
- Use the HTML width and the height attribute to define the size of the image. It's recommended to use the only one attribute of them not to break the proportion of the image.
- The image size can be adjusted by percent in addition to pixel.
List & Table
- Use the ul element to define an unorderd list
- Use the ol element to define an ordered list
- Use the li element to define a list item such as an image or a link
- Use the table element to define a table
- Use the tr element to define a table row
- Use the td element to define a table data
- Use the th element to define a table heading
HTML5 Semantic Elements
- HTML5 has semantic elements to make the content of web document more clear.
- The header element is an introduction area of web page
- The <nav> element is an area where content lists or navigation menus are displayed.
- The section element renders a section of the document
- The article element is used to contain independent content
- The footer element is a text such as name or contact information displayed at the bottom of each page.
Web Development Process
- Web development process helps us to do web development more efficiently.
- Web development process consists of six phases. We will use the only two phases that are the design and the implementation.
- Design tools offer powerful features, but you can learn them later when you get used to web development.
- It's enough for you to design with just paper and a pen.
You should be able to make the web page into multiple pages with a navigation menu by yourself. Just as we did in the previous lecture, divide the web page you created in the assignment 1 into several pages and add a navigation menu and connect all the pages to each other.
Introduction to Deployment
- We need a web server to serve the web so that people can see it in public.
- Web hosting means that web server serves a web.
- When developing a web, we usually separate the development environment and the production environment.
- Deployment means that we deliver the web we create to the production environment .
- To serve the web, you need to rent a Web server.
- A company that lend a web server is called a web hosting company.
Amazon Web Services
- Cloud computing means using virtual computers over the Internet.
- Cloud computing is a technology suitable for Internet applications that need to be serviced for unfixed number of users.
- Amazon Web Services is based on cloud computing.
- With Amazon Web Services, you can deliver your web services more stably to people even on the busiest day like Black Friday.
- Because Amazon Web Services is reliable and easy to use, it helps us focus more on web development.
Getting ready to use AWS
- In order for you to be able to complete the sign up process to AWS, you need your own credit card.
- AWS charge you to your credit card for the services you use.
- AWS offer an opportunity to new subscribers free of charge for a year.
- Nothing gets charged if you don't use any service.
Deploying a web to S3
- S3 is a storage service.
- The bucket means a top-level folder that you create in S3.
- Procedure for hosting a static Web sites using S3 is as follows.
1) Create a bucket and upload the files of the web to it.
2) Configure the bucket to enable static web hosting.
3) Create a bucket policy so that people can access the web.
Introduction to CSS
- CSS is a language that visually designs HTML document.
- You have to link CSS file to HTML document in order to design the document.
- The link tag is used to link CSS file to HTML document.
- The CSS code has 2 parts that are a selector and a rule.
- The rule in CSS has 2 parts that are a property and a value.
- HTML element inherits rules from its' ancestors.
- The inheritance helps get rid of repetition in programming.
- Repetition is bad in Programming.
- The cascading means in CSS that more specific rules are applied first than the general rules.
The Text Related Properties
- You should use the text-align property to align text.
- The text-decoration property is used to decorate text.
- You can set the font size by both the relative unit and fixed unit.
- You can use a dummy text for your web development.
CSS Properties: List and Table
- Use the list-type-type property to hide the bullet markers of the list.
- You can give a
styling to the table by this rule.
border: 1px solid gray;
- 1px means a width of the border, solid means a type of the border and gray is a color of the border.
- You should use a comma to select multiple HTML elements to avoid code repetition.
The Box Model
- The box model is a theory that every HTML element is regarded as a box.
- According to the box model, HTML element is surrounded by the 4 kinds of boxes that are the margin, the border, the padding and the content box.
- The content box is an area where a content such as a text or an image occupy.
- The padding box is an area that is between the border box and the content box. You can control the white space around the content box by the padding.
- The border box surrounds the padding box. It's usually used to draw a line around the padding box.
- The margin box is a box that is among the elements.
- Usually the padding and the margin are used as a white space to give a better looking design to a web page.
- The width of a HTML element corresponds to the width of the content box.
The box model related CSS properties
- The border-style property specifies what kind of stlye is used to display the border of an element.
- The box model makes it possible to decorate each 4 sides of the box.
- The longhand property offers a better readability. And the shorthand property can shorten the amound of the code.
The box model related CSS properties: Margins
- You can set the margin property of an element to auto when you want to align it to the center. Of course the element's width should be set to some fixed value because no remaining blank spaces will get split otherwise.
- You can use the max-width property to set the maximum width of an element.
Links, Display and Selectors
- You can give a different styling to a link with a state. The a element has 4 kinds of states.
- Every HTML element has a hover state.
- There are a block level element and an inline level element in HTML.
- A block-level element always starts on a new line and takes up the full width available. So it doesn't allow other elements placed on the same line.
- An inline-level element, on the contrary, not always starts on a new line. And it doesn't take up the full width available but just the width of itself. So it allows other elements placed on the same line unlike the block-level elements. It doesn't have the box model properties.
- In order to select several kinds of elements at the same time, you should use commas.
- In order to select a descendant of an ancestor element, you should use space.
- Version control makes you create codes without worrying about losing your codes.
- Version means a meaningful change.
- A repository means a storage where precious artifacts get saved with their version information.
- A repository should be treated as holy.
- Git is a version control tool for a local repository.
- Github is a platform for a remote repository.
- Git manages a file by its' state. The states are each committed, modified and staged.
- Developers usually use Git in the Command Line Interface environment.
- You don't have to install Git in Cloud 9 because it was already installed.
- In order to use Git, you should set your user name and email to Git first. And then you should make your work folder as a git repository.
- Git divides a file into tracked or untracked.
- We can use a Github public repository for free as our remote repository.
- We can gaurantee our codes never get lost by copying what's in a local repository to a remote repository.
- This is a precedure of how to use github. First, create a github public repository. Second, connect your local repository to the Github repository. Third, push your files to the github repository.
- You can compare 2 versions both in Git and Github.
- You can set a cache in Git so that you don't have to enter your Github account everytime you push to Github.
- You can clone your remote Github repository to your new workspace folder.
Library and Bootstrap
- Use a library such as Bootstrap instead of your doing everything from a scratch. It will reduce your working hours a lot.
- Bootstrap is a library that helps web developers do web design easily.
- You should have some experience in using the web
Learning Web Development is NOT easy
Learning about web development is never easy because it requires knowledge of multiple languages, programming methodologies, computer science theories and getting used to many development tools. You also need to get lots of development experiences under your belt to finally be able to create a decent web. As a matter of fact, all these things require a lot of discipline of you.
Build up a Foundation in the only Basics
So you should get a foundation in the basics first and then later dive deep as a specialist in an area that appeals to you. This course has been designed specifically for the complete beginner who wants to get a strong foundation of web development. Basically you will learn a few selected very basics of web development technologies. The course includes:
- 93 Lectures
- 28 Coding Exercises
- 13 Quizzes
Contents and Overview
This course has 6 sections and each section deals with the following subjects.
Section 1: Introduction to Web Development
Section 2: Creating a web document in HTML
Section 3: Running Your Web by Deploying it to a Web Server
Section 4: Designing a web with CSS
Section 5: Safeguard Your Project with Version Control
Section 6: Improving Productivity by using a library Bootstrap
To summarize what you will be able to do by the end of the course, you will be able to create a web document in HTML and design it with CSS and Bootstrap. You will be able to get your web development under version control using Git and Github. And finally, you will be able to deploy your web to a web server so that everyone can see you web in public.
The Course designed for the Novice
What I focus on as an instruction designer when designing a course is get students get a strong foundation in the basics through practices. So you will be able to understand basic concepts of web development first through the lectures, then make sure if your understand them correctly through the quizzes, practice what you learn through the coding exercises and work on your own project as a course assignment.
This course has been particularly designed for novice learners who want to learn creating a web. The course focuses heavily on the basics. And you will not be surprised or discouraged by the not explained jargons or jumping to the higher difficulties all of a sudden.
- Any beginner who wants to create value through creating the web
- Any beginner who is struggling with difficult learning resources
- Any beginner who wants to have a good start to the long journey of learing web development