MODULE 10 - More CSS to your Website
Text styles practice
The following are some example values that may prove useful.
Color
red
blue
green
pink
Font-family
Arial
'Arial Black'
'Comic Sans MS'
Impact
'Trebuchet MS'
'Times New Roman'
Font-size
Practice with sizes between 8px and 108px.
Practice with colors above.
h1 {
font-family: "Comic Sans MS";
font-size: 84px;
color:aqua;
}
p {
font-family: Arial;
font-size: 20px;
color: darkslategrey;
}
Within this Repl practice to test different values to change the presentation of the HTML page.
Learn more - https://htmlcolorcodes.com/color-names/
Check out these Color Names to see all 140 named colors. It is useful to know and understand in case you work with other developers that use colors as a shortcut in assigning colors.
With that said, there is so much more to learn about colors on the web. At the moment, you are just learning the basics so we can continue on.
I-We-You Exercise
Present your website with all the HTML/CSS and images Within this Repl and update the presentation to the headings and paragraphs using the CSS properties and values above to try it on your website.
MODULE 11 - Github basics and Your Live Website
When you are working with a team of developers for the first time, learning Git can be incredibly challenging.
Git is a version control system that is part of pretty much every modern development process.
In this tutorial, you would learn how to use all the basic Git concepts and how to make your site live. Everyone must showcase their website, one by one! Let's go!!
Step 1: Complete your website on repl.it
Step 2: Click the 3 dots on repl.it and scroll to download as zip folder
Step 3: Open New Folder on your laptop and copy/paste the files and images into that new folder
Step 4: Create a github account or login if you have one.
Step 5: Create a new repo and name it your food website
Step 6: Check the Add README file and click initial commit
Step 7: Go to settings and scroll down to change to main branch and save.
You are all set! Scroll up to find your live web link!
I-We-You do Exercise - Your Website showcase
How to use Github to build a team website
Take Home Assignment - The Scenario
You are working on a team to release the Honda New Sedan 2018. New Sedan has been one of Honda's most popular vehicles for the last 20 years, and your team is under pressure to make it even better.
You are the body designer. In other words, you need to create a body design that works in tandem with the new features that the interiors team is putting in the car.
Although you might have a great plan, it has to work together with all the new gadgets that the interiors team is working on.
How can you organise your workflow, so it accommodates all parties?
The Different Stages of Design
As you are developing the body for the 2018 version, there are really four versions of the design that exist at any given time.
The New Sedan 2020 is out on the market and the only version the customers know about. This represents the live version.
Every team contributes to the latest prototype of the 2018 sedan. This is the version that will eventually go live once all parties agree. This represents the remote repo.
You have developed the latest complete version of the body that you have yet to present to the team. It takes into account suggestions you have gotten from other teams. But you still need their final approval before adding it to the latest prototype. This represents the local repo.
And finally, you have an untested plan that is on your drafting paper or in a clay model. It has not even been reviewed yet to see if it meets all criteria. But you think it could be even better than all your previous designs! This is the staging area.
Each stage represents a different level of commitment to the body design.
Similarly, in your codebase, your code passes through four stages before it goes live. Just like in the car design process, this is a good thing! You would not want to draft up a car design, say “this looks great!” and immediately decide that it must be the final 2021 design. The entire team must decide if your design works in harmony with the changes they are making. It is a democratic process!
Your Team Project Instructions
Now that you're comfortable poking around a codebase, it's time for you to write some of your own code with a team. Your first client is Classvisa Batch One. Our web developers are not available, and we need your help. Let's go!
For your team project, you are going to be divided into groups and someone would volunteer as a team lead.
Each team would be assigned a simple website project and the team would choose from a list of projects to build. One of your team member would showcase your project and give an overview of your project in the next class.
Let’s take the next steps, together. Schedule an Orientation video call with a member of our cofounding team this Saturday before or after your test.
Once you sign up for a meeting time above, you’ll receive a calendar invite with the link to access your meeting. During the meeting, we discuss the next steps such as timeline, goals and other resources you now have at your disposal.
This is very important for the next phase. Let's find you a great mentor who you'll meet with once per week. Let us know the times that reliably suit your schedule.
MODULE 12 - Showcase Your Project
Congratulations! The Good news is you have come to the end of the first stage. The client is happy, and I'm super impressed, too. 😃
Pair Programming
Pair programming is a well-known practice where two developers code together on a single computer towards a common goal (e.g. implement a new feature, or solve a coding challenge in this case).
In remote pair programming, you do the same thing, but each one of you is working from a different computer and connected to each other using a video conference. This is what you would be doing a lot in the next stage. Let us show you how this works.
I-We-You do Exercise
Once you are done with your assignment, submit your github repo link, your Live food website github link and your project's Live website github link Submit Here
Entrance Test
So far, you learnt Javascript - how to store information in variables, how to use simple operators and adding comments to your code. Also, you have built an HTML/CSS website and link JS to the website. Now is time to test your knowledge with the following tests. Click to start!