Google Project: HTML/CSS

Introduction

For this mini-project, you’ll deconstruct an existing web page and rebuild it. Don’t worry if the links don’t go anywhere and the search box doesn’t do anything when you submit it. The goal is to start thinking about how elements get placed on the page and roughly how they get styled and aligned. For some of you, this may be the first time you’ve actually tried to "build" something in HTML (very exciting!).

Using the browser’s developer tools (right clicking something on the page and clicking "inspect element" will get you there) will be your best friend. Build the page in a .html text file and open it in your browser to check it out. We suggest you use VSCode and the Live Server extension to launch your web page to the browser. Alternatively, you can try CodePen or jsfiddle.net).

Try These Before Starting

These skills will be helpful for you when you start building. Either try them yourself or at least make sure you know how to do it:

  1. Two ways to move a div around on the page
  2. Stick a div onto the bottom or top of the page
  3. Identify the background color of an existing webpage
  4. Grab the URL for an image from an existing webpage
  5. Center an element horizontally
  6. Identify three ways you can include your CSS styles in a page
  7. Understand how to use classes and ids to target CSS at specific elements on the page
  8. Build a very basic form (even if it doesn’t "go" anywhere)

Assignment

Instructions for the assignment can be found here.

Additional Resources

If you still feel shaky on your understanding of HTML and CSS, that’s okay! You don’t need to be an expert by any means yet. These resources should help if you want to shore up your understanding of things:

  • If you want to see the art of CSS, check out the CSS Zen Garden, which collects submissions that use identical HTML and modify only the CSS but turn out wildly different (and beautiful).

  • Read through Shay Howe’s HTML&CSS Tutorial. Lesson 1 gives a solid overview and you can do the whole thing for a more in-depth understanding.

  • Learn more about GitHub using this tutorial or read more in this article.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 01.12.2020

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Developer Tools

Introduction

All of the most popular modern web browsers include a suite of tools designed to help with the development of websites. They are sometimes referred to as the web inspector. These tools allow you to inspect the HTML, CSS, JavaScript and much more on websites you visit and build.

Why do you need to know how to use developer tools?

Knowing how to use your browser’s developer tools is an indispensable skill for a web developer. They allow you to easily and quickly track down the cause of issues and bugs, like problems with layout or other CSS hiccups. What might have taken an hour or even a few hours to track down and fix without the use of these tools often takes a matter of minutes or even seconds with the help of developer tools.

As you will come to see in the assignments, much, much more can be done with developer tools other than debugging CSS issues. They provide you with an incredibly powerful assortment of useful tools that will save you a lot of frustration and time as you develop your own websites.

Although they offer you so many useful capabilities, learning how to use the developer tools isn’t that difficult. It can feel clunky the first few times you use them, but with a little practice, you will soon find yourself comfortably using them to experiment and fix bugs with ease on your web pages.

Learning Objectives

Make sure you can do each of the following once you have finished the assignments:

  • You can open the developer tools in your browser.
  • You can select a specific HTML element on your page with your browser’s developer tools.
  • You can use developer tools to experiment with the CSS on specific elements of a web page.

Assignment

  1. Watch the next video that goes over the most useful features of the Chrome DevTools in some detail.

Duration: 11 minutes

  1. Watch the next awesome tutorial from LearnCode.academy on how to use developer tools effectively when working with your CSS. It talks a bit about Bootstrap, which you may not know about yet. Don’t worry about it at this point; just check out the stuff he’s doing to CSS in the DevTools. In particular, editing CSS in the browser in real time is a serious productivity booster compared to using your text editor and continuously refreshing to see the changes.

Duration: 12 minutes

Take a 10 to 15 minutes break and then complete the following interactive tutorials:

  1. Complete the following interactive tutorial to learn the basics of viewing and changing a page’s DOM using Chrome DevTools: Get Started With Viewing And Changing The DOM

  2. Complete the following interactive tutorial to learn the basics of viewing and changing a page’s CSS using Chrome DevTools: Get Started With Viewing And Changing CSS

  3. Learn about the Chrome Code Coverage Tool and how to spot and remove unused CSS and JavaScript code.

Here’s video showing how you can use the Code Coverage and spot unused CSS:

Duration: 5 minutes

Tips

While making changes to CSS and JavaScript files that are loaded via the link and script tags, it is advised to do a Hard-Reload (or Hard-Refresh as it is sometimes called) in order for the updated resources to load. If you are not seeing the expected results on your browser, even though you’ve update your CSS styling or JavaScript code, it might be that you haven’t saved the changes or that the cached versions of the CSS and JS files are still loaded in the browser.

There’s a nice setting in the Developer Tools (Chrome/Brave) that disables caching while the DevTools are open.

Disable Cache

UPDATED: 19.01.2021

Contributors:

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

HTML & CSS Basics

Introduction

HTML is the markup that contains all the actual stuff that a web page has. All the text on this page you’re reading right now lives inside HTML tags that tell your browser how to order the content on the page. Go on, right click any element on the page and choose "Inspect Element" to open up your browser’s Developer Tools and it will show you the structure of the page.

inspect HTML

