Recent Comments
No comments to show.
Tag Archives: html
Developer Skill #2: Debugging and Asking Questions
One of the most common mistakes made by programmers is forgetting to close a HTML element. SO, what do you do? Well, you look to see when the problem first starts. If your whole document is bold, then you can … Continue reading
Posted in Web Developer Course
Tagged css, debugging, difference, html, mistake, section 3, tool, validator
Leave a comment
Centering our Page
Steps to center a page: have or make a container and give it a width. HTML CSS <div class=”container”> .container { width: 800px;} </div> set margin-left and right to auto, so that the width is automatically placed and there will … Continue reading
Section 3 – Challenge #1
CSS elements used: background-color: #f7f7f7; (light grey background) border: 4px solid black; color: #777; (dark grey text color) cursor: pointer; (changes arrow mouse cursor to a hand pointer to click a button or link) font-family: sans-serif; font-size: 22px; font-weight: bold; … Continue reading
Using Dev Tools
Three ways to open the developer tools: Right click inside an online page. Then click “Inspect” or “Inspect Element:”. Hold Ctrl and Shift together and press “I”. On Firefox and Brave Web Browser, click the hamburger icon on the upper … Continue reading
Combining Selectors
Helpful Hint: To commit something out in CSS type: /* Things you don’t want the program to run */ OR in VS Code and Pycharm programs you can highlight what you want committed out and press the “Ctrl” then the … Continue reading
Inline, Internal and External CSS
Inline: The style is written inside the index.html code. Do not do. It is not the right way to style. Do not entangle your CSS files with your HTML files. It looks like: <h1 style=”color: blue”>The Code Magazine</h1> If there … Continue reading
Challenge #2
codepen.io is an online tool to quickly test out ideas. And if you set up a free account, you can save your work, save your https address, and then give that https address to someone else to look at your … Continue reading
Challenge #1
How to put all images into a new folder: Hover your mouse over your project’s name. Click on the “new folder” icon. It will open up a new box to write what you want to name your folder. Name your … Continue reading
Installing Additional VS Code Extensions
Image preview – shows small images on the left side of your HTML code in the gutter. Color Highlight – it styles css/web colors found in your document. Auto Rename Tag – it automatically renames paired HTML/XML tags Live Server … Continue reading