Hello! My name is Mei’lani, and I am a curriculum development intern at Code.org, as well as a computer science student at Cascadia College. One of the most exciting aspects of computer science for me is the ability to create anything I can imagine. I’ve built some fascinating websites on topics I care deeply about, and I love how this medium allows for personal expression in so many different ways.
Websites are everywhere in our daily lives. They are our go-to sources for news, keeping in touch with friends, learning new things, and sharing our personal stories. While you might currently be using websites crafted by others, soon you’ll have the skills to become a website creator yourself. This will empower you to bring your unique ideas to life and share them with the world.
To embark on this journey, you’ll be using Web Lab, a powerful tool designed to help you build your own websites. Web Lab offers features similar to those used by professional web developers, providing you with a robust platform to create and innovate.
When you begin a project in Web Lab, you’ll find an instructions section that guides you through your current task. Once you’re comfortable, you can minimize these instructions to concentrate on your work. Below the instructions, you’ll see a list of files and images that will form the components of your website. Just like a news website has different sections for various topics, your website will eventually consist of multiple pages, each represented by a file in this list.
Every new project starts with an index.html file, which acts as the main page of your website. By clicking on this file, its contents will appear in the workspace, where you’ll develop your site. Begin by adding a title at the top of your page, followed by a paragraph that describes it. As you type, some changes will automatically reflect in the preview area. If a change doesn’t appear immediately, simply click the refresh button in the preview area to update it.
Initially, you might notice that all the content on your web page appears together, which isn’t ideal. However, don’t worry! You’ll soon learn techniques to better control the layout and appearance of your content, making your website both functional and visually appealing.
Web Lab is your gateway to becoming a proficient web developer. By exploring its features and experimenting with your ideas, you’ll gain the skills needed to create engaging and dynamic websites. Embrace this opportunity to express yourself and share your passions with the world through the power of web development.
Start by using Web Lab to create a personal portfolio website. Include sections such as an “About Me” page, a “Projects” page showcasing your work, and a “Contact” page. This activity will help you apply the basics of HTML and CSS while allowing you to express your personal style and interests.
Form small groups and collaborate on a website project. Each member can be responsible for different sections or pages. This will give you experience in working as part of a web development team, similar to real-world scenarios, and help you understand the importance of version control and communication.
Spend time exploring the advanced features of Web Lab. Try incorporating multimedia elements like images, videos, and interactive components into your website. This will enhance your understanding of how to create dynamic and engaging web pages.
Design a web page that looks great on both desktop and mobile devices. Use CSS media queries to adjust the layout and style for different screen sizes. This activity will teach you the principles of responsive design, which is crucial for modern web development.
Present your website to your peers and provide constructive feedback on each other’s work. Focus on design, usability, and functionality. This will help you develop critical evaluation skills and learn how to improve your web projects based on user feedback.
Here’s a sanitized version of the provided YouTube transcript:
—
My name is Mei’lani. I’m a curriculum development intern at Code.org and a computer science student at Cascadia College. I’ve always enjoyed the ability to create anything I want through computer science. I’ve made some exciting websites on topics I’m passionate about, and I appreciate the various ways I can express myself through this medium.
Websites are ubiquitous; they serve as the primary source for news, keeping up with friends, learning new information, and sharing personal experiences. Currently, you might be using websites created by others, but soon you’ll learn how to become a website creator, empowered to make and share something new with the world.
To achieve this, you’ll be using Web Lab, a unique tool that enables you to create your own websites with capabilities similar to those of professional web developers. The instructions section provides guidance for your current project, and when you’re ready, you can minimize the instructions to focus on your work.
Below the instructions, Web Lab displays a list of files and images that will be part of your website. Just like a news website has different sections for various topics, your website will eventually have multiple pages based on the files stored here. To edit a web page, navigate to the appropriate file name corresponding to that page.
Every project begins with a single index.html file, which serves as the main page of your website. Clicking on the index.html file will display its contents in the workspace, where you will develop your website. You can start by adding a title at the top of your page, followed by a paragraph about it. As you type, some changes may appear automatically in the preview area. If a change doesn’t show up right away, simply click the refresh button in the preview area to update it.
You may notice that all the content on your web page appears together, which isn’t ideal, but don’t worry. You’ll soon learn how to better control the layout and appearance of your content.
—
This version maintains the original message while removing any informal language or unnecessary details.
Web Development – The process of creating and maintaining websites, involving aspects such as web design, web publishing, web programming, and database management. – Learning web development is essential for building dynamic and responsive websites.
Websites – Collections of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server. – University students often create personal websites to showcase their portfolios and projects.
Coding – The act of writing instructions for a computer to perform specific tasks, using programming languages. – Mastering coding is crucial for developing software applications and solving complex problems.
Curriculum – A structured set of courses or learning experiences in a particular field, often including coding and software development for computer science students. – The computer science curriculum includes courses on algorithms, data structures, and web development.
Create – To bring something into existence, such as developing software or building a new application from scratch. – Students are encouraged to create innovative solutions to real-world problems through their coding projects.
Tools – Software applications or platforms that assist developers in writing, testing, and debugging code. – Integrated Development Environments (IDEs) are essential tools for coding efficiently.
Project – A planned set of tasks or activities aimed at achieving a specific goal, often involving coding and software development. – The final year project requires students to develop a fully functional application using their coding skills.
Layout – The arrangement of visual elements on a web page, which affects the user experience and usability of a website. – A well-designed layout is crucial for ensuring that a website is both attractive and easy to navigate.
Skills – The abilities and expertise required to perform tasks effectively, such as coding, debugging, and problem-solving in computer science. – Developing strong coding skills is essential for a successful career in software engineering.
Content – The information and experiences that are directed towards an end-user or audience, especially on websites, including text, images, and multimedia. – Creating engaging content is key to attracting and retaining visitors on a website.
