Now that you have a handle on the basics of structuring content for an HTML file:
- Let’s discuss building more robust HTML forms
- Let’s start using our devtools
HTML Guide and form structure
- Chrome Dev Tools Docs
- The Basic of Chrome Dev Tools <!– Accessibility
- MDN Accessibility
- MDN Element Reference –>
Forms are an important part of a website. They allow users to send data to the web site. Most of the time that data is sent to the web server, but the web page can also intercept it to use it on its own. Forms are comprised of the following base elements:
Your Challenges (2)
Partner up and answer the following questions:
- What is the attribute
forindicate on the
labelelement? Do you always have to use it? Why or why not?
- What are 5 values for the
typeattribute of an
inputelement and how do they work?
- What is the significance of the
nameattribute in a form?
- What is a
- Why would a
legendelement be important?
Copy the form code below into your own Pen, and then refactor as follows:
- Validate for email type
- Add a set of radio buttons with at least three options - only allowing one to be selected at a time
- Include placeholders for name, email, and message
- Add a drop down for favorite color with at least three options
- Use an input for submit instead of a button
# Chrome Dev Tools
Debugging your front-end code can be an intimidating part of the development process, but it’s also one of the most powerful skills you can acquire Developers of all levels spend a significant amount of time troubleshooting code, but the more comfortable you are with debugging tools, the easier it will be to isolate, identify and fix broken code.
Take 5 minutes to read through this section of the chrome devtools docs.
### Developer Tools One of the first tools you should familiarize yourself with when doing front-end development are the built-in browser DevTools. To open developer tools in Chrome:
- (or) Right click on the browser window and select
- (or) Select
Viewin the navbar, then
Personally I find that pinning the dev tools to the upper right is the most convenient. (You can also expand them into their own window.)
Once you have your DevTools window open, you’ll notice a toolbar across the top with several different tabs. Clicking on these tabs will bring you to different debugging panels, each built to help troubleshoot specific areas of your front-end code.
As mentioned earlier, there are a lot of places on the front-end where code can go wrong. This means the first and most important step in solving a bug is isolating the problem. DevTools has already done some of this step for us by categorizing the most commmon areas where developers run into problems, and providing us with specific debugging panels for each.
For now, we’re only going to focus on the first panel: Elements.
The Elements Panel: Debugging HTML, CSS & DOM Events
- debugging layout and styling issues
- checking DOM Events
The elements panel lets you view the entire HTML source of the current page you are viewing. From here, you can edit, add or remove content and elements directly on the page. Though your changes won’t be saved (any changes made here will be lost upon refreshing the page), sometimes it’s helpful to make tweaks directly in this panel so you can see what effect the changes will have on your application before you implement them.
Selecting Elements to work with
You’ll notice hovering over an HTML element in the devtools panel will also highlight that element on the page. This makes it easier to find and select the content you’d like to work with.
You can also select elements directly on the page by clicking the icon in the toolbar, then hovering over the element on the page. This will automatically bring you to the corresponding code for that element in the devtools panel.
If you’re having trouble finding the element you’d like to work with, you can search through the entire HTML with
Cmd + F. You’ll notice a searchbar appear at the bottom of the panel where you can enter any string to find a match. This is useful if you’d like to search for an element by a known ID or class.
Directly from the elements panel, we can edit the HTML and see the changes reflected immediately. (Again, these changes won’t be saved to your codebase, but sometimes it helps to see the tweaks as you make them before committing to them.)
Let’s work with the following edits on girldevelopit.com:
- Change the headline to read: “Just Do It. Write Code”
- Hide the element that contains the map
- Delete the press logos section
- Place the top nav of “supporters” in its hover state
- Change the “flourish” logo in the headline to one of puppies