Congratulations! This is the first step in your journey towards a career in full-stack web development. There are many paths that you can take in this field and this unit is the foundation for all of them. Every full-stack web developer must master HTML and CSS, as well as learn how to program browsers, servers, and databases.
You have several choices for the programming language that you use for building and deploying full-stack web applications, including JavaScript, PHP, and Python. This course focuses on JavaScript. We’ll use it to program both the browser (aka the client) and the server.
Regardless of the programming language you use, two tools that every developer uses on a daily basis are the command line and version control. The command line allows developers to quickly and efficiently interface with their operating system and software. To begin, we'll use the command line to navigate the file tree and create directories and files. Later, we'll use it to install software dependencies and run servers, among other tasks. Version control is an approach to managing changes in files without the need to make multiple copies of those files. We'll learn Git, which is the most popular version control system. Git integrates with GitHub.com, a site for developers to host and share their code. We will deploy our first website using GitHub Pages.
The first, and perhaps most important, file we'll create is index.html, which is the default entry point for any web application. All of our subsequent work will build on this initial starting point. The file suffix .html refers to HTML, or Hypertext Markup Language. HTML allows us to format webpages and text in a similar way to how a word processor formats documents and the text inside them. However, the biggest difference between HTML and a word processor is the ability to link between any document that's on the web, anywhere in the world. This is the "hypertext" in HTML.
Though HTML is enough to create a simple website, it falls a bit short in the design department. So we'll add color, fonts, and element positioning by adding CSS (Cascading Style Sheets) to our HTML files to make them visually dynamic. In the next unit, we'll learn CSS frameworks that can expedite our development process.
Subsequent units will build on this foundation of HTML, CSS, and version control as we add JavaScript, servers, and databases to our stack to build interactive web applications.
The following topics will be covered in this unit:
-
Command-line basics
- Navigating the file tree
- Creating, copying, and removing files and directories
-
HTML
- Semantic elements, tags
- Attributes
- Best practices: indentation, file naming conventions and directory structure
-
CSS
- Order of importance
- Class vs. id
- Selectors
- Typography
- Box model
- Display
- Positioning and floats
- Color: hexadecimal, rgb and named
- Flexbox
- Grid
-
Git & Git workflow
- git clone
- git add
- git commit
- git branch
- git push
- git pull
-
GitHub
- Create a repository
- Deploy to personal pages
You will be employer-ready if you can answer the following questions:
- What does it mean to be a full-stack web developer?
- What is the relationship between HTML and CSS?
- What is Git workflow?
You will be employer-competitive if you are able to:
- Build and style static webpages with semantic HTML and CSS
- Implement best practices and standards when structuring HTML files using nested elements, indentation, comments, and line breaks
- Implement CSS styling via class, id and element selectors using external stylesheets, inline styles and embedded style tags
- Explain the "cascading" in Cascading Style Sheets and implement the box model for HTML elements
- Explain the value of version control and use Git workflow to initialize projects, track changes, and host via remote server
- Perform common commands via the command line to interface with the operating system, such as navigating the file tree and creating and deleting files and directories
- Execute live deployment using GitHub Pages
Take the provided codebase and refactor it to make it accessible. Don't forget the cardinal rule when working with someone elses code: "Always leave the code you are editing a little cleaner than you found it"
© 2019 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.
