1. create project2. create homepage3. style homepage4. display date5. build carousel6. expand carousel7. go live
We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

Build Your First Website

Learn the basics of web development and build your first website.

1. create project

Establish a solid foundation for making cool projects by learning the basics of web development.

You need the following to create your developer environment.

  • A code editor to write and edit your code
  • Local verson control to keep a history of your project just in case
  • Somewhere to store your version history online for safekeeping and sharing

VS Code, Git, and GitHub solve those problems.

visual-studio-code github-account

1. Download Visual Studio Code
2. Install Git
3. Sign Up For GitHub
4. Install Prettier
5. Create Project Root Folder
6. Add Index HTML
7. Add Text
8. View Text In Browser
9. Discussion

2. create homepage

Add boilerplate html code to your file and then add your first content in the body.

img-height-width-set

1. Add Boilerplate HTML
2. Add Browser Title
3. Add Content Titles
4. Size The Image
5. Add Links
6. Connect Links
7. Inspect Browser
8. Explore Styles In Inspector
9. Wrap Content
10. Discussion

3. style homepage

Add a css file and connect it to your html file.

Apply styles for layout and design to your homepage.

vanilla-javascript-portfolio-tutorial

1. Create Styles Folder
2. Add CSS File
3. Write Body Styles
4. Import Stylesheet
5. Create Title Wrapper
6. Vertically Align
7. Horizonally Center
8. Vertically Center
9. Create Links Wrapper
10. Align Links
11. Style Links
12. Style Image
13. Style Headings
14. Improve Links Wrapper
15. Import Font Awesome
16. Display Icons
17. Discussion

4. display date

Add a js file and connect it to your html file.

Display the current date on the page.

vanilla-javascript-date

1. Create JS Folder
2. Add JS File
3. Import JavaScript
4. Console Log
5. Create Date Message
6. Get Current Date
7. Format Date
8. Concatenate Message and Date
9. Add Date HTML
10. Get Date From DOM
11. Display Date On Browser
12. Position The Date
13. Design The Date
14. Animate Date
15. Discussion

Add a carousel to your homepage.

When a user navigates through the carousel, change the subtitle text and button styles.

button-carousel-js-2 button-carousel-js-2 button-carousel-js-2

1. Add Carousel Buttons
2. Flex Carousel Wrapper
3. Style Carousel Buttons
4. Get Buttons By Id
5. Add Click Events
6. Create Counter
7. Make Array of Subtitles
8. Display First Subtitle
9. Connect Right Button To Subtitles
10. Protect Right Button
11. Connect Left Button To Subtitles
12. Protect Left Button
13. Display Subtitles On Click
14. Disable Buttons
15. Discusion

When visitors click the carousel buttons, change the image and page styles and also update a progress bar of images.

javascript-carousel-1 javascript-carousel-2 javascript-carousel-3

1. Refactor Subtitles
2. Update Button Functions
3. Get Image By Id
4. Add Image Files
5. Update Images In Carousel
6. Create Page Style Alternatives
7. Get Page By Id
8. Update Styles In Carousel
9. Create Progress Bar
10. Import Progress Bar
11. Load Progress Bar
12. Display Progress Bar
13. Update Progress Bar
14. Display Progress Update

7. go live

Time to publish your website to the web.

First, push your code to GitHub.

Then, publish it to the web.

buy-me-coffee-javascript

1. Sign Up For Coffee
2. Add Coffee Button
3. Open Terminal
4. Check Git Situation
5. Initiate Git
6. Add To Git
7. Commit To Git
8. Create GitHub Repo
9. Create Git Main Branch
10. Add Git Remote
11. Push To GitHub
12. Publish Online