สร้าง + เขียนโค้ด + สร้าง
ศูนย์เรียนรู้ซูริน
การพัฒนาเว็บสำหรับผู้เริ่มต้น
![](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2023/12/www.jpg?fit=980%2C789&ssl=1)
What is a webpage?
A webpage is a digital document displayed on the internet, created using HTML, CSS, and possibly JavaScript, and designed to be accessed and viewed through a web browser.
![](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/01/Visual_Studio_Code_1.35_icon.svg.png?fit=2048%2C2048&ssl=1)
VS Code
Visual Studio Code (VS Code) is a free, cross-platform source-code editor developed by Microsoft. It’s widely used for web development, offering a user-friendly interface, versatile language support, and features like code highlighting, autocompletion, and a rich extension ecosystem.
![github, logo, favicon-154769.jpg](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/01/github-logo-favicon-154769.png?fit=1280%2C1280&ssl=1)
GitHub
Visual Studio Code (VS Code) is a free, cross-platform source-code editor developed by Microsoft. It’s widely used for web development, offering a user-friendly interface, versatile language support, and features like code highlighting, autocompletion, and a rich extension ecosystem.
![html5, icon, graphics-1841458.jpg](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/01/html5-icon-graphics-1841458.png?fit=1138%2C1280&ssl=1)
HTML.01
Every webpage you encounter while browsing the internet, be it on your laptop or phone, is crafted using a language known as “HTML” (Hypertext Markup Language).
![html5, icon, graphics-1841458.jpg](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/01/html5-icon-graphics-1841458.png?fit=1138%2C1280&ssl=1)
HTML.03
Boxes
Looking at any website, we can easily see that everything is made of boxes. Small boxes, big boxes, boxes inside boxes…
![html5, icon, graphics-1841458.jpg](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/01/html5-icon-graphics-1841458.png?fit=1138%2C1280&ssl=1)
HTML.04
Attributes
HTML tags can have variations added to them to achieve different results. These variations are added via “attributes”.
![css3, icon, 2d-1841590.jpg](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/02/css3-icon-2d-1841590.png?fit=1233%2C1280&ssl=1)
CSS Basic Styling
Create an HTML page with a few paragraphs and headings. Use CSS to change the font size, color, and text alignment.
![css3, icon, 2d-1841590.jpg](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2024/02/css3-icon-2d-1841590.png?fit=1233%2C1280&ssl=1)
CSS Backgrounds and Borders
Experiment with background colors and borders. Apply different background colors to sections of your HTML and add borders with various styles and colors.
![](https://i0.wp.com/surinlearninglab.com/wp-content/uploads/2023/10/qrcode_share1696595298360.jpg?fit=536%2C536&ssl=1)
How do I contact my Instructor?
To contact your instructor, or Surin Learning Lab, scan the QR code for LINE call 090-912-7265 or email us at info@surinlearninglab.com