CSS tells the browser if you want to display any of those tags a particular way, for instance, turning its background blue and pushing it a little to the left. In your Developer Tools, you can see the CSS styles in another panel, usually showing which specific properties were inherited from which lines of CSS.

styles panel

Learning Objectives

  • Why do we separate HTML and CSS?
  • What are classes and IDs (and how are they different)?
  • What are elements?
  • What are tags?
  • What are attributes?
  • What are forms?
  • What is a div?
  • What are selectors?
  • What are properties?
  • What are values?
  • What is the "query string" in a URL and what does it do?
  • What is the difference between "pixels" and "ems"?
  • How do CSS styles for a particular element get inherited? i.e. how does an element get its "default" styles?
  • What are two CSS attributes you can change to push an element around on the page?
  • What are the three different ways to include CSS in your project or use CSS to style a particular element?
  • What is the "default stylesheet" or "user agent stylesheet"?
  • Why use a CSS reset file?

What is HTML & CSS?

Watch these two wonderful introductions to HTML and CSS by the Harvard CS50 team. Estimated Total Time: 2 hours

Web and HTML

Duration: 30 minutes

BREAK: Take a 10 to 15-minute break before you continue. Try to reflect on what you learned on the previous video and take some notes on the most important concepts.

Web and CSS

Duration: 40 minutes

Use Agent Stylesheets & CSS Resets

Learn about your browser’s default stylesheet and CSS resets in the next videos. This is why there are some spaces that show up in your layout even if you haven’t specified CSS. Real developers almost always use a CSS reset to blow away the default stylesheet and let them work from scratch.

The CSS resets are a very important and common pattern, especially among the various CSS frameworks. Most of the CSS frameworks out there contain some sort of CSS reset code at the start. More about CSS frameworks in later chapters.

Duration: 5 minutes

Duration: 9 minutes

Web Accessibility – An Introduction

Watch the following quick introduction to one of the most important aspects of Web Development: Web Accessibility. You will be reading more on the subject in subsequent lessons.

Duration: 1 minute

Web Accessibility – The Importance of Proper Color Contrast

What is effective color contrast and why is it so important? Watch the next video to find out more.

Duration: 3 minutes

You now know why it’s really important to focus on web accessibility matters while developing for the web.

Take a quick break and dive into the following video that will walk you through the process of checking the color contrast in your web content.

Duration: 11 minutes

Additional Resources

Assignment

Follow the instructions here and submit your Pull Request in the Quiz below.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 28.04.2021

Contributors:

Thanks to:

Introduction to the Front End

Introduction

The "front-end languages" live in the browser. After you type an address into the address bar at the top and hit the enter/return key, your browser will receive at least an HTML file from the web server. That file will likely tell the browser to request a CSS file and a JavaScript file as well (probably many more than one, but we’ll keep it simple).

Each of these languages performs a separate but very important function and they work harmoniously together to determine how the web page is STRUCTURED (HTML), how it LOOKS (CSS), and how it FUNCTIONS (JavaScript). And keep in mind that your browser handles figuring out how to make these files into a functioning web page (not the server).

Front-end web development is NOT design (you won’t be playing around in Photoshop or anything), but a front-end developer does apply the work of designers to the web page by translating their well-designed layouts into real code. The front-end developer stands between the designer on one end and the back-end developer on the other, translating the design into code and plugging the data from the back-end developer into the right spots. He or she must also handle all the possible interactions that the user may need to make with the page.

On the front end, you will need to be highly conscious of who your user is and how they will be interacting with your web page, because you are building their gateway to your page or product. This may mean gaining a strong understanding of accessibility and things like responsive development down the line, but first you need to build up your toolkit and pick up the fundamentals of the front-end languages.

In the following lessons, you’ll get a healthy understanding of each of the three front-end languages (and jQuery, the most popular JavaScript library). To get warmed up, we’ll start at the high level.

Learning Objectives

Look through these now and then use them to test yourself after doing the assignment:

  • What is the role of HTML in a web page?
  • What is the role of CSS in a web page?
  • What is the role of JavaScript in a web page?

Study

  • Watch the following awesome video explaining the big picture of the three core web technologies: HTML, CSS and JavaScript.

  • Duration: 4 minutes

  • Read a brief intro to Frontend development from this interview with Nick Schaden.

    • Reading time: 5~10 minutes
  • Read about the role of HTML.

    • Reading time: 5~10 minutes
  • Watch the next video, which is another great introduction to how the various front-end technologies interact.

    • Duration: 1 minute

  • Get a high-level overview of how all three languages work together in MDN’s Getting started with the web. Learners should only read: Dealing with files, HTML basics, CSS basics and JavaScript basics. There is no need to implement the website; simply read about the process at this point.

    • Reading time: 5~10 minutes
  • Skills of a Successful Front-End Web Developer from Drupal (a CMS based on PHP).

    • Reading time: 5~10 minutes
  • Watch the next What is JavaScript? 2-minute introductory video.

    • Duration: 2 minutes

Resources / Tools

  • Bookmark DevDocs.io. Read the "Welcome" message. Massive API documentation collection that even works offline. Essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp)

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 19.01.2021

CONTRIBUTORS: