Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
- Article Categories
- Book Categories
- Collections
- Custom Solutions
- Log In
- Main Menu
Article Categories
- Main Menu
Book Categories
Home
Web Coding & Development All-in-One For Dummies
Author:
Published:
May 15, 2018
Overview
Learn the in-demand skills that let you turn lines of code into websites and apps
Web Coding & Development All-in-One For Dummies is a one-stop resource for would-be developers who need guidance on the languages and steps used to build websites and applications. Learn the coding ropes and expand your existing skillset with this easy-to-understand guide. In these complete mini-books, you’ll walk through the basics of web development, structuring a page, building and processing web forms, and beyond. Learn how to build a website or create your very own app with the advice of web coding and development experts. This edition expands JavaScript and CSS coverage while providing
new content on server-side coding and the development stack.
- Get essential knowledge of how web development works—even if you’ve never written a line of code in your life
- Learn HTML, CSS, JavaScript, and other languages essential for building websites and apps
- Discover how to make optimize your sites and apps for mobile devices
- Expand on what you already know and improve your employability
This Dummies All-in-One is great for you if want to develop coding skills but don’t have a programming background. It’s also perfect for professionals looking to brush up on their web development skills and get up to date on the latest trends and standards.
One of the handiest features of web coding and development is that once you’ve learned a few basics, you can apply those basics to any project. A good example is the underlying structure of a page, which uses the same set of standard HTML tags, no matter how large or small the project. It’s also worth your time to learn how selectors work, because you use them to save you time both when you’re writing CSS rules and when you’re writing JavaScript code.
About The Author
Paul McFedries is a true renaissance geek. He has been a programmer, consultant, database developer, and website builder. He's also the author of more than 90 books including top sellers covering Windows, Office, and macOS.
Articles From The Book
3 results
General Programming & Web Design
Articles
Both CSS and jQuery save you oodles of time by making it easy to format and program page elements. These two technologies become even more powerful when you use selectors to specify which elements you want to work with:
The class selector: If you’ve used the class attribute to assign a class name to one or more page elements, you can target those elements by using a class selector:
CSS:.
General Programming & Web Design
Articles
A jQuery interaction widget enables visitors to your page to use a mouse (or trackpad or touchscreen) to control, modify, or in some other way play with a web page element. Here's a quick look at the available effects offered by jQuery UI:
blind: Hides or shows an element as though the element was a window blind that you pull up or down.
General Programming & Web Design
Articles
All web apps perform a number of chores at the beginning of any task. On the back end, these initialization chores include starting a user session and connecting to the database, and on the front end the startup includes outputting the app's common HTML (especially the <head> section) and including the app’s common components, such as a header and footer.
General Programming & Web Design
Articles
It's safe to say that jQuery makes web development faster, easier, and even more pleasurable. Now let’s talk briefly about yet another jQuery library: jQuery Mobile, which offers widgets optimized for mobile web apps.
What is jQuery Mobile?
Most folks nowadays have a mobile device of some description, which means that most people are used to doing our digital duties using mobile interfaces.
General Programming & Web Design
Articles
It’s one thing to know about HTML and CSS and PHP and all the rest of web coding and development, but it’s quite another to actually do something useful with these technologies. A dynamic web page is one that includes content that, rather than being hard-wired into the page, is generated on-the-fly from the web server.
General Programming & Web Design
Articles
jQuery offers half a dozen animation effects: hide(), show(), fadeOut(), fadeIn(), slideUp(), and slideDown(), as well as their toggle versions: toggle(), fadeToggle(), and slideToggle(). That's a decent palette to work with, but apparently it wasn’t good enough for the jQuery UI team, who’ve stuffed no less than 14 extra animations into the Effects category.
General Programming & Web Design
Articles
Whenever you use JavaScript to program a while(), for(), or do…while() loop, there's always the danger that the loop will never terminate. This is called an infinite loop, and it has been the bugbear of programmers for as long as people have been programming. Here are some notes to bear in mind to help you avoid infinite loops:
The statements in the for() block should never change the value of the loop counter variable.
General Programming & Web Design
Articles
There’s one form event that you need to know about when coding dynamic web forms with HTML5 forms and it’s a biggie: the submit event, which fires when the form data is to be sent to the server. Here's the general syntax:
$(form).submit(function(e) {
Submit code goes here
});
form: A selector that specifies the form you want to monitor for the submit event.
General Programming & Web Design
Articles
CSS offers you the ability to let flex items grow. By default, when you set the justify-content property to flex-start, flex-end, or center, the flex items take up only as much room along the primary axis as they need for their content. This is admirably egalitarian, but it does often leave a bunch of empty space in the flex container.
General Programming & Web Design
Articles
Web designers often use CSS to allow flex items to shrink. The flexibility of flexbox means not only that flex items can grow to fill a flex container's empty space, but also that they can shrink if the flex container doesn’t have enough space to fit the items. Shrinking flex items to fit inside their container is the default flexbox behavior, but you gain a measure of control over which items shrink and by how much by using the flex-shrink property on a flex item:
<em>item</em> {
flex-shrink: <em>value</em>;
}
Here, <em>value</em> is a number greater than or equal to 0.
General Programming & Web Design
Articles
A jQuery interaction is a widget that enables page visitors to use a mouse (or trackpad or touchscreen) to control, modify, or in some other way mess with a web page element. For example, on this Web Design Playground site, one of the jQuery UI interactions is used to enable coders to use a mouse to resize the width and height of the editors and other windows.
General Programming & Web Design
Articles
Your JavaScript code will often use expressions that are blissfully simple: just one or two operands and a single operator. But, alas, “often” here doesn't mean “mostly,” because many expressions you use will have a number of values and operators. In these more complex expressions, the order in which the calculations are performed becomes crucial.
General Programming & Web Design
Articles
When planning a web app, the thoughtful developer remains aware at all times that the people who visit and use the app come with different abilities. When planning a web app, the ethical developer understands that, even though every person is different, they all have an equal right to use the app. When you give everyone equal access to your web app, you're making your app accessible.
General Programming & Web Design
Articles
A web app is something like the online equivalent of a desktop program, but that doesn’t mean you should build your web app to look good and work properly only on desktop-sized screens. Why not? For the simple reason that your app’s visitors will be using a wide range of device sizes, from PCs with gigantic displays several feet wide, all the way down to smartphones with screens just a few inches wide.
General Programming & Web Design
Articles
CSS can be used to provide fallback for page layouts. Web design will continue to evolve. But, for now, here’s a summary of the current state of page layout in today’s world:
Nearly 80 percent of browsers support Grid. This is too small a number to build a Grid-only layout.
About 85 percent of browsers fully support flexbox, although vendor prefixes are required.
General Programming & Web Design
Articles
Before your web app is usable, you’ll need set up the back end to handle users. Most web apps that manage users need to implement at least the following tasks:
Signing up new users: Includes not only capturing the user’s email address (to use as a username) and password, but also sending out a verification email to make sure the user isn’t a bot or spammer
Signing in users: Enables each user to access her own data
Signing out users: Prevents others from accessing a user’s account when his computer is left unattended
Updating user data: Enables each user to change her password and to reset a forgotten password
Deleting users: Enables a user to remove his account and data from the server
Here’s the bird’s-eye view of what you’ll be doing:
Build a class for handling user interactions.
General Programming & Web Design
Articles
Before you determine if web design and development is for you, you need to know the basics. If, as the King said very gravely in Lewis Carroll’s Alice in Wonderland, it’s best to “begin at the beginning,” then you’ve come to the right place. The goal here is to get you off on the right foot by showing you what web coding and web development are.
General Programming & Web Design
Articles
To help you decipher the error messages that JavaScript throws your way, here’s a list of the ten most common errors and what they mean:
Syntax error: This load-time error means that JavaScript has detected improper syntax in a statement. The error message almost always tells you the exact line and character where the error occurs.
General Programming & Web Design
Articles
One of the brow-furrowing problems you run into when using jQuery is trying to get an event handler to work on an element that you create with code. To see what this means, take a look at an example:
HTML:
<button id="add-div-button">
Click to add the div
<'/button>jQuery:
// Build the div element as a string and then prepend it
$('#add-div-button').
General Programming & Web Design
Articles
If you are hoping to undertake a web coding project, you will need to know how web forms work. A web form is a little data-gathering machine. What kinds of data can it gather? You name it:
Text, from a single word up to a long post
Numbers, dates, and times
Which item is (or items are) selected in a list
Whether a checkbox is selected
Which one of a group of radio buttons is selected
What happens to that data after you’ve gathered it?
General Programming & Web Design
Articles
There's a big difference between JavaScript variables declared outside of functions and those declared inside of functions. The following information explains this crucial difference.In programming, the scope of a variable defines where in the script a variable can be used and where it can’t be used. To put it another way, a variable’s scope determines which statements and functions can access and work with the variable.
General Programming & Web Design
Articles
There are, it often seems, almost as many security exploits as there are lowlifes trying to compromise our web apps. However, the most common security dangers fall into four main categories: SQL injection, cross-site scripting, insecure file uploads, and unauthorized access.
SQL injection
Probably the most common exploit, SQL injection involves inserting some malicious code into an ordinary SQL command, such as a SELECT or DELETE statement.
General Programming & Web Design
Articles
One of the handiest features of web coding and development is that once you’ve learned a few basics, you can apply those basics to any project. A good example is the underlying structure of a page, which uses the same set of standard HTML tags, no matter how large or small the project. It’s also worth your time to learn how selectors work, because you use them to save you time both when you’re writing CSS rules and when you’re writing JavaScript code.
General Programming & Web Design
Articles
When you develop a web page to look good and work well on a desktop-sized screen, there are a number of responsive tricks you can employ to make that same code look good and work well on a mobile device screen:
You can use percentages for horizontal measurements.
You can use relative units such as em and rem for vertical measurement and font sizes.
General Programming & Web Design
Articles
Local web development environments are a useful tool for web coders. In programming circles, an integrated development environment (IDE) is a collection of software programs that make it easy and efficient to write code. Most development environments are tailored to a particular programming language and come with tools for editing, testing, and compiling code (that is, converting the code to its final form as an application).
General Programming & Web Design
Articles
When planning a mobile web app, you always need to consider the impact of images, both on your design and on your users.
Making images responsive
On the design side, you need to ensure that your images scale responsively, depending on the screen width or height. For example, if the user’s screen is 1,024 pixels wide, an image that’s 800 pixels wide will fit no problem, but that same image will overflow a 400-pixel-wide screen.
General Programming & Web Design
Articles
JavaScript is an important element in web coding. When you first begin to work with JavaScript, you will likely see the code executed in one of three ways:
Automatically when the page loads
When your script calls a function
In response to some event, such as the user clicking a button
JavaScript also offers a fourth execution method that’s based on time.