- a JavaScript framework
- used for doing front-end web development
- created by Facebook engineers
- hugely popular
- very well-liked by developers
Since React is used for web development, first we're going to have to learn about web development. Modern front-end web development is based on three core technologies:
- HTML
- CSS
- JavaScript
- a markup language that the browser reads, and then renders that markup into what is displayed on the screen.
- holds the content of the document, like text, links, images, etc.
- a language for describing the visual styling and appearance of HTML documents.
- used for text formatting, backgrounds, colors, borders, etc.
- a programming language that runs in your browser
- was once used for simple things like hiding/showing content, but has become more and more important for web development
- React is kind of the pinnacle of this trend, where almost everything is being done in JavaScript.
My goal is to roughly spend 3 weeks on HTML and CSS, 3 weeks on JavaScript, which would leave 6 weeks for React and any other material I think is important for a software developer to know. But this is only an estimated outline, we'll be going at whatever pace the class as a whole thinks is best, so that everyone understands the material as we go.
Three months isn't a lot of time to learn web development and React from scratch, so things will move quickly. During class, I'll be stopping to ask if everyone is understanding the lesson so far, and to see if anyone has any questions. Please use these opportunities whenever you need to! Since you're all assumed to be brand-new at this, there aren't any bad questions in this course. Outside of class, please utilize our Slack channel for getting help.
I'll be providing readings and assignments here. I won't be checking if you completed the reading, but you'll only be making things more difficult for yourself if you don't. The assignments are for you to test your understanding and skills, so you won't be submitting them, but this is the best way for you to really learn the material.
The most important skills to develop are problem-solving and self-learning. I'm happy to provide help for anyone who needs it, but it's important to try different things, experiment, and use the internet as a resource. There's nothing I know that you can't find on the internet!
Everyone will create and demo their own React project at the end of the course. If you come up with an idea for a web application you'd be interested in creating, message me with the idea. Alternatively, I'll be uploading some web APIs that can be used to provide data for a web application, and you'd be responsible for creating the React application that receives, displays, and updates the data in whatever way you think is best. I'll provide more details on these soon.
You'll need an editor for writing HTML, CSS, and JavaScript. Although there are a lot of great options out there, I strongly encourage you to use Visual Studio Code. It's now by far the most popular editor for front-end web development, and it has great functionality. There are also a ton of great extensions available, which I'll explain how to install, and some of which I'll be using:
- Live Server
- Bracket Pair Colorizer 2
- Auto Rename Tag
I'll be using Chrome, mostly because it's currently the most popular browser and it has good development tools. But you're free to use whatever browser you want, although keep that in mind if what you see isn't exactly the same as how it looks in my demos.
Whatever browser you use, you'll need to get familiar with its developer tools. On Chrome, hit F12 to bring them up. I'll briefly go over the most important parts, like the Elements, Console, and Network tabs.
We'll be using git for source control. I'll be giving a brief tutorial on git and git commands, and you're free to either use a terminal or a GUI program like GitHub Desktop.
The lessons aren't broken down by class or any particular length of time. When I finish one lesson, I'll just move on to the next one, unless there isn't much time left in that class.
- All
Chapter 5:
- Paragraphs
- Headings
- Thematic Breaks
- Lists
- The Inline Element Roundup (Don't worry about learning all of these in-depth, just be aware of what's available)
- Generic Elements
- Character Escapes
Chapter 8:
- How to Use Tables
- Minimal Table Structure
- Table Headers
- Spanning Cells
- Row and Column Groups
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data
Because it involves CSS, don't worry about completing Step 7:
"Add a black border just around the column that contains all the planet name row headers."
Chapter 6: All
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
This mostly involves text elements, but since it also includes links I've put it here.
Using the <address> element is optional, and will cause your content to not match the provided example.
Chapter 7:
- First, a Word on Image Formats: High
- The img Element: High
- Adding SVG Images: Medium
- Responsive Image Markup: Low (for now)
Chapter 10
- Window-in-a-Window (iframe): Medium
- Multipurpose Embedder: Low
- Video and Audio: Medium
- Canvas: Low (for now)
- All
https://github.com/tupes/comit-react/blob/master/HTML/Forms/forms-assessment.md
Chapter 11
- All
Chapter 12
- A Few More Selector Types: High
Chapter 13
- Pseudo-Class Selectors: High
- Pseudo-Element Selectors: High
- Attribute Selectors: High
- Finally, External Style Sheets: High
- Basic Font Properties: High
- Advanced Typography with CSS3: Low
- Changing Text Color: High
- Text Line Adjustments: High
- Underlines and Other "Decorations": Medium
- Changing Capitalization: Low
- Spaced Out: Medium
- Text Shadow: Low
- Changing List Bullets and Numbers: High
Typesetting a community school homepage
- Specifying Color Values: High
- Foreground Color: High
- Background Color: High
- Clipping the Background: Low
- Playing with Opacity: Medium
- Background Images: High
- The Shorthand Background Property: Medium
- Like a Rainbow: Low
- The Element Box: High
- Specifying Box Dimensions: High
- Padding: High
- Borders: High
- Margins: High
- Assigning Display Types: High
- Box Drop Shadows: Low
- All
- Normal Flow: High
- Floating: Medium
- Fancy Text Wrap with CSS Shapes: Low
- Positioning Basics: High
- Relative Positioning: High
- Absolute Positioning: High
- Fixed Positioning: High
We won't be covering floats in class, but you'll need to use that for Requirement 7: "The image that is inside the article should have text wrapped around it." You should be able to accomplish all of the other requirements with flexbox, grid, and positioning.