Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vensah-dev/web-develop
Web Develop was an app playground that I made for the Swift Student Challenge 2024. The app playground is designed to teach users the basics of HTML and CSS and get the user interested in web development for them to possibly pursue it in the future.
https://github.com/vensah-dev/web-develop
2024 swift swiftstudentchallenge swiftui
Last synced: about 1 month ago
JSON representation
Web Develop was an app playground that I made for the Swift Student Challenge 2024. The app playground is designed to teach users the basics of HTML and CSS and get the user interested in web development for them to possibly pursue it in the future.
- Host: GitHub
- URL: https://github.com/vensah-dev/web-develop
- Owner: vensah-dev
- Created: 2024-03-29T01:57:38.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-12T07:17:57.000Z (7 months ago)
- Last Synced: 2024-05-12T08:24:41.731Z (7 months ago)
- Topics: 2024, swift, swiftstudentchallenge, swiftui
- Homepage:
- Size: 73.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Develop SSC 2024
Web Develop is an app playground that I made for the Swift Student Challenge 2024. The app playground is designed to teach people the basics of HTML and CSS and get the user interested in web development for them to possibly pursue it in the future.
The app playground consists of 3 parts, the code editor, the website simulator and tutorials.
The code editor works by taking the CSS and HTML code that is given by the user and concatenates the CSS code into the header of the HTML code to create a single HTML string which is used by WKWebKit to load it as a HTML string locally.
The website simulator displays the website that gets created by the user in realtime as they change their code. It acts like a tab from a real web browser, which means it can display the title of the website and maximise changing the viewport size, this can be helpful for the user to better understand how HTML and CSS work.
Finally, the tutorial section is under the simulator window. The tutorial section contains a detailed step by step tutorial on how to code a basic website that would get the user's interest in web development kick started. The tutorials include multiple different analogies, examples and code snippets that get simulated real time to show the result of certain code to make understanding parts of the code easy for beginners.
## Screenshots
### Sample Website in full screen simulator
### Starting Page
### Full App
